event-calendar-html5-next-previous.png

ASP.NET WebForms

.aspx

<div class="space">
    Week:
    <a href="javascript:dpc.commandCallBack("previous");">Previous</a>
    |
    <a href="javascript:dpc.commandCallBack("next");">Next</a>
</div>

<daypilot:daypilotcalendar 
  id="DayPilotCalendar1" 
  runat="server" 
  datastartfield="start" 
  dataendfield="end" 
  datatextfield="name" 
  datavaluefield="id" 

  ClientObjectName="dpc"
  ViewType="Week" 
  OnCommand="DayPilotCalendar1_Command" 
  ...
  ></daypilot:daypilotcalendar>

.aspx.cs

protected void DayPilotCalendar1_Command(object sender, CommandEventArgs e)
{
  switch (e.Command)
  {
      case "previous":
          DayPilotCalendar1.StartDate = DayPilotCalendar1.StartDate.AddDays(-7);
          DayPilotCalendar1.DataBind();
          break;
      case "next":
          DayPilotCalendar1.StartDate = DayPilotCalendar1.StartDate.AddDays(7);
          DayPilotCalendar1.DataBind();
          break;
  }
}

ASP.NET MVC

MVC View

<div class="space">
    Week:
    <a href="javascript:dpc.commandCallBack("previous");">Previous</a>
    |
    <a href="javascript:dpc.commandCallBack("next");">Next</a>
</div>

@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig
 {
     ViewType = DayPilot.Web.Mvc.Enums.Calendar.ViewType.Week,
     BackendUrl = ResolveUrl("~/Calendar/Backend"),
     ...
  })

MVC Controller (Dpc class)

protected override void OnCommand(CommandArgs e)
{
  switch (e.Command)
  {
    case "previous":
      StartDate = StartDate.AddDays(-7);
      Update(CallBackUpdateType.Full);
      break;
    case "next":
      StartDate = StartDate.AddDays(7);
      Update(CallBackUpdateType.Full);
      break;
  }
}

protected override void OnFinish()
{
  // only load the data if an update was requested by an Update() call
  if (UpdateType == CallBackUpdateType.None)
  {
      return;
  }

  Events = new EventManager(Controller).Data.AsEnumerable();

  DataStartField = "start";
  DataEndField = "end";
  DataTextField = "text";
  DataIdField = "id";
}

JavaScript

<div class="space">
    Week:
    <a href="javascript:dp.startDate = dp.startDate.addDays(-7); dp.update();">Previous</a>
    |
    <a href="javascript:dp.startDate = dp.startDate.addDays(7); dp.update();">Next</a>
</div>

<div id="dp"></div>

<script type="text/javascript">
    var dp = new DayPilot.Calendar("dp");
    dp.viewType = "Week";
    // ...
    dp.init();
</script>