DayPilot.Switcher Constructor

Declaration

DayPilot.Switcher([options]);

Parameters

• options - object, properties to be set

In addition to standard properties, the following special properties of the options object are supported:

• options.triggers (array) - array of trigger/view mappings; items must specify id property (trigger element id as string, or its DOM element) and view property (the target calendar components - DayPilot.Calendar or DayPilot.Month)
• options.navigator (DayPilot.Navigator) - specifies the linked date picker object

Example

For a complete example, see the tutorial: Open-Source HTML5/JavaScript Calendar with Day/Week/Month Views (PHP, MySQL)

HTML

The HTML defines placeholders for the components ("nav" for the date picker, "dpDay" for the calendar day view, "dpWeek" for the calendar week view and "dpMonth" for the month view) and buttons that switch the views ("buttonDay", "buttonWeek", "buttonMonth").

<div style="display:flex">
  <div style="">
    <div id="nav"></div>
  </div>
  <div style="flex-grow: 1; margin-left: 10px;">
    <div class="toolbar buttons">
      <span class="toolbar-item"><a id="buttonDay" href="#">Day</a></span>
      <span class="toolbar-item"><a id="buttonWeek" href="#">Week</a></span>
      <span class="toolbar-item"><a id="buttonMonth" href="#">Month</a></span>
    </div>
    <div id="dpDay"></div>
    <div id="dpWeek"></div>
    <div id="dpMonth"></div>
  </div>
</div>

JavaScript

This code initializes the components (nav, day, week, and month) and links them together using DayPilot.Switcher. Each button is associated with its calendar view using the triggers array.

const nav = new DayPilot.Navigator("nav", { /* ... */ });
nav.init();

const day = new DayPilot.Calendar("dpDay", { /* ... */ });
day.init();

const week = new DayPilot.Calendar("dpWeek", { /* ... */ });
week.init();

const month = new DayPilot.Month("dpMonth", { /* ... */ });
month.init();

const switcher = new DayPilot.Switcher({
  triggers: [
    {id: "buttonDay", view: day },
    {id: "buttonWeek", view: week},
    {id: "buttonMonth", view: month}
  ],
  navigator: nav,
  selectedClass: "selected-button",
  onChanged: args => {
    switcher.events.load("calendar_events.php");
  }
});

switcher.select("buttonWeek");