html5 event calendar weeks view

The weeks view mode allows to specify the first week (using StartDate property) and the number of weeks to be displayed (Weeks property).

ASP.NET WebForms

.aspx

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

<DayPilot:DayPilotMonth 
  ID="DayPilotMonth1" 
  runat="server" 
  ...
  ViewType="Weeks"
  Weeks="3" 
  OnBeforeCellRender="DayPilotMonth1_BeforeCellRender"
  />

C#

protected void Page_Load(object sender, EventArgs e)
{
  if (!IsPostBack)
  {
      DayPilotMonth1.StartDate = DateTime.Today.AddDays(-7);
      // ...
  }
}

protected void DayPilotMonth1_Command(object sender, CommandEventArgs e)
{
  switch (e.Command)
  {
      case "navigate":
          // display previous and following week as well
          DateTime start = (DateTime) e.Data["start"];
          DateTime previous = start.AddDays(-7);

          DayPilotMonth1.StartDate = previous;
          // ...
          break;
  }
}

protected void DayPilotMonth1_BeforeCellRender(object sender, DayPilot.Web.Ui.Events.Month.BeforeCellRenderEventArgs e)
{
  // use lighter colors for the other than selected weeks
  if (!isThisWeek(e.Start))
  {
      e.BackgroundColor = isWeekend(e.Start) ? "#fff8d1" : "#ffffe9";
  } 
}

private bool isThisWeek(DateTime d)
{
  DateTime first = Week.FirstDayOfWeek(DayPilotMonth1.StartDate.AddDays(7), DayPilotMonth1.ResolvedWeekStart);
  DateTime last = first.AddDays(7);

  return first <= d && d < last;
}

private bool isWeekend(DateTime d)
{
  return d.DayOfWeek == DayOfWeek.Sunday || d.DayOfWeek == DayOfWeek.Saturday;
}

Demo

ASP.NET MVC

@Html.DayPilotMonth("dpm", new DayPilotMonthConfig {
  BackendUrl = ResolveUrl("~/Month/Backend"),
  EventMoveHandling = EventMoveHandlingType.CallBack,
  EventResizeHandling = EventResizeHandlingType.CallBack,
  TimeRangeSelectedHandling = TimeRangeSelectedHandlingType.CallBack,

  ViewType = ViewTypeEnum.Weeks,
  Weeks = 1
  
})

Demo

JavaScript

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

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

Demo