Week View

This mode shows a weekly calendar. It is the default view of the event calendar (the viewType property is set to "Week").

The event calendar automatically calculates the first day of week from the supplied startDate value using the weekStarts property (that uses the current locale by default).

The value of the days property is ignored when the calendar is switched to the week view.

JavaScript Calendar

To set the week visible using the initial calendar display, use the startDate property. 

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

<script type="text/javascript">
  var dp = new DayPilot.Calendar("dp");
  dp.viewType = "Week";
  dp.startDate = DayPilot.Date.today().addDays(7);
  // ...
  dp.init();
</script>

To change the visible week, you can use the update() method:

const current = dp.startDate;
const previous = current.addDays(-7);
dp.update({startDate: previous});

JavaScript Calendar Demo

• Weekly Calendar Demo

Angular Calendar

In the Angular Calendar component, use the startDate property of the config object to switch to visible week. Angular will detect the change and update the Calendar component automatically.

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: "Week",
    startDate: DayPilot.Date.today()
  };

  // ...

}

Angular Calendar Tutorial

The Angular Calendar: Date Switching tutorial shows how to integrate the weekly calendar with a date picker (Navigator component).

React Calendar

In the React Calendar component, use the startDate attribute of the <DayPilotCalendar> tag to set the week:

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

class Calendar extends Component {

  constructor(props) {
    super(props);
    this.state = {
      startDate: DayPilot.Date.today(),
      // ...
    };
  }

  render() {
    return (
      <div>
        <DayPilotCalendar
          viewType={"Day"}
          startDate={this.state.startDate}
        />
      </div>
    );
  }
}

export default Calendar;

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

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

  // ...
  ViewType = ViewType.Week,
  // ...
	
})