I want to update fullcalendar business hours through ajax call

Question

I can render events through ajax call easily. But I am unable to update business hours and apply select constraint after ajax response....

Answer 1

I wanted to share my approach. Just a crude example.

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();
        })  
    }

If the hours or days change I can call

Calendar.create()

And the new calendar is created with days and hours. I know this may not be the best approach but it seems to be working just fine for me.

Answer 2

Since version 2.9.0, it is possible to dynamically set options after initialization. For Example:

$('#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'
        }]});

I needed the same thing and this worked fine.

fullcalendar.io/docs/utilities/dynamic_options/

Answer 3

First, change business hours to a dynamically-obtained value:

businessHours: getBusinessHours()

Then write the actual function. For example, it can read the hours from a global variable.

var g_BusinessHours = null;

function getBusinessHours() {
    return g_BusinessHours;
}

Finally, in your ajax call you would update the global var and re-render the calendar:

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