Q4Widgets API Documentation

q4.events

Fetches and displays events from the Q4 API's.
Below is an example of a past events widget.
- It uses date and time, which requires the useMoment option to be true and the Moment.js library to be referenced on the page.
- Since it is a past events widget, showFuture is set to false.
- Events can pull in "related" content from the following API's: Presentations, Press Releases and Financial Reports. Template variables for related content are inherited from their respective widget. For example, one can use press releases shortBody variable in the events widget template for related press releases.
- Based on the template configuration, the widget will only show related files such as presentations or webcasts if they exist for that event.
Script link
q4.api.1.13.6.min.js
Source file
q4.api.js, line 1703

This widget extends the q4.api widget. It has all the options and methods of the parent widget, in addition to those below. See the parent widget's documentation for details.

Examples

<div class="module_container module_container--widget">
    <div class="module_options">
        <label class="module_options-label" for="eventArchiveYear">Select Year: </label>
        <select class="dropdown module_options-select" id="eventArchiveYear"></select>
    </div>
    <div class="module_container module_container--content"></div>
</div>
<script>
$('.module-event-archive .module_container--widget').events({
    dateFormat: {
        date: 'MMMM D, YYYY',
        time: 'hh:mm A'
    },
    useMoment: true,
    showFuture: false,
    yearSelect: '.module_options-select',
    yearContainer: '.module_options-select',
    yearTemplate: '<option value="{{value}}">{{year}}</option>',
    itemContainer: '.module_container--content',
    itemTemplate: (
        '<div class="module_item">' +
            '<div class="module_date-time">' +
                '<span class="module_date-text">{{date.date}}</span> <span class="module_time-text">{{date.time}} {{timeZone}}</span>' +
            '</div>' +
            '<div class="module_headline">' +
                '<a class="module_headline-link" href="{{url}}">{{title}}</a>' +
            '</div>' +
            '{{#location}}' +
                '<div class="module_location">' +
                    '<span class="module_location-text">{{location}}</span>' +
                '</div>' +
            '{{/location}}' +
            '{{#speakers.length}}' +
                '<div class="module_speakers list--reset">' +
                    '<h4>Speaker(s):</h4>' +
                    '<ul>' +
                        '{{#speakers}}' +
                            '<li class="module_speaker">' +
                                '<i class="q4-icon_user-fill"></i> ' +
                                '{{name}}, {{position}}' +
                            '</li> ' +
                        '{{/speakers}}' +
                    '</ul>' +
                '</div>' +
            '{{/speakers.length}}' +
            '<div class="module_links module_q4-icon-links list--reset">' +
                '{{#webcast}}' +
                    '<div class="module_webcast"><a href="{{webcast}}" target="_blank" class="module_link module_webcast-link">Webcast <span class="sr-only">(opens in new window)</span></a></div>' +
                '{{/webcast}}' +
                '{{#presentations}}' +
                    '<div class="module_presentation"><a href="{{docUrl}}" target="_blank" class="module_link module_presentation-link">View this Presentation <span class="sr-only">(opens in new window)</span></a></div>' +
                '{{/presentations}}' +
                '{{#pressReleases}}' +
                    '<div class="module_news"><a href="{{url}}" target="_blank" class="module_link module_news-link">Press Release <span class="sr-only">(opens in new window)</span></a></div>' +
                '{{/pressReleases}}' +
                '<ul class="module_attachments">' +
                    '{{#docs}}' +
                        '<li class="module_attachment {{type}}">' +
                            '<a href="{{url}}" target="_blank" class="module_link module_attachment-link">{{title}} <span class="sr-only">(opens in new window)</span></a>' +
                        '</li>' +
                    '{{/docs}}' +
                '</ul>' +
                '{{#financialReports}}' +
                    '<ul class="module_financials">' +
                        '{{#docs}}' +
                            '<li>' +
                                '<a href="{{docUrl}}" target="_blank" class="module_link module_financial-link {{docCategory}}"> {{docTitle}} <span class="sr-only">(opens in new window)</span></a>' +
                            '</li>' +
                        '{{/docs}}' +
                    '</ul>' +
                '{{/financialReports}}' +
            '</div>' +
        '</div>'
    )
});
</script>

Options

showFuture boolean
Whether to fetch events dated in the future.
Default value
true
showPast boolean
Whether to fetch events dated in the past.
Default value
true
template string
  • All the notes documented in the q4.api parent widget are applicable here.
  • This widget supports template, itemTemplate and yearTemplate options.
The template or itemTemplate may contain the following mustache variables:
  • {{title}} - The title of the event item.
  • {{url}} - The URL of the event details page.
  • {{id}} - The event ID, used for constructing calendar links.
  • {{date}} - The starting date of the event.
  • {{endDate}} - The ending date of the event.
  • {{timeZone}} - The timezone of the start/end dates.
  • {{location}} - The URL of the document's thumbnail image.
  • {{webcast}} -
  • {{body}} -
  • {{#isFuture}} - An alternative to the showFuture widget option. Using this in the template will allow you to define a unique template events in the future, without affecting other events in the array. To use, wrap {{#isFuture}} around other template variables and close with {{/isFuture}}
  • {{#isPast}} - An alternative to the showPast widget option. Using this in the template will allow you to define a unique template events in the past, without affecting other events in the array. To use, wrap {{#isPast}} around other template variables and close with {{/isPast}}
  • {{#speakers}} - An array of the event's speakers. Inner variables are:
    • {{name}} - The speaker's name.
    • {{position}} - The speaker's position or job title.
  • {{#tags}} - An array of tags for this event item.
    • {{.}} - Tag word.
  • {{#docs}} - An array of attached documents. Inner variables for each document are:
    • {{title}} - The title of the attachment
    • {{url}} - The URL of the attachment
    • {{type}} - The type/category of attachment (ex. Document, Presentation, Video, Audio)
    • {{extension}} - The file extension for the attachment
    • {{size}} - The speaker's position or job title.
  • {{#financialReports}} - An array of related financial reports.
  • {{#pressReleases}} - An array of related press releases.
  • {{#presentations}} - An array of related presentations.