Skip Navigation
Within Components

Calendar View

The Calendar View component shows a calendar of events of the previous month, current month and future months. The current day is highlighted in gray, days with events are highlighted in plum, any selected date is highlighted in blue, and days with no events taking place have no highlighting.

On This Page:

Related Information

Example

View on public site:

web Events

When to Use

This component is mainly used for showing upcoming events for the coming months.

Usage

Calendar View can be used to show a list of upcoming events from a list onto a page for end users to view. If authoring a Calendar View component onto an Event Detail Template, that page can then be referenced by other Calendar View components to display the same events across multiple other pages.

The Month Ahead

Legend
Date
      Current Date
Date
      Selected Date
Date
      Date with Events

The Week Ahead

Configure Dialog

The configure dialog allows the content author to define the properties of calendar.

Tab: Basic

basic

Month View Component Title – Allows for authors to specify the month view title. If left blank, the default “The Month Ahead” will be used.

Week View Component Title – Allows for authors to change the title that shows for the events in the upcoming week. If left blank, the default “The Week Ahead” will be used. By default, this option is enabled but can be disabled by unselecting the “Used in Event Detail Template?” checkbox.

Event Detail Template Path – Allows the author to specify an Event Detail Template page created to show events. By default, this option is grayed out, but can be activated by unselecting the “Used in Event Detail Template?” checkbox.

Used in Event Detail Template? – This checkbox is selected by default. Selecting this checkbox enables the “Week View Component Title” and disables the “Event Detail Template Path”. Unselecting this option will disable the “Week View Component Title” and enable the “Event Detail Template Path”.

Tab: Layout

layout

Show Calendar View – By default, this option is selected. This option dictates whether the calendar portion of the component shows or not. If unselected, only a list of events will show.

Developer Resources

<div id="calendar-month-view-1979506711" class="uscb-print-hide row">

<div class="col-lg-12 col-xs-12 uscb-padding-LR-md-0 uscb-padding-LR-0">

<div class="main-1979506711" id="dp-container">

<div id="calendarview-1979506711" style="max-width: 320px;" class="hasDatepicker"><div class="ui-datepicker-inline ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="display: block;"><div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"><a class="ui-datepicker-prev ui-corner-all" data-handler="prev" data-event="click" href="javascript:void(0)" role="button" tabindex="0" id="1979506711"><span class="ui-icon ui-icon-circle-triangle-w">Previous Month, July 2023</span></a><a class="ui-datepicker-next ui-corner-all" data-handler="next" data-event="click" href="javascript:void(0)" role="button" tabindex="0" id="1979506711"><span class="ui-icon ui-icon-circle-triangle-e">Next Month, September 2023</span></a><div class="ui-datepicker-title"><span class="ui-datepicker-month">August</span>&nbsp;<span class="ui-datepicker-year">2023</span></div></div><table class="ui-datepicker-calendar"><thead><tr><th scope="col" class="ui-datepicker-week-end"><span title="Sunday">Su</span></th><th scope="col"><span title="Monday">Mo</span></th><th scope="col"><span title="Tuesday">Tu</span></th><th scope="col"><span title="Wednesday">We</span></th><th scope="col"><span title="Thursday">Th</span></th><th scope="col"><span title="Friday">Fr</span></th><th scope="col" class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th></tr></thead><tbody><tr><td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td><td class=" " data-handler="selectDay" data-event="click" data-month="7" data-year="2023"><a class="ui-state-default" href="#" aria-current="false" data-date="1" role="button" aria-label="1 August 2023 ">1</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="7" data-year="2023"><a class="ui-state-default" href="#" aria-current="false" data-date="2" role="button" aria-label="2 August 2023 ">2</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="7" data-year="2023"><a class="ui-state-default" href="#" aria-current="false" data-date="3" role="button" aria-label="3 August 2023 ">3</a></td><td class=" ui-datepicker-unselectable ui-state-disabled ui-state-disabled uscb-no-event-date" title="No Event"><span class="ui-state-default">4</span></td><td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled ui-state-disabled uscb-no-event-date" title="No Event"><span class="ui-state-default">5</span></td></tr><tr><td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled ui-state-disabled uscb-no-event-date" title="No Event"><span class="ui-state-default">6</span></td><td class=" ui-datepicker-unselectable ui-state-disabled ui-state-disabled uscb-no-event-date" title="No Event"><span class="ui-state-default">7</span></td><td class=" " data-handler="selectDay" data-event="click" data-month="7" data-year="2023"><a class="ui-state-default" href="#" aria-current="false" data-date="8" role="button" aria-label="8 August 2023 ">8</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="7" data-year="2023"><a class="ui-state-default" href="#" aria-current="false" data-date="9" role="button" aria-label="9 August 2023 ">9</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="7" data-year="2023"><a class="ui-state-default" href="#" aria-current="false" data-date="10" role="button" aria-label="10 August 2023 ">10</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="7" data-year="2023"><a class="ui-state-default" href="#" aria-current="false" data-date="11" role="button" aria-label="11 August 2023 ">11</a></td><td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled ui-state-disabled uscb-no-event-date" title="No Event"><span class="ui-state-default">12</span></td></tr><tr><td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled ui-state-disabled uscb-no-event-date" title="No Event"><span class="ui-state-default">13</span></td><td class=" ui-datepicker-unselectable ui-state-disabled ui-state-disabled uscb-no-event-date" title="No Event"><span class="ui-state-default">14</span></td><td class=" " data-handler="selectDay" data-event="click" data-month="7" data-year="2023"><a class="ui-state-default" href="#" aria-current="false" data-date="15" role="button" aria-label="15 August 2023 ">15</a></td><td class=" ui-datepicker-days-cell-over  ui-datepicker-current-day ui-datepicker-today" data-handler="selectDay" data-event="click" data-month="7" data-year="2023"><a class="ui-state-default ui-state-highlight ui-state-active ui-state-hover" href="#" aria-current="true" data-date="16" role="button" aria-label="16 August 2023 ">16</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="7" data-year="2023"><a class="ui-state-default" href="#" aria-current="false" data-date="17" role="button" aria-label="17 August 2023 ">17</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="7" data-year="2023"><a class="ui-state-default" href="#" aria-current="false" data-date="18" role="button" aria-label="18 August 2023 ">18</a></td><td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled ui-state-disabled uscb-no-event-date" title="No Event"><span class="ui-state-default">19</span></td></tr><tr><td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled ui-state-disabled uscb-no-event-date" title="No Event"><span class="ui-state-default">20</span></td><td class=" " data-handler="selectDay" data-event="click" data-month="7" data-year="2023"><a class="ui-state-default" href="#" aria-current="false" data-date="21" role="button" aria-label="21 August 2023 ">21</a></td><td class=" ui-datepicker-unselectable ui-state-disabled ui-state-disabled uscb-no-event-date" title="No Event"><span class="ui-state-default">22</span></td><td class=" " data-handler="selectDay" data-event="click" data-month="7" data-year="2023"><a class="ui-state-default" href="#" aria-current="false" data-date="23" role="button" aria-label="23 August 2023 ">23</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="7" data-year="2023"><a class="ui-state-default" href="#" aria-current="false" data-date="24" role="button" aria-label="24 August 2023 ">24</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="7" data-year="2023"><a class="ui-state-default" href="#" aria-current="false" data-date="25" role="button" aria-label="25 August 2023 ">25</a></td><td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled ui-state-disabled uscb-no-event-date" title="No Event"><span class="ui-state-default">26</span></td></tr><tr><td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled ui-state-disabled uscb-no-event-date" title="No Event"><span class="ui-state-default">27</span></td><td class=" ui-datepicker-unselectable ui-state-disabled ui-state-disabled uscb-no-event-date" title="No Event"><span class="ui-state-default">28</span></td><td class=" " data-handler="selectDay" data-event="click" data-month="7" data-year="2023"><a class="ui-state-default" href="#" aria-current="false" data-date="29" role="button" aria-label="29 August 2023 ">29</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="7" data-year="2023"><a class="ui-state-default" href="#" aria-current="false" data-date="30" role="button" aria-label="30 August 2023 ">30</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="7" data-year="2023"><a class="ui-state-default" href="#" aria-current="false" data-date="31" role="button" aria-label="31 August 2023 ">31</a></td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td><td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td></tr></tbody></table></div></div>

</div>

 

<div>

<div class="uscb-sub-heading-2 uscb-padding-TB-10">Legend</div>

<table border="0" class="legend">

<tbody><tr>

<td>

<div class="current-date">Date</div>

</td>

<td>&nbsp;&nbsp;&nbsp;&nbsp;</td>

<td><span class="uscb-sub-heading-2">Current Date</span></td>

</tr>

<tr>

<td>

<div class="selected-date">Date</div>

</td>

<td>&nbsp;&nbsp;&nbsp;&nbsp;</td>

<td><span class="uscb-sub-heading-2">Selected Date</span></td>

</tr>

<tr>

<td>

<div class="date-with-event">Date</div>

</td>

<td>&nbsp;&nbsp;&nbsp;&nbsp;</td>

<td><span class="uscb-sub-heading-2">Date with Events</span></td>

</tr>

</tbody></table>

</div>

<!-- For the list part -->

</div>

</div>

Top of Section
✕
Is this page helpful?
Thumbs Up Image Yes Thumbs Down Image No
✕
NO THANKS
255 characters maximum 255 characters maximum reached
✕
Thank you for your feedback.
Comments or suggestions?

Top

Back to Header