Next and Previous Buttons

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:

• Angular Scheduler: Next/Previous Buttons

React

Tutorial:

• React Scheduler: Next/Previous Buttons

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