CODEWITHSUNDEEP
javascriptfullcalendar
Santosh
Santosh

Reputation: 3827

Fullcalendar get current view on click of month time week etc

Here whenever the events is trigger I want to know the current view of the calendar like if it is dayGridMonth, timeGridWeek, timeGridDay or listWeek.

I have an select element where on change I am trying to update events on calendar. But what is happening is, if I select list view and change select menu then the whole calendar is refresh to default view. I want to set the calendar to the same view it was before selecting select box.

    calendar_view_session: function(){
        var calendar = new FullCalendar.Calendar(calendarEl, {
        plugins: ['dayGrid', 'timeGrid', 'list', 'interaction'],
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
        },

        defaultDate: moment().format('YYYY-MM-DD'),//'2019-04-12',
        navLinks: true, 
        defaultView: 'listWeek',
        eventSources: [{
                    events: function (info, successCallback, failureCallback) {
                        console.log(info);
                    },
                    ..........
            }
          ],
          ..........
  }
}



                <select name="select_meetingtype" id="select_meetingtype" class="form-control">
                    <option value="">All Sessions</option>
                    <option value="free_session">Free Sessions</option>
                    <option value="weekly_session">Classes</option>
                </select>

$('#select_meetingtype').on('change', function() {
  _this.calendar_view_session(this.value)
});

The console.log(info) is only printing dates.

enter image description here

Upvotes: 1

Views: 1287

Answers (1)

Webomatik
Webomatik

Reputation: 836

To grab the current view, try this:

const views = {day: 'timeGridDay', week: 'timeGridWeek', month: 'timeGridMonth', list: 'listWeek'};
var currentView = 'listWeek';
$('#calendar_container').delegate('.fc-toolbar-chunk button', 'click', function(){
  currentView = views[$(this).text()];
  calendar_view_session();// re-initialize calendar with current selectedView
})

calendar_view_session: function(){
    var calendar = new FullCalendar.Calendar(calendarEl, {
        //
        //
        defaultView: currentView,// use global var instead of static value
        //
        //etc.

This will re-initialize your calendar with the current view instead of reverting to the default one. The delegation is needed since the whole calendar gets destroyed and re-created when updating events.

Upvotes: 1

Related Questions