DayPilot.Switcher Constructor

The DayPilot.Switcher constructor creates a view switcher that links trigger elements to DayPilot calendar views.

Declaration

new DayPilot.Switcher([options])

Parameters

• options (object) - initial Switcher properties

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

• options.triggers (array) - trigger/view mappings; each item must specify id (trigger element id as a string, or its DOM element) and view (the target calendar component, either DayPilot.Calendar or DayPilot.Month)

• options.navigator (DayPilot.Navigator) - 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, and 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");

See Also

DayPilot.Switcher Class