时间戳

首页 > 解决方案 > FullCalendar 4：通过 AJAX 的 businessHours 未及时显示GridWeek

javascript - FullCalendar 4：通过 AJAX 的 businessHours 未及时显示GridWeek

问题描述

每次我选择不同的资源时，我都会渲染一个使用 businessHours 和 Events 更新的日历。

我面临的问题是营业时间。我得到了正确的 JSON，因为它在 resourceTimeGridDay 中运行良好，但是当我切换到 timeGridWeek 时，没有显示营业时间。

我通过 AJAX 获取资源，返回的 JSON 结构如下：

[
   {
      "id":"2-1",
      "title":"Silvano",
      "businessHours":[
         {
            "startTime":"08:00",
            "endTime":"12:30",
            "daysOfWeek":"[1]"
         },
         {
            "startTime":"14:00",
            "endTime":"17:30",
            "daysOfWeek":"[1]"
         },
         {
            "startTime":"08:00",
            "endTime":"15:00",
            "daysOfWeek":"[2]"
         },
         {
            "startTime":"08:00",
            "endTime":"12:30",
            "daysOfWeek":"[3]"
         },
         {
            "startTime":"14:00",
            "endTime":"17:30",
            "daysOfWeek":"[3]"
         },
         {
            "startTime":"08:00",
            "endTime":"15:00",
            "daysOfWeek":"[4]"
         },
         {
            "startTime":"08:00",
            "endTime":"12:30",
            "daysOfWeek":"[5]"
         },
         {
            "startTime":"14:00",
            "endTime":"17:30",
            "daysOfWeek":"[5]"
         }
      ],
      "eventColor":"#bdbdbd",
      "servizi":[
         "2"
      ]
   }
]

在日历渲染代码中复制/粘贴这些值，会显示 businessHours：

document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'timeGridWeek',
    businessHours: [{"startTime":"08:00","endTime":"12:30","daysOfWeek":"[1]"},{"startTime":"14:00","endTime":"17:30","daysOfWeek":"[1]"},{"startTime":"08:00","endTime":"15:00","daysOfWeek":"[2]"},{"startTime":"08:00","endTime":"12:30","daysOfWeek":"[3]"},{"startTime":"14:00","endTime":"17:30","daysOfWeek":"[3]"},{"startTime":"08:00","endTime":"15:00","daysOfWeek":"[4]"},{"startTime":"08:00","endTime":"12:30","daysOfWeek":"[5]"},{"startTime":"14:00","endTime":"17:30","daysOfWeek":"[5]"}]
  });

  calendar.render();
});

但是我需要动态获取它们（可以每周不同）。我查看了文档，但找不到任何答案。任何提示将不胜感激。

标签： javascriptfullcalendarfullcalendar-scheduler

解决方案

通过在基于 resourceTimeGrid 的 Calendar 中添加自定义视图解决的问题：

var calendar = new FullCalendar.Calendar(calendarEl, {
                        
                        plugins: [ 'interaction', 'resourceDayGrid', 'timeGrid', 'list', 'resourceTimeGrid' ],
                        timeZone: 'UTC',
                        height: 'parent',
                        header: {
                            left: 'prev,next today',
                            center: 'title',
                            right: 'dayGridMonth,customResourceTimeGridWeek,resourceTimeGridDay,listWeek'
                        },
                        views: {
                            customResourceTimeGridWeek: {
                              type: 'resourceTimeGrid',
                              duration: { days: 7 },
                              buttonText: 'Week'
                            }
                        },...

推荐阅读