DayPilot.Calendar.width

The width property (string) sets the width of the JavaScript Calendar component using a CSS width value.

Declaration

DayPilot.Calendar.width

Default Value

null

Notes

When set to null, the calendar uses the default display: block behavior of the host <div> element and fills the available width.

Use a fixed width such as "800px" or a responsive value such as "70%" when the calendar should not automatically expand to the full container width.

Examples

JavaScript

const calendar = new DayPilot.Calendar("dp", {
  width: "70%",
  // ...
});
calendar.init();

Angular

<daypilot-calendar [config]="config"></daypilot-calendar>

config: DayPilot.CalendarConfig = {
  width: "70%",
  // ...
};

React

<DayPilotCalendar
  width={"70%"}
  {/* ... */}
/>

Vue

<DayPilotCalendar
  :width="'70%'"
  <!-- ... -->
/>

See Also

Responsive Column Width [doc.daypilot.org]

Width [doc.daypilot.org]

DayPilot.Calendar Class