Home / Questions / 3646
Accepted
Luis Alberto Aguilera Clarke
Asked: 2020-02-04 21:10:28 +0800 CST 2020-02-04 21:10:28 +0800 CST

如何用全日历着色工作时间？

  • 772

亲爱的，我有一个大问题。我正在制作一个时间预订系统，因此我使用fullcalendar.io的是一个相当完整的库。

我需要做的是：如何在一周的某些时间定期为浅绿色或透明绿色上色。好像要表明这些时间是可用的。

为此，我添加了一个事件，但在 fullcalendar 中它不支持定期事件（每周一重复）。我只需要用开始时间、结束时间和星期几为可用时间着色。

有可能这样做吗？

$('#calendario').fullCalendar({
      defaultView: 'agendaWeek',
      allDaySlot: false,
      header: {
        left: 'prev,next today myCustomButton',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
      },
      dayClick: function(date, jsEvent, view) {
        //alert('Clicked on: ' + date.format());
        $("#hora_seleccionada").html(date.format("MM/DD/YYYY, h:mm:ss"));

      }
    });
javascript

2 Answers

  1. Fullcalendar 内置了类似的功能，但它的工作方式与您想要的相反。也就是说，它为非工作时间着色。

    businessHours属性设置您希望以不同方式突出显示的时间范围和星期几（非工作时间）。

    这不会创建完整的日历事件，它只是显示哪些时间在工作，哪些时间不工作。

    要更改颜色，您必须修改.fc-nonbusiness非工作日的样式

    不幸的是，它只允许您为工作的一周中的每一天配置相同的模式。

    这必须添加到全日历初始化中：

    businessHours: {
  start: '10:00', // hora final
  end: '18:00', // hora inicial
  dow: [ 1, 2, 3, 4, 5 ] // dias de semana, 0=Domingo
}

    完整示例：

    $(function() {
  $('#calendar').fullCalendar({
      defaultView: 'agendaWeek',
      allDaySlot: false,
      header: {
        left: 'prev,next today myCustomButton',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
      },
      businessHours: {
        start: '10:00', // hora final
        end: '18:00', // hora inicial
        dow: [ 1, 2, 3, 4, 5 ] // dias de semana, 0=Domingo
      },
      dayClick: function(date, jsEvent, view) {
        $("#hora_seleccionada").html(date.format("MM/DD/YYYY, h:mm:ss"));
      }
  });
});
    @import "https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.0/fullcalendar.css";

.fc-nonbusiness {
  background: #90EE90  
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.0/fullcalendar.js"></script>

<div id='hora_seleccionada'></div>
<hr>
<div id='calendar'></div>

    • 5
  2. Best Answer

    我找到了解决此问题的新方法：虽然 businessHours 有效，但我遇到了另一个问题，即添加一组 businessHours，并且它也以相反的方式工作，因为我的问题是规定的。

    我在主 Stack Overflow 上发现了这个问题： https ://stackoverflow.com/questions/30977505/how-to-add-multiple-business-hours-in-fullcalendar

    我所做的是添加一个不透明的浅绿色事件：

    events: [
    {
        start: '00:00:00+02:00',
        end: '08:00:00+02:00',
        color: 'green',
        rendering: 'background',
        dow: [1,2,3,4,5]
    },

    {
        start: '16:00:00+02:00',
        end: '24:00:00+02:00',
        color: 'green',
        rendering: 'background',
        dow: [1,2,3,4,5]
    },

    {
        start: '00:00:00+02:00',
        end: '8:00:00+02:00',
        color: 'green',
        rendering: 'background',
        dow: [6]
    },

    {
        start: '12:00:00+02:00',
        end: '24:00:00+02:00',
        color: 'green',
        rendering: 'background',
        dow: [6]
    }
]

    感谢@rnrneverdies 澄清我的疑问

    • 0