CODEWITHSUNDEEP
jqueryajaxfullcalendar
shadetreeQM
shadetreeQM

Reputation: 45

fullCalendar viewRender with ajax in infinite loop

I am trying to set up a calendar in which the businessHours can vary throughout the year. For example, an ice cream store that is open from 12:00-10:00 P.M. from May 30th - October 1st every year. I have figured out how to pull the business hours from the server via an ajax call; but I want to make sure they update if the user moves between views in which the businessHours change. Using the example of the ice cream store again, if the user starts on the week before May 30th and then navigates to the week of May 30th, the businessHours should change.

To do this, I'm using jquery's $.post within the function for viewRender (as shown below) 

viewRender: function(view, element){
               $.post("calendar_constraint_ajax.php", {start:    view.start.format(), end: view.end.format()}, function(json_bh) {
                if(json_bh != 'error')
                {
                    var bh = JSON.parse(json_bh);
                    $('#calendar').fullCalendar('option', {businessHours: bh, selectConstraint: "businessHours"});
                }
            });
        }

I get the change in business hours that I expect. But something repeatedly calls the server: view of Network in Chrome Developer Tools

When I don't include the AJAX call, this only seems to run once, but with the $.post, it seems to be stuck in an infinite loop.

I have two questions: 1.) Why does it keep calling the server? 2.) Is there a better way to update the businessHours property when the date range changes? (I'm still pretty new to fullCalendar.)

Upvotes: 2

Views: 2081

Answers (3)

shadetreeQM
shadetreeQM

Reputation: 45

I wound up building my own buttons for prev, next, and the views that I'm allowing so that I can do other stuff before it renders. See https://fullcalendar.io/docs/current_date/prev/ for an example in the documentation that I started with. I implemented it as:

$('#prev').click(function(){
        $('#calendar').fullCalendar('prev');
        getBusinessHours($('#calendar').fullCalendar('getView').start.format(), $('#calendar').fullCalendar('getView').end.format());
    });

with getBusinessHours defined as:

function getBusinessHours(start_dt, end_dt)
{
    $.post("calendar_constraint_ajax.php", {start: start_dt, end: end_dt, rid: '<?=utilities::encode($rid);?>'}, function(json_bh) {
        if(json_bh != 'error')
        {
            var bh = JSON.parse(json_bh);
            //console.log(bh);
            $('#calendar').fullCalendar('option', {businessHours: bh, selectConstraint: "businessHours"});
        }
    });
}

to pull in the business hours for a given date range from the server.

Thank you to everyone who responded this for your comments/answers. It helped me work out a solution for this.

Upvotes: 0

junho
junho

Reputation: 3841

It looks like unsolved issue https://github.com/fullcalendar/fullcalendar/issues/3519

so alternately, I solved this dirty.

viewRender: () => {
    if(!this.initComplte) {
        this.renderCalendarEvents();
        this.initComplte = true;
    }
})

Upvotes: 2

JPeG
JPeG

Reputation: 821

viewRender is firing multiple times because the event fires in several situations.

Here is the info regarding viewRender:

Callback will get triggered when the user changes the view, or when any of the date navigation methods are called.

So most likely you are calling it in another function you have - without realizing it.

You could try updating the hours using the eventAfterAllEvents to prevent repeated calls:

https://fullcalendar.io/docs/event_rendering/eventAfterAllRender/

Upvotes: 0

Related Questions