Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to redraw FullCalendar view?

I know how to initilize the view of FullCalendar, in particular when my page is load I do:

$('#calendar').fullCalendar({
        'defaultView': 'multiColAgendaWeek',
        'height': BackendCalendar.getCalendarHeight(),
        'editable': true,
        'firstDay': 1, // Monday
        'slotMinutes': 30,
        'snapMinutes': 15,
        'axisFormat': 'HH:mm',
        'timeFormat': 'HH:mm{ - HH:mm}',
        'allDayText': EALang['all_day'], 
        'columnFormat': 
        {
            'month': 'ddd',
            'week': 'ddd D',
            'day': 'dddd'
        },
        'titleFormat': 
        {
            'month': 'MMMM YYYY',
            'week': "MMM D YYYY",
            'day': 'MMMM D YYYY'
        },
        'header': 
        {
            'left': 'prev,next today',
            'center': 'title',
            'right': 'multiColAgendaDay,multiColAgendaWeek,month'
        },
        'views':
        {
            'multiColAgendaDay':
            {
                'type': 'multiColAgenda',
                'duration': { days: 1},
                'columns': 
                [
                    { id:1, name: 'Op1' },
                    { id:2, name: 'Op2' }
                ]
            },
            'multiColAgendaWeek': 
            {
                'type': 'multiColAgenda',
                'duration': { weeks: 1 },
                'columns': [
                    { id: 1, name: 'Op1' },
                    { id: 2, name: 'Op2' }
                ]
            }
        },

I'm using this extension: https://github.com/mherrmann/fullcalendar-columns/issues/1 that add the resource support. Anyway, What I'm trying to do is change the columns parameter content through code. The columns property is inside the two available view multiColAgendaDay and multiColAgendaWeek. I've a method that's populate the calendar with all the appointments available, this method doesn't reload the page 'cause use an ajax request. All working fine, but I want to add in this method a redraw of the columns available, in particular inside the population method at the top of all redrawing the calendar view:

$('#calendar').fullCalendar({
            views: 
            {
                'multiColAgendaDay': 
                {
                    'type': 'multiColAgenda',
                    'duration': { days: 1 },
                    'columns': 
                    [
                        { id: 1, name: 'First Column' },
                        { id: 2, name: 'Second Column' }
                    ]
                }
            },
            'multiColAgendaWeek': 
            {
                'type': 'multiColAgenda',
                'duration': { weeks: 1 },
                'columns': 
                [
                    { id: 1, name: 'First Column' },
                    { id: 2, name: 'Second Column' }
                ]
            }
        });

The problem's that the calendar isn't redrawed and after this code execution the result is ever like this:

enter image description here

I don't know what I'm doing wrong, maybe the calendar can't redraw the view without a page reload? How I can fix this?

like image 703
Dillinger Avatar asked Oct 20 '15 19:10

Dillinger


1 Answers

In some case render will not works. I have problem such like that so i made a separate method for this. In my case i have passed Json Array on each refresh so, i have first call the method to get array and then add this line:

$("#calendar").fullCalendar('destroy');

and then create calendar instance and passed Json array to events.

like image 80
Abdul Fawad Avatar answered Oct 11 '22 14:10

Abdul Fawad