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
Angular
Tutorial:
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"; }