Day View

This mode shows one day (Days property is automatically set to 1).

JavaScript Calendar

To display a single day in the JavaScript calendar component, set the viewType property value to "Day". The calendar will display the day specified using startDate property (by default it is set to today).

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

<script type="text/javascript">
  var dp = new DayPilot.Calendar("dp");
  dp.viewType = "Day";
  dp.startDate = "2022-03-25";
  // ...
  dp.init();
</script>

To change the current day when the calendar is already initialized, use the update() method:

dp.update({startDate: DayPilot.Date.today().addDays(1)});

See also manual date switching.

JavaScript Calendar Demo

• Daily JavaScript Calendar Demo

Angular Calendar

In the Angular Calendar component, use the viewType and startDate properties of the config object to switch to the daily calendar view.

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

  // ...

}

React Calendar

In the React Calendar component, use the viewType and startDate attributes of the <DayPilotCalendar> tag to activate the day 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={"Day"}
          startDate={DayPilot.Date.today()}
        />
      </div>
    );
  }
}

export default Calendar;

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

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

  // ...
  ViewType = ViewType.Day,
  // ...
	
})