CODEWITHSUNDEEP
javascriptjqueryfullcalendarfullcalendar-schedulerfullcalendar-4
chris.cavage
chris.cavage

Reputation: 881

Programmatically change date of fullcalendar 4

I am using fullcalendar v4. I have a mini calendar that once an event is clicked, I want another larger calendar (calendar_full) to go to that date.

<script type="text/javascript">

document.addEventListener('DOMContentLoaded', function() {

    var calendar1 = document.getElementById('calendar_mini');

    var calendar_mini = new FullCalendar.Calendar(calendar1, {
        plugins: ['interaction', 'dayGrid'],
        eventClick: function(info) {

            //when clicking on events, go to date on main calendar
            calendar.gotoDate(info.event.start)


        }
 ...
});

document.addEventListener('DOMContentLoaded', function() {

    var calendar_full = document.getElementById('calendar_full');

    var calendar = new FullCalendar.Calendar(calendar_full, {
         plugins: ['interaction', 'resourceDayGrid', 'resourceTimeGrid', 'timeGrid'],
         header: {
            right: 'prevYear,prev,next,nextYear,today',
            left: 'title',
            center: 'resourceTimeGridDay,resourceTimeGridWeek,resourceDayGridMonth'
            },
           selectMirror: true,
 ...
)};

In the calendar_mini code, the eventClick function of calendar.gotoDate(info.event.start) does NOT change the main calendar. I get error:

Uncaught ReferenceError: calendar is not defined

Upvotes: 1

Views: 2060

Answers (1)

ADyson
ADyson

Reputation: 61829

The problem is that the variable called "calendar" is not in scope when you use it in the callback, which is why it's undefined. Its scope is limited to the "DOMContentLoaded" callback in which you declared it.

Now, you don't need need two separate "DOMContentLoaded" callbacks here. One is generally sufficient for all the code that needs to be run when the page has loaded.

If you move everything inside a single callback, you won't have a problem:

document.addEventListener('DOMContentLoaded', function() {

  var calendar1 = document.getElementById('calendar_mini');

  var calendar_mini = new FullCalendar.Calendar(calendar1, {
    plugins: ['interaction', 'dayGrid'],
    eventClick: function(info) {
        //when clicking on events, go to date on main calendar
        calendar.gotoDate(info.event.start)
    }

  var calendar_full = document.getElementById('calendar_full');

  var calendar = new FullCalendar.Calendar(calendar_full, {
     plugins: ['interaction', 'resourceDayGrid', 'resourceTimeGrid', 'timeGrid'],
     header: {
        right: 'prevYear,prev,next,nextYear,today',
        left: 'title',
        center: 'resourceTimeGridDay,resourceTimeGridWeek,resourceDayGridMonth'
        },
       selectMirror: true,
  ...
)};

Upvotes: 2

Related Questions