calendar-allday-new600x66.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.

Styling (!CssOnly Mode)

Independent font properties:

  • AllDayEventFontColor
  • AllDayEventFontFamily
  • AllDayEventFontSize

These properties are ignored in CssOnly mode.

Showing the time (!CssOnly Mode)

The ShowAllDayEventStartEnd property lets you specify whether the start and end time should be visible in the event box.

  • Default value is "true".
  • The "~" character indicating the the event spans to another day is always visible.

This property ais ignored in CssOnly mode.

CSS

All-day events can be styled using CSS.

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

  }
}

JavaScript

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

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