JavaScript
<a href="#" id="previous">Previous</a> |
<a href="#" id="today">Today</a> | <a href="#" id="next">Next</a> <div id="dp"></div> <script> var dp = new DayPilot.Scheduler("dp"); // ... config dp.init(); var elements = { previous: document.getElementById("previous"), today: document.getElementById("today"), next: document.getElementById("next") }; elements.previous.addEventListener("click", function(e) { e.preventDefault(); changeDate(dp.startDate.addMonths(-1)); }); elements.today.addEventListener("click", function(e) { e.preventDefault(); changeDate(DayPilot.Date.today()); }); elements.next.addEventListener("click", function(e) { e.preventDefault(); changeDate(dp.startDate.addMonths(1)); }); function changeDate(date) { dp.startDate = date.firstDayOfMonth(); dp.days = dp.startDate.daysInMonth(); dp.events.list = [/* ... */]; // provide event data for the new date range dp.update(); } </script>
Angular
Tutorial:
React
Tutorial:
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; } }