<data:calendar>
AJAX
ajax:delayedload ajax:event ajax:navigation ajax:region
Data
data:calendar
DESCRIPTION
ATTRIBUTES
agendaAllDaySlot
allDayColumn
as
dataFilter
displayEventTime
endDateColumn
eventDidMount
eventRender
headerButtons
height
id
initialView
locale
noControls
onEventDrop
onEventResize
resourceTitle
resources
slotMaxTime
slotMinTime
startDateColumn
uRLColumn
width
EXAMPLES
Static Calendar
Linking with Components
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:divider 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: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

This article explains how to display your Events on a calendar view within your website. The calendar will automatically show all events created in the Events module, organised by date.

Source Code

You can add the calendar to a new or existing page. In the page editor, click Source in the left panel, then paste the following HTML in the HTML section:

<data:calendar id="calendar" datasource="\Components\Marketing\Events::getAll()" as="event" startdatecolumn="event_start_datetime" urlcolumn="event_content_url" enddatecolumn="event_end_datetime" initialview="dayGridMonth"> <a href="[? $event['event_url'] ?]"> [? $event['event_title'] ?] </a> </data:calendar>

Design Examples

To enhance the layout and improve usability, paste the following into your page’s CSS tab:

  • CSS Styling
  • Preview

Layout 2

Designed with a minimalist style to highlight the events occurring in a given month, and if applicable, a photo thumbnail will be included for visual representation.

  • Markup
  • CSS Styling
  • Preview

Layout 3

This calendar is ideal for events that have additional descriptions. A popup will appear to display further information by hovering over each event.

  • Markup
  • CSS Styling
  • Preview


Note: The appearance of the calendar may vary depending on your website’s existing CSS. You may need to adjust or tweak the provided styles to match your website’s design.

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

Populates a calendar with Event components. Refer to the Components API for function calls and field names.

HTML:

 <data:calendar id="calendar" datasource="\Components\Marketing\Events::getAll()" as="event" startdatecolumn="event_start_datetime" urlcolumn="event_content_url" enddatecolumn="event_end_datetime" initialview="dayGridMonth"> <a href="/community/event-rsvp/?event_id=[? $event['event_id'] ?]"> [? $event['event_title'] ?] </a> </data:calendar>