JavaScript
This example shows how to implement custom “Next”, “Previous” and “Today” buttons to change the visible date range.
The click
event handler calculates the new startDate
, and days
properties and load the event data for the new date range. Then it reloads the Scheduler using an update() call.
<a href="#" id="previous">Previous</a> |
<a href="#" id="today">Today</a> |
<a href="#" id="next">Next</a>
<div id="dp"></div>
<script>
const dp = new DayPilot.Scheduler("dp", {
// ... config
});
dp.init();
const app = {
elements: {
previous: document.getElementById("previous"),
today: document.getElementById("today"),
next: document.getElementById("next")
},
init() {
app.elements.previous.addEventListener("click", (e) => {
e.preventDefault();
app.changeDate(dp.startDate.addMonths(-1));
});
app.elements.today.addEventListener("click", (e) => {
e.preventDefault();
app.changeDate(DayPilot.Date.today());
});
app.elements.next.addEventListener("click", (e) => {
e.preventDefault();
app.changeDate(dp.startDate.addMonths(1));
});
},
changeDate(date) {
const startDate = date.firstDayOfMonth();
const days = dp.startDate.daysInMonth();
const events = [/* ... */]; // provide event data for the new date range
dp.update({
startDate,
days,
events
});
}
}
app.init();
</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;
}
}