Setting FullCalendar config values dynamically

4
votes

As part of a development project using FullCalendar, I needed to be able to change the value of "slotMinutes" using a browser event (onClick). After a bit of struggle, I was able to find a way.

A) I have a "renderCalendar()" function that contains the jQuery function for building the calendar. Within this function is a setting for "slotMinutes", which I point to a variable initialized to 30.

;  slotTime = 30;
...
  function renderCalendar() {
      $('#calendar').fullCalendar({
          firstHour: 8,
          minTime: 6,
          maxTime: 18,
          slotMinutes: parseInt(slotTime),
          defaultView: 'agendaWeek',
...
  });

B) My event handler function changes the slotTime value, destroys the current calendar, and re-runs the render function.

  function changeSlotTime(slottime) {
      slotTime = slottime;
      $('#calendar').fullCalendar('destroy');
      renderCalendar();
  }

C) The hard-fought battle with this change was understanding that the "slotMinutes" value MUST BE AN INTEGER. Note the "parseInt()" function in the example under section (A).

2
javascriptfullcalendar
Is this a question or are you just sharing your solution? If the latter, remember to phrase it in the form of a question so that it at least sticks with the Q&A format of StackOverflow. – Brandon

2 Answers

1
votes

Current issue is described with comments by author of FullCalendar plugin: first link, second link

0
votes

This should work.. 

function changeSlotTime(newTime) {
  $('#calendar').fullCalendar('options', 'slotTime', newTime
  renderCalendar();
}