Q4Widgets API Documentation

q4.calendar

*

Latest Version Update: 1.3.6 Added scope="col" to "module-event-calendar_day module-event-calendar_day--name *

Latest Version Update: 1.3.4 
- icons used now have aria-hidden
- applied consistent templates to be used through all themes
- daysOfTheWeek is now an array of objects to support both short and full day of the week
- removed event body from default template, can be added when needed
Script link
q4.calendar.1.3.6.min.js
Source file
q4.calendar.js, line 2
Requires

Examples

$('.module-event-calendar_calendar-container').calendar({
     triggerEventsLoad: false
});

Options

popupCls string
Events popup class container
dateFormat string
Uses the moment.js plugin refer to http://momentjs.com/docs/#/displaying/ for formats
Default value
MMMM D, YYYY
languageId interger
A number representing which language to pull data from
url string
A URL to a Q4 hosted website. This is only required if `usePublic` is true.
eventSelection number
Declare what kind of events should be pulled from the Events API.
Default value
3
Parameters
eventSelection: number
0 - Past events
eventSelection: number
1 - Future events
eventSelection: number
3 - All events
excludeSelection boolean
If set to true, only content that does not have the 'Exclude from latest' checkbox checked in the CMS will be shown.
Default value
false
showPastOnLoad boolean
If true, will load past events in the popup if there are no future or tagged events
Default value
false
news boolean
Include the related News
Default value
true
presentations boolean
Include the related Presentations(s)
Default value
true
financials boolean
Include the related Financial Report.
Default value
true
slideshare string
Can be set to a SlideShare username. This will add SlideShare presentations as events.
triggerEventsLoad boolean
Trigger the onEventsLoad callback This will default to loading an event vs using the splash screen
Default value
false
defaultTag string
If `triggerEventsLoad` is true and a `defaultTag` is set, the first event with the set tag will be displayed on load
eventTemplates
Templates for the indivudal sections support by event.
Parameters
eventTemplates object
-
location string
Display the event location
speakers string
List each speaker
body string
Display the event body
webcast string
Link to webcast
news string
Link to Press Release
docs string
Attach related document(s)
presentations string
Attach related presentation
financials string
Attach financials
addToCal string
Add to calendar
event function
generate the markup for individual events.
Example
eventTemplates : {
    location: '{{#location}}<div class="module_location"><span class="module_location-text">{{location}}</span></div>{{/location}}'
}
onEventsLoad function
A callback fired after events are loaded.
Parameters
calendar Object
DOM element, can be used with methods such as .addEvents()
events Array
An array containing all events
Example
To use an event instead of a splash screen
onSlideShareLoad function
A callback fired after SlideShare has loaded.
Parameters
calendar Object
DOM element, can be used with methods such as .addEvents()
events Array
An array containing slideshare data
complete function
A callback fired after the widget and events have loaded.
Parameters
event Event
The event object.
onCalendarRender function
A callback when the calendar is done rendering. This function will be ran after the accessibility script and should be used instead of calendar.doneRendering to preserve the accessibility updates.
Parameters
event Event
The event object.
eventSize number
The maximum number of events to add to the calendar.
Default value
25
tags Array.<string>
An array of tags used to filter events.
calendar object
An options object to pass directly to the CLNDR.js instance. See that module's documentation for details. http://kylestetz.github.io/CLNDR/
Example
{
    adjacentDaysChangeMonth: true,
    daysOfTheWeek: ['Su','Mo','Tu','We','Th','Fr','Sa'],
    showAdjacentMonths: false,
    weekOffset: 1,
    doneRendering: function () {
        console.log('done rendering')
    },
    ready: function () {
        console.log('calendar is ready')
    }
}