Date Picker

You can use a standalone Navigator (date picker) component to change the date range displayed by the JavaScript Scheduler component.

JavaScript

javascript scheduler how to integrate a date picker

<div style="float:left; width:200px">
	<div id="nav"></div>
</div>
<div style="margin-left: 200px">
	<div id="dp"></div>
</div>

<script type="text/javascript">
    var nav = new DayPilot.Navigator("nav");
    nav.showMonths = 3;
    nav.selectMode = "month";
    nav.onTimeRangeSelected = function(args) {
        dp.startDate = args.start;
        dp.days = args.days;
        // load event to dp.events.list from the server
        dp.update();
    };
    nav.init();

    var dp = new DayPilot.Scheduler("dp");

    // view
    dp.startDate = nav.selectionStart;
    dp.cellGroupBy = "Month";
    dp.days = DayPilot.Date.daysDiff(nav.selectionStart, nav.selectionEnd);
    dp.cellDuration = 1440; // one day

    dp.resources = [
                 { name: "Room A", id: "A" },
                 { name: "Room B", id: "B" },
                 { name: "Room C", id: "C" }
                ];

    dp.init();

</script>

Tutorial

JavaScript Scheduler: How to Integrate a Date Picker

API: events.list, resources.

Selecting a month in the Navigator updates the Scheduler's start date and calculates the number of days in that selected month. The examples clear events when switching; load the corresponding reservations when adapting them to your backend.

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

Angular

Bind the Navigator to navigatorConfig. Its selection callback updates the Scheduler control obtained through @ViewChild.

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

@Component({
  selector: "app-scheduler-example",
  standalone: true,
  imports: [DayPilotModule],
  template: `
    <daypilot-navigator [config]="navigatorConfig"></daypilot-navigator>
    <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: []
  };
  navigatorConfig: DayPilot.NavigatorConfig = {
    startDate: "2026-11-01", selectMode: "Month", showMonths: 1, onTimeRangeSelected: args => { this.scheduler.control.update({startDate: args.start, days: args.start.daysInMonth(), events: []}); }
  };

}

Angular Scheduler: Date Navigation

React

Render DayPilotNavigator beside DayPilotScheduler. The Navigator's onTimeRangeSelected prop uses the Scheduler control retained by controlRef.

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

export default function SchedulerExample() {
  const scheduler = useRef(null);

  return <div>
    <DayPilotNavigator startDate="2026-11-01" selectMode="Month" showMonths={1} onTimeRangeSelected={args => { scheduler.current.update({startDate: args.start, days: args.start.daysInMonth(), events: []}); }} />

    <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={[]}
    />
  </div>;
}

Vue

Bind the Navigator's :onTimeRangeSelected prop to selectMonth. That function updates scheduler.value.control through the Scheduler's template ref.

<script setup>
import {ref} from "vue";
import {DayPilot, DayPilotScheduler, DayPilotNavigator} 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 = [];
const selectMonth = args => { scheduler.value.control.update({startDate: args.start, days: args.start.daysInMonth(), events: []}); };

</script>

<template>
  <div>
    <DayPilotNavigator startDate="2026-11-01" selectMode="Month" :showMonths="1" :onTimeRangeSelected="selectMonth" />

    <DayPilotScheduler ref="scheduler"
      :startDate="startDate"
      :days="days"
      :scale="scale"
      :timeHeaders="timeHeaders"
      :resources="resources"
      :events="events"
    />
  </div>
</template>

ASP.NET WebForms

scheduler navigator asp.net

.aspx

<div style="float: left; width: 150px">
  <DayPilot:DayPilotNavigator ID="DayPilotNavigator1" runat="server" 
     BoundDayPilotID="DayPilotScheduler1"
     SelectMode="Week" 
     ShowMonths="3" />
</div>
<div style="margin-left: 150px; min-height: 500px">
  <DayPilot:DayPilotScheduler ID="DayPilotScheduler1" runat="server" 
      OnCommand="DayPilotScheduler1_Command"
      ...
      >
      <Resources>
          <DayPilot:Resource Name="Room A" Value="A" />
          <DayPilot:Resource Name="Room B" Value="B" />
          <DayPilot:Resource Name="Room C" Value="C" />
          <DayPilot:Resource Name="Room D" Value="D" />
          <DayPilot:Resource Name="Room E" Value="E" />
          <DayPilot:Resource Name="Room F" Value="F" />
          <DayPilot:Resource Name="Room G" Value="G" />
          <DayPilot:Resource Name="Room H" Value="H" />
      </Resources>
  </DayPilot:DayPilotScheduler>
</div>

.aspx.cs

protected void DayPilotScheduler1_Command(object sender, DayPilot.Web.Ui.Events.CommandEventArgs e)
{
  switch (e.Command)
  {
      case "navigate":
          DateTime start = (DateTime)e.Data["start"];
          DateTime end = (DateTime)e.Data["end"];

          DayPilotScheduler1.StartDate = start;
          DayPilotScheduler1.DataBind();
          DayPilotScheduler1.Update();
          break;
  }
}

ASP.NET MVC

MVC View

<div style="float: left; width: 150px">
  @Html.DayPilotNavigator("dpn", new DayPilotNavigatorConfig { 
      BoundDayPilot = "dps",
      SelectMode = NavigatorSelectMode.Week,
      ...
      })
</div>
<div style="margin-left: 150px; min-height: 500px">
  @Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig
   {
       ViewType = DayPilot.Web.Mvc.Enums.Calendar.ViewType.Week,
       BackendUrl = ResolveUrl("~/Calendar/Backend"),
       ...
    })
</div>

MVC Controller (Dps class)

protected override void OnCommand(CommandArgs e)
{
  switch (e.Command)
  {
    case "navigate":
      StartDate = (DateTime) e.Data["start"];
      Update(CallBackUpdateType.Full);
      break;
  }
}

protected override void OnFinish()
{
  // only load the data if an update was requested by an Update() call
  if (UpdateType == CallBackUpdateType.None)
  {
      return;
  }

  Events = new EventManager(Controller).Data.AsEnumerable();

  DataStartField = "start";
  DataEndField = "end";
  DataTextField = "text";
  DataIdField = "id";
  DataResourceField = "resource";
}

Availability

Availability of this feature in DayPilot editions:

Product	Lite	Pro
DayPilot for JavaScript
DayPilot for ASP.NET WebForms
DayPilot for ASP.NET MVC
DayPilot for Java