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