javascript scheduler next previous buttons

JavaScript

This example shows how to implement custom “Next”, “Previous” and “Today” buttons to change the visible date range.

The click event handler calculates the new startDate, and days properties and load the event data for the new date range. Then it reloads the Scheduler using an update() call.

<a href="#" id="previous">Previous</a> |
<a href="#" id="today">Today</a> |
<a href="#" id="next">Next</a>

<div id="dp"></div>

<script>

    const dp = new DayPilot.Scheduler("dp", {
      // ... config
    });
    dp.init();

    const app = {
      elements: {
        previous: document.getElementById("previous"),
        today: document.getElementById("today"),
        next: document.getElementById("next")
      },
      init() {
        app.elements.previous.addEventListener("click", (e) => {
          e.preventDefault();
          app.changeDate(dp.startDate.addMonths(-1));
        });
        app.elements.today.addEventListener("click", (e) => {
            e.preventDefault();
            app.changeDate(DayPilot.Date.today());
        });
        app.elements.next.addEventListener("click", (e) => {
            e.preventDefault();
            app.changeDate(dp.startDate.addMonths(1));
        });
      },
      changeDate(date) {
        const startDate = date.firstDayOfMonth();
        const days = startDate.daysInMonth();
        const events = [/* ... */]; // provide event data for the new date range
        dp.update({
          startDate,
          days,
          events
        });
      }
    }
    app.init();

</script>

API: update.

The Previous month and Next month buttons calculate both the new start date and that month's length. Each update clears the event collection; replace the empty array with data loaded for the requested range.

The framework examples use DayPilot Pro. For installation, see the Angular, React or Vue Scheduler guide.

Angular

Both click methods use the @ViewChild Scheduler control to read the current start date and apply the new month.

import {Component, ViewChild} from "@angular/core";
import {DayPilot, DayPilotModule, DayPilotSchedulerComponent} from "daypilot-pro-angular";

@Component({
  selector: "app-scheduler-example",
  standalone: true,
  imports: [DayPilotModule],
  template: `
    <button (click)="action0()">Previous month</button>
    <button (click)="action1()">Next month</button>
    <daypilot-scheduler [config]="config" #scheduler></daypilot-scheduler>
  `
})
export class SchedulerExampleComponent {
  @ViewChild("scheduler") scheduler!: DayPilotSchedulerComponent;
  config: DayPilot.SchedulerConfig = {
    startDate: "2026-11-01",
    days: 30,
    scale: "Day",
    timeHeaders: [{groupBy: "Month"}, {groupBy: "Day", format: "d"}],
    resources: [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}],
    events: [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}]
  };
  async action0() {
    const dp = this.scheduler.control;
    const start = new DayPilot.Date(dp.startDate).addMonths(-1);
    dp.update({startDate: start, days: start.daysInMonth(), events: []});
  }
  async action1() {
    const dp = this.scheduler.control;
    const start = new DayPilot.Date(dp.startDate).addMonths(1);
    dp.update({startDate: start, days: start.daysInMonth(), events: []});
  }
}

  • Angular Scheduler: Next/Previous Buttons

    React

    Read the control's current startDate through the ref supplied by controlRef each time a navigation button is clicked.

    import React, {useRef} from "react";
import {DayPilot, DayPilotScheduler} from "daypilot-pro-react";

export default function SchedulerExample() {
  const scheduler = useRef(null);
  async function action0() {
    const dp = scheduler.current;
    const start = new DayPilot.Date(dp.startDate).addMonths(-1);
    dp.update({startDate: start, days: start.daysInMonth(), events: []});
  }
  async function action1() {
    const dp = scheduler.current;
    const start = new DayPilot.Date(dp.startDate).addMonths(1);
    dp.update({startDate: start, days: start.daysInMonth(), events: []});
  }
  return <div>
    <button onClick={action0}>Previous month</button>
    <button onClick={action1}>Next month</button>
    <DayPilotScheduler
      controlRef={control => { scheduler.current = control; }}
      startDate={"2026-11-01"}
      days={30}
      scale={"Day"}
      timeHeaders={[{groupBy: "Month"}, {groupBy: "Day", format: "d"}]}
      resources={[{id: "A", name: "Room A"}, {id: "B", name: "Room B"}]}
      events={[{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}]}
    />
  </div>;
}

    • React Scheduler: Next/Previous Buttons

      Vue

      The two @click functions read and update scheduler.value.control, accessed through the component ref.

      <script setup>
import {ref} from "vue";
import {DayPilot, DayPilotScheduler} from "daypilot-pro-vue";

const scheduler = ref(null);
const startDate = "2026-11-01";
const days = 30;
const scale = "Day";
const timeHeaders = [{groupBy: "Month"}, {groupBy: "Day", format: "d"}];
const resources = [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}];
const events = [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}];
async function action0() {
  const dp = scheduler.value.control;
  const start = new DayPilot.Date(dp.startDate).addMonths(-1);
  dp.update({startDate: start, days: start.daysInMonth(), events: []});
}
async function action1() {
  const dp = scheduler.value.control;
  const start = new DayPilot.Date(dp.startDate).addMonths(1);
  dp.update({startDate: start, days: start.daysInMonth(), events: []});
}
</script>

<template>
  <div>
    <button @click="action0">Previous month</button>
    <button @click="action1">Next month</button>
    <DayPilotScheduler ref="scheduler"
      :startDate="startDate"
      :days="days"
      :scale="scale"
      :timeHeaders="timeHeaders"
      :resources="resources"
      :events="events"
    />
  </div>
</template>

      ASP.NET WebForms

      You can add the navigation buttons using custom HTML:

      <a href="javascript:dps.commandCallBack('previous');">Previous</a> |
<a href="javascript:dps.commandCallBack('today');">Today</a> |
<a href="javascript:dps.commandCallBack('next');">Next</a>

      You need to handle these events on the server-side in Command event handler:

      protected void DayPilotScheduler1_Command(object sender, DayPilot.Web.Ui.Events.CommandEventArgs e)
{
  switch (e.Command)
  {
      case "next":
          DayPilotScheduler1.StartDate = DayPilotScheduler1.StartDate.AddYears(1);
          DayPilotScheduler1.Days = Year.Days(DayPilotScheduler1.StartDate.Year);
          break;
      case "previous":
          DayPilotScheduler1.StartDate = DayPilotScheduler1.StartDate.AddYears(-1);
          DayPilotScheduler1.Days = Year.Days(DayPilotScheduler1.StartDate.Year);
          break;
      case "today":
          DayPilotScheduler1.StartDate = new DateTime(DateTime.Today.Year, 1, 1);
          DayPilotScheduler1.Days = Year.Days(DayPilotScheduler1.StartDate.Year);
          break;

  }

  setDataSourceAndBind();
  DayPilotScheduler1.Update();
}

      ASP.NET MVC

      You can add the navigation buttons using custom HTML:

      <a href="javascript:dps.commandCallBack('previous');">Previous</a> |
<a href="javascript:dps.commandCallBack('today');">Today</a> |
<a href="javascript:dps.commandCallBack('next');">Next</a>

      You need to handle these events on the server-side in OnCommand:

      protected override void OnCommand(CommandArgs e)
{
  switch (e.Command)
  {
    case "previous":
      StartDate = StartDate.AddMonths(-1);
      Update(CallBackUpdateType.Full);
      break;
    case "today":
      StartDate = DateTime.Today;
      Update(CallBackUpdateType.Full);
      break;
    case "next":
      StartDate = StartDate.AddMonths(1);
      Update(CallBackUpdateType.Full);
      break;
  }
}

      Availability

      Availability of this feature in DayPilot editions:

      ProductLitePro
      DayPilot for JavaScript
      DayPilot for ASP.NET WebForms
      DayPilot for ASP.NET MVC
      DayPilot for Java