Days View

This mode shows a custom number of (consecutive) days.

It lets you show a date range shorter than one week (e.g. Monday to Thursday) or a large number of days (14 days or a full month). When displaying a large number of days, you may want to use the fixed column width mode.

JavaScript Calendar

To display a custom number of consecutive days, set the viewType property to "Days" and specify the required number of days using days property. The first day to be displayed can be set using startDate property.

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

<script type="text/javascript">
  var dp = new DayPilot.Calendar("dp");
  dp.viewType = "Days";
  dp.days = 4;
  dp.startDate = DayPilot.Date.today();
  // ...
  dp.init();
</script>

Angular Calendar

In the Angular Calendar component, use the viewType, days and startDate properties of the config object to display a custom number of days.

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: "Day",
    days: 14,
    startDate: DayPilot.Date.today().addDays(-1)
  };

  // ...

}

React Calendar

In the React Calendar component, you can use the viewType, days and startDate attributes of the <DayPilotCalendar> tag to switch to a view with custom days.

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={"Day"}
          startDate={DayPilot.Date.today()}
        />
      </div>
    );
  }
}

export default Calendar;

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

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

  // ...
  ViewType = ViewType.Days,
  Days = 4,
  // ...
	
})