我想通过Ajax Call更新FullCalendar工作时间

Question

我可以轻松地通过ajax调用渲染事件。但是我无法更新营业时间，并在Ajax响应后应用某些约束..

Answer 1

从2.9.0版本开始，可以在初始化后动态设置选项。例如：

$('#calendar').fullCalendar('option', {
   businessHours: [{
            dow: [0, 1, 2, 3, 4, 5, 6],
            start: '09:00',
            end: '11:00'
        }, {
            dow: [0, 1, 2, 3, 4, 5, 6],
            start: '13:00',
            end: '18:00'
        }]});

我需要同样的事情，这很好。

fullcalendar.io/docs/utilities/dynamic_options/

Answer 2

首先，将业务时间更改为动态增值的值：

businessHours: getBusinessHours()

然后编写实际功能。例如，它可以从全局变量中读取小时数。

var g_BusinessHours = null;
function getBusinessHours() {
    return g_BusinessHours;
}

最后，在您的ajax调用中，您将更新全局var并重新渲染日历：

(ajax call success function) 
    g_BusinessHours = data.data.result[0];
    $("#c").fullCalendar('render');

Answer 3

我想分享我的方法。只是一个粗略的例子。

schedule.php

  function getSchedule(){
   $mdays = new stdClass;
   $mdays->daysOfWeek = [1];
   $mdays->startTime = '8:00';
   $mdays->endTime = '18:00';
   $tdays = new stdClass;
   $tdays->daysOfWeek = [2];
   $tdays->startTime = '8:00';
   $tdays->endTime = '18:00';

   return array($mdays,$tdays);
}

script.js

    Calendar.schedule = () => {
        return ajaxRequest.post('getSchedule', Calendar.getScheduleURL, {})
        .then(function(data){                   
            return JSON.parse(data).data;
        })  
    }
    /**
    * Calendar Options
    */
    Calendar.options = () => {
        
        var options = {};
        options.plugins = [ 'bootstrap', 'interaction', 'dayGrid', 'timeGrid', 'list' ];
        options.header = {
          left  : 'prev, today, next',
          center: 'title',
          right : 'dayGridMonth,timeGridWeek,timeGridDay, list'
        };
        options.weekNumbers = true;
        options.buttonText = {
            today: 'today',
            month: 'month',
            week : 'week',
            day  : 'day'
        };
        options.businessHours = [];
        options.eventConstraint = "businessHours";
        options.themeSystem = 'bootstrap';
        options.timeZone = 'local';
        
        options.events = Calendar.event();      
        
        options.editable = true; 
        options.droppable = true; // this allows things to be dropped onto the calendar !!!
        options.allDaySlot = true;
        options.slotEventOverlap = true;
        
        options.eventClick = Calendar.eventClick;
        options.eventMouseEnter = Calendar.eventMouseEnter;
        options.eventMouseLeave = Calendar.eventMouseLeave
        options.eventDrop =  Calendar.eventDrop; 
        options.eventResize =  Calendar.eventResize; 
        options.eventOverlap = Calendar.eventOverlap;
        options.eventRender = Calendar.eventRender;
        options.loading = Calendar.loading;
        
        return options;
    
    };
    //Calendar DOM Element
    Calendar.element = $('#calendar');
    
    Calendar.object = {};
    
    Calendar.create = () => {
        Calendar.getSchedule().then(function(data){     
            var options = Calendar.options();
            options.businessHours = data;
            //Calendar Object 
            Calendar.object = new FullCalendar.Calendar(Calendar.element[0], options);
            //Calendar Render
            Calendar.object.render();
        })  
    }

如果小时或几天更改，我可以致电

Calendar.create()

和新日历是用天数创建的。我知道这可能不是最好的方法，但似乎对我来说很好。