Date Picker

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

JavaScript

<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

Angular

Tutorial:

• Angular Scheduler: Date Navigation

ASP.NET WebForms

.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";
}