event calendar html5 navigator

JavaScript 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 = "week";
    nav.onTimeRangeSelected = function(args) {
        dp.startDate = args.start;
        // load events
        dp.update();
    };
    // ...
    nav.init();
    
    var dp = new DayPilot.Calendar("dp");
    dp.viewType = "Week";
    // ...
    dp.init();
</script>

Demo

Angular Calendar

angular event calendar scheduler component

Angular Tutorials

React Calendar

React Tutorials

ASP.NET WebForms

.aspx

<DayPilot:DayPilotNavigator ID="DayPilotNavigator1" runat="server" 
  BoundDayPilotID="DayPilotCalendar1" 
  SelectMode="Week"
  ...
  ></DayPilot:DayPilotNavigator>

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

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

.aspx.cs

protected void DayPilotCalendar1_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

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

ASP.NET MVC

MVC View

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

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