javascript scheduler next previous buttons

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