monthly-event-calendar-html5-next-previous.png

ASP.NET WebForms

.aspx

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

<daypilot:daypilotmonth 
  id="DayPilotMonth1" 
  runat="server" 
  datastartfield="start" 
  dataendfield="end" 
  datatextfield="name" 
  datavaluefield="id" 

  ClientObjectName="dpm"
  OnCommand="DayPilotMonth1_Command" 
  ...
  ></daypilot:daypilotcalendar>

.aspx.cs

protected void DayPilotMonth1_Command(object sender, CommandEventArgs e)
{
  switch (e.Command)
  {
      case "previous":
          DayPilotMonth1.StartDate = DayPilotMonth1.StartDate.AddMonths(-1);
          DayPilotMonth1.DataBind();
          DayPilotMonth1.Update();
          break;
      case "next":
          DayPilotMonth1.StartDate = DayPilotMonth1.StartDate.AddMonths(1);
          DayPilotMonth1.DataBind();
          DayPilotMonth1.Update();
          break;
  }
}

ASP.NET MVC

MVC View

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

@Html.DayPilotMonth("dpm", new DayPilotMonthConfig
 {
     BackendUrl = ResolveUrl("~/Month/Backend"),
     ...
  })

MVC Controller (Dpm class)

protected override void OnCommand(CommandArgs e)
{
  switch (e.Command)
  {
    case "previous":
      StartDate = StartDate.AddMonths(-1);
      Update(CallBackUpdateType.Full);
      break;
    case "next":
      StartDate = StartDate.AddMonths(1);
      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.addMonths(-1); dp.update();">Previous</a>
    |
    <a href="javascript:dp.startDate = dp.startDate.addMonths(1); dp.update();">Next</a>
</div>

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

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