FCIO (FullCalendarIO)

Properties

AllDaySlot: boolean

Default: false

Determines if the “all-day” slot is displayed at the top of the calendar. When hidden with false, all-day events will not be displayed in agenda views.

CalendarHeight: integer

Default: 750

Sets the height of the entire calendar, including header and footer.

DefaultView: string

Default: month

The initial view when the calendar loads. A name of any of the available views.

Droppable: boolean

Default: true

Determines if external jQuery UI draggables can be dropped onto the calendar.

Editable: boolean

Default: true

Determines whether the events on the calendar can be modified.

EventLimit: boolean

Default: true

Limits the number of events displayed on a day. The rest will show up in a popover. When there are too many events, a link that looks like “+2 more” is displayed.

Event properties:

 ID: integer

Integer. Optional Uniquely identifies the given event. Different instances of repeating events should all have the same ID.

Title: string

String. Required. The text on an event’s element.

AllDay: boolean

Optional. Whether an event occurs at a specific time-of-day. This property affects whether an event’s time is shown. Also, in the agenda views, determines if it is displayed in the “all-day” section.

Start: string

Default: moment()

The date/time an event begins. Required. A Moment-ish input, like an ISO8601 string.

End: string

The exclusive date/time an event ends. Optional. A Moment-ish input, like an ISO8601 string.

Color: string

Sets an event’s background and border color.

TextColor: string

Sets an event’s text color.

FirstDay: integer

Default: 0

The day that each week begins. The value must be a number that represents the day of the week. Sunday=0, Monday=1, Tuesday=2, etc.

HeaderLeft: string

Default: prev,next today

Defines the buttons and title at the top of the calendar in left side. prev button for moving the calendar back one month/week/day. next button for moving the calendar forward one month/week/day. today button for moving the calendar to the current month/week/day.

HeaderCenter: string

Default: title

Defines the buttons and title at the top of the calendar in center. title text containing the current month/week/day.

HeaderRight: string

Default: month agendaWeek agendaDay

Defines the buttons and title at the top of the calendar in right side. month displays the current month’s days. agendaWeek displays one-or-more horizontal days as well as an axis of time. agendaDay displays one horizontal day as well as an axis of time.

Locale: string

Default: en

Customize the language and localization options for the calendar.

MinTime: string

Default: 00:00:00

Determines the first time slot that will be displayed for each day. The default 00:00:00 means the start time will be at the very beginning of the day (midnight).

MaxTime: string

Default: 24:00:00

Determines the last time slot that will be displayed for each day. Specified as an exclusive end time. The default 24:00:00 means the end time will be at the very end of the day (midnight).

Navlinks: boolean

Default: true

Determines if day names and week names are clickable. When true, day headings and weekNumbers will become clickable. When clicked, these links will bring the user to a view that represents the day/week. The destination views are automatically determined by the views that are in the header.

NowIndicator: boolean

Default: true

Whether or not to display a marker indicating the current time. The indicator will automatically reposition itself while the user is viewing the calendar.

agenda view now-indicator

Selectable: boolean

Default: false

Allows a user to highlight multiple days or timeslots by clicking and dragging. To let the user make selections by clicking and dragging, this option must be set to true.

SlotDuration: string

Default: 00:30:00

The frequency for displaying time slots.

ScrollTime: string

Default: moment()

Determines how far forward the scroll pane is initially scrolled. The user will be able to scroll back to see events before this time. If you want to prevent users from doing this, use the MinTime option instead.

SlotLabelFormat: string

Determines the text that will be displayed within a time slot. The default value depends on the current Locale. The default English value will produce times that look like “5pm” and “5:30pm”.

ValidRange: string

Limits which dates the user can navigate to and where events can go. Dates outside of the valid range will be grayed-out. The user will not be able to drag or resize events into these areas. The prev/next buttons in the Header will be grayed out to prevent the user from navigating to an invalid range. The ValidRange property can have start and end properties. You may specify one without specifying the other to create an open-ended range.

{
  start: '2018-03-19',
  end: '2018-10-19'
}

WeekNumbers: boolean

Default: true

Determines if week numbers should be displayed on the calendar. If set to true, week numbers will be displayed in a separate left column in the month/basic views as well as at the top-left corner of the agenda views.

Try It