html5 javascript calendar work week

In this mode, the event calendar component shows a work week.

The first visible day is the previous Monday calculated from the startDate property value. The days value is ignored - the calendar always displays 5 days.

JavaScript Calendar

To enable the work week in the calendar, set the viewType property to "WorkWeek". By default, the calendar will display 5 days, starting with the past Monday. To change the initial work week, use the startDate property.

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

<script type="text/javascript">
  var dp = new DayPilot.Calendar("dp");
  dp.viewType = "WorkWeek";
  dp.startDate =;
  // ...

Angular Calendar

In the Angular Calendar component, use the viewType and startDate properties of the config object to use the work week calendar mode.

import {Component} from "@angular/core";
import {DayPilot, DayPilotCalendarComponent} from "daypilot-pro-angular";

  selector: 'calendar-component',
  template: `<daypilot-calendar [config]="config"></daypilot-calendar>`,
  styles: [``]
export class CalendarComponent implements AfterViewInit {

  config: DayPilot.CalendarConfig = {
    viewType: "WorkWeek",

  // ...


React Calendar

In the React Calendar component, use the viewType and startDate attributes of the <DayPilotCalendar> tag to activate the work week calendar view.

import React, {Component} from 'react';
import {DayPilot, DayPilotCalendar} from "daypilot-pro-react";

class Calendar extends Component {

  constructor(props) {
    this.state = {};

  render() {
    return (

export default Calendar;

ASP.NET WebForms

<DayPilot:DayPilotCalendar runat="server" ID="DayPilotCalendar1"


MVC View

@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig { 

  // ...
  ViewType = ViewType.WorkWeek,
  // ...