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....

businessHours:[ { start: '10:00', // a start time (10am in this example) end: '18:00', // an end time (6pm in this example) dow: [ 1, 2, 3, 4 ] } ] — Ghulam Akbar, Jun 20 '16 at 12:31

score 6 · Answer 1 · answered Aug 14 '17 at 20:54

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/

Perfect solution. – Thirumal Sakthivel Oct 20 '20 at 07:36 — Thirumal Sakthivel, Oct 20 '20 at 07:36

score 0 · Answer 2 · answered Jun 21 '16 at 03:33

0

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');

answered Jun 21 '16 at 03:33

Approach is good. But it has still 2 issues for me. 1. It is not picking up dynamic time. It always shows 9 to 17 hours working times for normal days. 2. function $("#c").fullCalendar('render') is not working. It is not executed. – Ghulam Akbar Jun 27 '16 at 07:29
OK so then getBusinessHours() should return appropriate business hours, e.g. 9-5 if it's Mon-Fri or 9-1 if today is Saturday. But fullcalendar doesn't support different business hours depending on day of week, if you want to see the whole week for example. As for 'render', then try 'refetchEvents'. – Jun 27 '16 at 07:46
1. Business hours can be per day basis, like: { start: 9:00, end: 18;00, dow: [1, 2, 3, 4, 5], }, { start: 8:00, end: 22;00, dow: [0, 6], }, It works fine but only on page load basis. I am facing issue to render these business hours on ajax based. 2. 'render' and 'refetchEvents' are two differenet methods. I don't need to update events here. I need re-rendered working hours of calendar. – Ghulam Akbar Jun 27 '16 at 08:31
Updating businees hours on ajax call is re-making the whole calendar. On the other hand, placing events above calendar is possible. I am not sure, re-making business hours is actually the skeleton. So can it be possible to re-apply businnes constraints (select constraint) etc...? – Ghulam Akbar Jun 27 '16 at 08:51
refetchEvents usually works for me to update completely refresh the calendar, but if it doesn't, you can just 'destroy' and 'render' the calendar again. – Jun 27 '16 at 09:18
Still not worked for me. After destroying calender, it is not rendered again. – Ghulam Akbar Jun 27 '16 at 11:40

score 0 · Answer 3 · answered Jul 18 '20 at 13:31

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.

I want to update fullcalendar business hours through ajax call

3 Answers3