html5-weekly-calendar-all-day-events.png

All day events are displayed in a special row that is inserted between the column headers and the main scrolling area.

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

Limitations

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

Appearance

Use AllDayEventHeight property to set the height of the all-day event box in pixels.

CSS

All-day events can be styled using CSS.

JavaScript

Enable all-day events:

dp.showAllDayEvents = true;

Mark events as all-day:

{
    start: new DayPilot.Date("2018-03-25T00:00:00"),
    end: new DayPilot.Date("2018-03-27T00:00:00"),
    id: DayPilot.guid(),
    text: "All-Day Event",
    allday: true
}

Example:

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

<script type="text/javascript">
  var dp = new DayPilot.Calendar("dp");
  dp.showAllDayEvents = true;
  dp.events.list = [{
    start: new DayPilot.Date("2018-03-25T00:00:00"),
    end: new DayPilot.Date("2018-03-27T00:00:00"),
    id: DayPilot.guid(),
    text: "All-Day Event",
    allday: true
  }];
  // ...
  dp.init();
</script>

ASP.NET WebForms

Loading all-day events

Specify DataAllDayField property: The data source column that contains true for all-day events.

  • The following values are recognized as true (case insensitive): "1", "true", "t", "yes", "y".
  • The following values are recognized as false (case insensitive): "0", "false", "f", "no", "n".

Storing start and end dates

The AllDayEnd property lets you specify whether the start and end date in all-day events use date only or full date and time information.

AllDayEnd="Date"

Use the date part only.

This is how a one-day all-day event would be stored:

  • start=2007-01-01
  • end=2007-01-01

AllDayEnd="DateTime"

Use the exact date time value.

This is how a one-day all-day event would be stored:

  • start=2007-01-01T00:00:00
  • end=2007-01-02T00:00:00

See also:

Example

.aspx

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

ASP.NET MVC

Loading all-day events

Specify DataAllDayField property: The data source column that contains true for all-day events.

  • The following values are recognized as true (case insensitive): "1", "true", "t", "yes", "y".
  • The following values are recognized as false (case insensitive): "0", "false", "f", "no", "n".

Example

MVC View

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

MVC Controller

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";

  }
}