All-Day Events

The calendar component displays all day events in a special row that is inserted between the column headers and the main calendar grid.

All-day events have to be enabled using showAllDayEvents property.

The calendar can display all-day events in the resource calendar mode as well. In the resources view, an all-day event cannot span more than one column.

All-day events are only supported in the Pro version.

Appearance

You can use the  allDayEventHeight property to set the height of the all-day event box in pixels.

CSS

All-day events can be styled using CSS.

Date Handling

By default, the Calendar uses exact time points for date/time values. The following all-day event will take one day:

{
    start: "2023-05-01T00:00:00",
    end: "2023-05-02T00:00:00",
    id: 3,
    text: "One-day event",
    allday: true
}

It is also possible to use date-only values for the the end value. If you set allDayEnd to "Date" the following all-day events will take two days:

{
    start: "2023-05-01T00:00:00",
    end: "2023-05-02T00:00:00",
    id: 3,
    text: "Two-day event",
    allday: true
}

Limitations

• All-day events cannot be moved.
• All-day events cannot be resized.
• All-day events cannot be selected.

It is possible to make all-day events draggable to the main calendar grid (to a specific time slot) - see the following tutorial:

• JavaScript Calendar: Drag All-Day Events to a Specific Time of Day

JavaScript Calendar

To enable all-day events in the JavaScript Calendar component, use showAllDayEvents property:

dp.showAllDayEvents = true;

To mark a calendar event all-day, add allday: true to the event data object:

{
    start: "2023-03-25T00:00:00",
    end: "2023-03-27T00:00:00",
    id: 5,
    text: "All-Day Event",
    allday: true
}

Example:

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

<script>
  const dp = new DayPilot.Calendar("dp", {
    showAllDayEvents: true,
    // ...
  });
  dp.init();

  // ...

  const events = [
    {
      start: "2023-04-02T00:00:00",
      end: "2023-04-05T00:00:00",
      id: 5,
      text: "All-Day Event",
      allday: true
    }
  ];
  dp.update({events});
</script>

Angular Calendar

In the Angular Calendar component, you can enable all-day events by adding the showAllDayEvents property to the config object.

This example uses allDayEnd: "Date" which interprets the event end as a date-only value (end of the specified day).

import {Component, ViewChild, AfterViewInit} from "@angular/core";
import {DayPilot, DayPilotCalendarComponent} from "daypilot-pro-angular";

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

  @ViewChild("calendar")
  calendar!: DayPilotCalendarComponent;

  config: DayPilot.CalendarConfig = {
    viewType: "Week",
    showAllDayEvents: true,
    allDayEnd: "Date",
    // ...
  };

  constructor(private ds: DataService) {
  }

  ngAfterViewInit(): void {
    const events = [
      {
        start: "2023-03-01T00:00:00",
        end: "2023-03-01T00:00:00",
        id: 1,
        text: "All-Day Event",
        allday: true
      }      
    ];
    this.calendar.control.update({events});
  }
}

React Calendar

To display all-day events in the React Calendar component, add showAllDayEvents={true} to the <DayPilotCalendar> tag in JSX:

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

class Calendar extends Component {

  constructor(props) {
    super(props);    
    this.calendarRef = React.createRef();
  }
  
  get calendar() {
    return this.calendarRef.current.control;
  }

  componentDidMount() {
  
    const events = [
      {
        start: "2023-02-01T00:00:00",
        end: "2023-02-01T00:00:00",
        id: 2,
        text: "All-Day Event 2",
        allday: true
      }    
    ];

    this.calendar.update({events});

  }

  render() {
    return (
      <div>
        <DayPilotCalendar
          viewType={"Week"}
          showAllDayEvents={true}
          allDayEnd={"Date"}          
          
          ref={this.calendarRef}
        />
      </div>
    );
  }
}

export default Calendar;

Vue Calendar

The Vue Calendar will display all-day events if you add showAllDayEvents: true to the config object (specified using :config attribute of <DayPilotCalendar> tag):

<template>
  <DayPilotCalendar id="dp" :config="config" ref="calendar" />
</template>

<script>
import {DayPilot, DayPilotCalendar} from 'daypilot-pro-vue'

export default {
  name: 'Calendar',
  data: function() {
    return {
      config: {
        viewType: "Week",
        showAllDayEvents: true,
        allDayEnd: "Date",
        // ...
      },
    }
  },
  props: {
  },
  components: {
    DayPilotCalendar
  },
  computed: {
    calendar: function () {
      return this.$refs.calendar.control;
    }
  },

  mounted: function() {

    const events = [
      {
        start: "2023-01-01T00:00:00",
        end: "2023-01-01T00:00:00",
        id: 3,
        text: "All-Day Event 3",
        allday: true
      }    
    ];

    this.calendar.update({events});
  }
}
</script>

<daypilot:daypilotcalendar id="DayPilotCalendar1" runat="server" 
  DataStartField="start" 
  DataEndField="end" 
  DataTextField="name" 
  DataValueField="id" 
  DataAllDayField="allday"
  
  ShowAllDayEvents="True"
  AllDayEventHeight="25"
  ...
  />

@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig
{
  BackendUrl = ResolveUrl("~/Calendar/Backend"),
  ShowAllDayEvents = true,
  AllDayEventHeight = 25,
  ...
})

public class Dpc : DayPilotCalendar
{
  protected override void OnInit(InitArgs initArgs)
  {
      UpdateWithMessage("Welcome!", CallBackUpdateType.Full);
  }

  protected override void OnFinish()
  {
      // only load the data if an update was requested by an Update() call
      if (UpdateType == CallBackUpdateType.None)
      {
          return;
      }

      Events = new EventManager().Data.AsEnumerable();

      DataStartField = "start";
      DataEndField = "end";
      DataTextField = "text";
      DataIdField = "id";

      DataAllDayField = "allday";

  }
}