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

Oncord includes a UI control for producing calendars: <data:calendar>.

Calendars are often populated by Posts, to allow admin users to more easily updating calendar content without manipulating src code.

Example One: A Post-Based Calendar

Pictured below is a post-based calendar implemented on a website. The post image, title, linked page and date are used to display an event on the calendar. Clicking on an event will redirect the user to the page linked to the post (if the post has a linked page).

Getting Started

Before coding the calendar, a new Post Category should be setup, which will be used to retrieve all Posts which will display as events.

  1. Login to the dashboard, click on the "Posts" link in the left-hand sidebar.
  2. Click the "Categories" button to view all the Post Categories currently setup.
  3. Click "New Category", it's a good idea to name the category "calendar", or "events".

FAQ - Should the calendar post category be a primary category? Or an additional category?
If posts will be created with the sole purpose of displaying in the event calendar, create a primary Post Category. Otherwise,  an additional Post Category can be used ibnstead.

Source Code

Copy the code below into the page src, updating the post category ID defined in the getAllForCategory() method, with the correct Post Category ID.

<data:calendar id="calendar" datasource="\Components\Website\Posts::getAllForCategory(3)" as="post" startdatecolumn="post_date" urlcolumn="post_content_url"> [? $post['post_title'] ?]<br /> <logic:if test="$post['post_icon']"> <standard:image hspace="2" alt="[? $post['post_title'] ?]" title="[? $post['post_title'] ?]" style="border: 1px solid rgb(187, 188, 190); position: absolute;" src="[? $post['post_icon'] ?]" width="100" /> </logic:if> </data:calendar>

Using the Calendar

To add a new event to the calendar, create a Post and assign it to the Post Category used to populate the calendar. You can alter the date of a Post by clicking the "Additional attributes" tab while editing / creating the Post.

Example Two: Advanced Calendars 

Getting started

In the previous example above, the post date was used to position the post in the calendar. In this more advanced example, the post_date will be the starting date/time of the Event.

To set the end date/time of an event, you'll need to create a Post Custom Field:

  1. Login to the dashboard, click on the "Posts" link in the left-hand sidebar.
  2. Click the "more" button then select Custom Fields.
  3. Click "New Field" to create a Post Custom Field
  4. Select Date with Time on Data Type

Source code

Add the attribute enddatecolumn="POST CUSTOM FIELD" on your calendar, replacing the post custom field with the correct field name.

<data:calendar id="calendar" datasource="\Components\Website\Posts::getAllForCategory(3)" as="post" startdatecolumn="post_date" enddatecolumn="post_event_end_date" urlcolumn="post_content_url"> [? $post['post_title'] ?]<br /> <logic:if test="$post['post_icon']"> <standard:image hspace="2" alt="[? $post['post_title'] ?]" title="[? $post['post_title'] ?]" style="border: 1px solid rgb(187, 188, 190); position: absolute;" src="[? $post['post_icon'] ?]" width="100" /> </logic:if> </data:calendar>

Design Examples

Layout 1

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 2

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

Layout 3

Use the Calendar design to display the business's availability calendar.

  • Markup
  • CSS Styling
  • Requirement
  • Preview

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>