Modifying Calendar Settings At Runtime Using JavaScript

Most of Pie Calendar's calendar properties can be modified at runtime using JavaScript.

changeView()

Here's an example code snippet that will change the view to a specific view when the calendar is loaded:

var ready = (callback) => {
  if (document.readyState != "loading") callback();
  else document.addEventListener("DOMContentLoaded", callback);
}

ready(() => { 
  window.calendar.changeView('listYear');
});

The changeView() function allows us to change the view. Note that in this case, the view "listYear" isn't explicitly supported by Pie Calendar so the view dropdown will not reflect the correct view. When using "listYear" via this snippet, it's recommended to apply "display: none" to .piecal-wrapper .piecal-controls to hide the view dropdown.

Change First Day of Week

This example code will set the calendar's first day of each week to Sunday. This is useful if you're in a locale where the first day of the week is normally Monday, but you need to switch it to Sunday.

var ready = (callback) => {
      if (document.readyState != "loading") callback();
      else document.addEventListener("DOMContentLoaded", callback);
    }

    ready(() => { 
      if (window.calendar) {
        window.calendar.setOption('firstDay', 0); // This sets Sunday as the first day of the week
      } else {
        console.error("FullCalendar object not found.");
      }
    });

You can see in the example code above that Sunday is equal to 0. If you want the week to start on a different day, you can change 0 to 1 for Monday, 2 for Tuesday, etc.

setOption()

Here's an example code snippet that will change the event time format used on the calendar (not in the popover):

var ready = (callback) => {
  if (document.readyState != "loading") callback();
  else document.addEventListener("DOMContentLoaded", callback);
}

ready(() => { 
  window.calendar.setOption('eventTimeFormat', { hour: 'numeric', minute: '2-digit', meridiem: 'true' })
});

The setOption() function gives us access to all of the calendar's native options, such as eventTimeFormat and many others, like direction, contentHeight, locale, and more.

Another example of using setOption() allows you to set the calendar to treat all dates before today as invalid, preventing the display of events in the past & navigation to past dates:

var ready = (callback) => {
  if (document.readyState != "loading") callback();
  else document.addEventListener("DOMContentLoaded", callback);
}

ready(() => { 
  let piecalToday = new Date();
  window.calendar.setOption('validRange', { start: piecalToday })
});