Work Week View

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 = DayPilot.Date.today();
  // ...
  dp.init();
</script>

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

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

  config: DayPilot.CalendarConfig = {
    viewType: "WorkWeek",
    startDate: DayPilot.Date.today()
  };

  // ...

}

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) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <div>
        <DayPilotCalendar
          viewType={"WorkWeek"}
          startDate={DayPilot.Date.today()}
        />
      </div>
    );
  }
}

export default Calendar;

<DayPilot:DayPilotCalendar runat="server" ID="DayPilotCalendar1"
  ViewType="WorkWeek"
  ...
/>

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

  // ...
  ViewType = ViewType.WorkWeek,
  // ...
	
})