monthly event calendar html5 navigator

JavaScript Monthly Calendar

<div style="float:left; width: 150px;">
    <div id="nav"></div>
</div>
<div style="margin-left: 150px;">
    <div id="dp"></div>
</div>

<script type="text/javascript">
    var nav = new DayPilot.Navigator("nav");
    nav.selectMode = "month";
    nav.onTimeRangeSelected = function(args) {
        dp.startDate = args.start;
        // load events
        dp.update();
    };
    // ...
    nav.init();
    
    var dp = new DayPilot.Month("dp");
    // ...
    dp.init();
</script>

Demo

Angular Monthly Calendar

Angular Tutorials

ASP.NET WebForms

.aspx

<DayPilot:DayPilotNavigator ID="DayPilotNavigator1" runat="server" 
  BoundDayPilotID="DayPilotMonth1" 
  SelectMode="Month"
  ...
  ></DayPilot:DayPilotNavigator>

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

  OnCommand="DayPilotMonth1_Command" 
  ...
  />

.aspx.cs

protected void DayPilotMonth1_Command(object sender, CommandEventArgs e)
{
  switch (e.Command)
  {
      case "navigate":
          DateTime start = (DateTime) e.Data["start"];
          DateTime end = (DateTime) e.Data["end"];
          DateTime day = (DateTime) e.Data["day"]; // clicked day

          DayPilotMonth1.StartDate = start;
          DayPilotMonth1.DataBind();
          DayPilotMonth1.UpdateWithMessage("Date changed. You clicked: " + day);
          break;
  }
}

ASP.NET MVC

MVC View

@Html.DayPilotNavigator("dpn", new DayPilotNavigatorConfig { 
  BoundDayPilot = "dpm",
  SelectMode = NavigatorSelectMode.Month,
  ...
  })

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

MVC Controller (Dpc class)

protected override void OnCommand(CommandArgs e)
{
  switch (e.Command)
  {
    case "navigate":
    StartDate = (DateTime) e.Data["start"];
    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";
}