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).

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

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