How to update the Fullcalendar in my function?

Question

How to update the Fullcalendar in my function? (onClick, onSelect, function(), etc)

example https://codepen.io/liggth/pen/GRgjYqG?editors=1010

document.addEventListener('DOMContentLoaded', function() {
  var Calendar = FullCalendar.Calendar;
  var calendarEl = document.getElementById('calendar');

  var calendar = new Calendar(calendarEl, {
    plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    editable: true,
  });

  calendar.render();


});

function test(){
   calendar.refetchEvents(); 
}

IN this case, I get the error: Uncaught TypeError: calendar.refetchEvents is not a function

It's a scope error - `calendar` is out of scope when you call it from the `test` function. You need to make it global. You should just variable scope a bit more, so that you understand it. https://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript — ADyson, Dec 16 '19 at 09:36

Atul Kumar · Accepted Answer · 2019-12-15T12:52:57.387

You should add property as dateClick and assign function in it. docs

var calendar;
document.addEventListener('DOMContentLoaded', function() {
  var Calendar = FullCalendar.Calendar;
  var calendarEl = document.getElementById('calendar');

  calendar = new Calendar(calendarEl, {
    plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    editable: true,
     dateClick: function() {
    alert('a day has been clicked!');
  }

  });

  calendar.render();


});

  function test() {
     calendar.refetchEvents();
  }

Thanks for your reply! But I do not understand you. In your example, I still get the same error: Uncaught TypeError: calendar.refetchEvents is not a function — LIGGTH, Dec 15 '19 at 12:42

How to update the Fullcalendar in my function?

1 Answers1