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.

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 })
});
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.