data:calendar
AJAX
ajax:delayedload ajax:event ajax:navigation ajax:region
Data
data:calendar
ATTRIBUTES
EXAMPLES
data:column data:eventrepeater data:postrepeater data:productbrandrepeater data:productcategoryrepeater data:productrepeater data:repeater data:table data:template data:tree
Forms
forms:address forms:captcha forms:checkbox forms:checkboxgroup forms:codeeditor forms:combobox forms:datepicker forms:dialogbox forms:editbox forms:fileupload forms:form forms:hidden forms:money forms:officeuseregion forms:option forms:password forms:paymentmethod forms:radiobutton forms:radiobuttongroup forms:row forms:searchbox forms:signature forms:slider forms:spinbox forms:submitbutton forms:submitimage forms:submitlink forms:successcontent forms:textarea forms:timepicker
Layout
layout:gallery layout:productgallery layout:rotator layout:stepper layout:stepperpanel layout:tablist layout:tablistitem
Logic
logic:dependency logic:else logic:if logic:include logic:parse logic:variable
Navigation
navigation:breadcrumbs navigation:item navigation:primary navigation:secondary
Personalisation
personalisation:firstname personalisation:fullname personalisation:lastname personalisation:other
Standard
standard:audio standard:embed standard:icon standard:image standard:link standard:script standard:tooltip standard:video
Templates
templates:button templates:card templates:column templates:fancybox templates:faq templates:flexlayout templates:header templates:row templates:section templates:styles templates:teammember templates:testimonial
Regions
regions:content regions:contentadditional regions:security regions:togglable
Third Party
thirdparty:googlemap thirdparty:googlemapmarker

<data:calendar> </...>

Creates a FullCalendar widget which can be used for displaying events over a period of time.

Related Tutorials

Content

any
The content inside the Calendar tag serves as a template for what is displayed inside each tile of the calendar.

Attributes

agendaAllDaySlot
bool
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.
allDayColumn
bool
The column from the DataSource which defines if the event is shown in the “all-day” section.
If true the time text is not displayed with the event.
as
string
The name of the variable to be registered for each row. For example, as="myvar" will let you reference $myvar inside the control.
dataFilter
array
A Filter Array, if datasource is a function that supports a Query Array.
displayEventTime
bool
Whether or not to display the text for an event’s date/time.
endDateColumn
string
The column from the DataSource which defines the end dates of the events
eventDidMount
string
JS event 'eventDidMount'
eventRender
string
JS event 'eventRender'
headerButtons
string
Sets the header buttons on the right

'timeGridDay,timeGridWeek,listMonth'
height
string
Height

Sets the height of the element. The default units are pixels. include the percentage symbol % to user percentage values.
id
string
(Required) Give this control a unique id. Can be accessed in the client DOM (eg, document.getElementById('myid') or in the server DOM using [? $myid ?] or [? $('myid') ?]).
initialView
string
The initial view when the calendar loads

Default value = dayGridMonth.

Possible values:

dayGridMonth,dayGridWeek,dayGridDay

timeGridWeek,timeGridDay

listYear,listMonth,listWeek,listDay
locale
array
Locale
noControls
bool
Whether or not to show controls to change the date shown of the calendar
onEventDrop
string
JS event 'EventDrop'
onEventResize
string
JS event 'EventResize'
resourceTitle
string
Full calendar resource title
resources
string
Full calendar resource data
slotMaxTime
int
Determines the first hour/time that will be displayed, even when the scrollbars have been scrolled all the way up.

This can be a number like 22 (which means 10pm), a string like '22:30' (which means 10:30pm) or a string like '10:30pm'.
slotMinTime
int
Determines the first hour/time that will be displayed, even when the scrollbars have been scrolled all the way up.

This can be a number like 5 (which means 5am), a string like '5:30' (which means 5:30am) or a string like '5:30am'.
startDateColumn
string
The column from the DataSource which defines the start dates of the events
uRLColumn
string
The column from the DataSource which defines an on click URL
width
string
Width

Sets the width of the element. The default units are pixels. include the percentage symbol % to user percentage values.

Tutorials

Examples

Static Calendar

A calendar that populates events from values in an array

HTML:

<data:calendar id="static_calendar" datasource="renderEvents()" as="event" urlcolumn="url" startdatecolumn="startdate" alldaycolumn="allday" enddatecolumn="enddate" useajax="true"> [? $event['title'] ?] </data:calendar>

PHP:

<?php function renderEvents() { $events = [ [ 'title' => 'Team Building', 'startdate' => '2023-03-25T04:00:00', 'enddate' => '2023-03-26T03:00:00', 'url' => '//oncord.com', 'allday' => true, ], [ 'title' => 'Training Client 1', 'startdate' => '2023-03-12T05:00:00', 'enddate' => '2023-03-12T08:00:00', ], [ 'title' => 'Client Zoom Meeting', 'startdate' => '2023-03-12T01:30:00', 'enddate' => '2023-03-12T02:00:00', ], ]; return $events; } ?>

Run Example

Linking with Components

Provide admin users with control over calendar content by populating data dynamically, using Posts or other components. Refer to the the Components API for function calls and field names.

HTML:

<data:calendar id="calendar" datasource="\Components\Website\Posts::getAll()" as="post" urlcolumn="post_content_url" startdatecolumn="post_date" useajax="true"> [? $post['post_title'] ?] </data:calendar>