Calendar

Try It

This shortcode has been elminated and replaced with a newer one. This page is yet to be updated but will be shortly.

Class Reference

FCIO.Calendar inherits from Control

Properties

AllDaySlot

Type: Bool
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

Type: Float
Default: 750

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

DefaultView

Type: String
Default: month

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

Droppable

Type: Bool
Default: true

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

Editable

Type: Bool
Default: true

Determines whether the events on the calendar can be modified.

EventLimit

Type: Bool
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.

Events[]

FirstDay

Type: Int
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.

HeaderCenter

Type: String
Default: title

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

HeaderLeft

Type: 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.

HeaderRight

Type: 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

Type: String
Default: en

Customize the language and localization options for the calendar.

MaxTime

Type: 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).

MinTime

Type: 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).

NavLinks

Type: Bool
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

Type: Bool
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.

ScrollTime

Type: String
Default: ''

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.

Selectable

Type: Bool
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

Type: String
Default: 00:30:00

The frequency for displaying time slots.

SlotLabelFormat

Type: String
Default: ''

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

Type: String
Default: null

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. <pre>{ start: &quot;2018-03-19&quot;, end: &quot;2018-10-19&quot; }</pre>

WeekNumbers

Type: Bool
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.

Events