- Events
- Council
- Recreation
The widget name will appear at the top of the widget on the public-facing side of the portal.
Add a Calendar Widget
You can add a calendar widget to Citizen Portal that will pull events from calendars or calendar categories from your website. With a Calendar widget, you can easily display any meeting or event notices in one central location in Citizen Portal.
Set-up instructions
In the administrator side of Citizen Portal:
- Select the “Widgets” tab from the top menu
- Select the “Add widget +” button near the top right of the page
- Select “Calendar” from the page of available widgets
This will take you to the new calendar widget details page.
Calendar widget details
Once you’ve added the calendar widget, you can customize the way the widget will appear on your Citizen Portal. This includes setting up the configuration, content and notifications for the widget.
Configuration
To configure the Calendar widget, select "Configuration" from the side menu. Then complete each of the necessary fields. Once you've completed all necessary fields, select the "Next" button at the bottom of the screen to take you to the "Content" screen. Alternatively, you can select "Content" from the side menu.
In the “Widget name” field, enter a name for the calendar widget. For example, you could use one of the following names:
If you would like this widget to be fixed on the user’s portal, select the “Set as fixed widget” checkbox. If you select this option, a user will not be able to remove the widget.
In the “Widget colour” field, enter the hex code for the background icon colour. You may type the hex code into this field using the format of #XXXXXX. You may also select this colour from the colour grid that appears when you click into this widget colour field.
You can select a widget icon from our library or upload your own widget icon. If you'd like to choose an icon from the library:
- Choose the "Select icon from library" option
- Then, select the "Select icon" button to view the library
- Choose the icon you'd like from the library
- Select the "Save and close" button to complete the process
If you'd like to upload your own icon:
- Choose the "Upload icon" option
- Then, select the “Add icon”
- From the pop-up box, choose the widget icon file from your documents
Please note that this must be a .svg file that is less than 5KB.
Content
Once you've completed the "Configuration" set-up, you can add content to the widget. Select "Content" from the side menu and complete all necessary fields. Once you've added content, you can select the "Next" button at the bottom of the screen or select "Notifications" from the side menu.
From the “Calendar” dropdown, select the calendars from your website that you’d like to use for this calendar widget. These calendars will be auto-populated from your existing website. You can select one or multiple calendars to display.
Beneath “Calendar Categories”, you will find a list of calendar categories that will be auto-populated from your website. Select the checkbox next to each calendar category that you’d like to show in this widget. If you are displaying multiple calendars in the same widget, the calendar categories for all calendars will be displayed.
For example, if you wanted to make a widget just showing Skating Events from your Recreation calendar, you would only select the checkbox next to the “Skating Events” category. Please note that this field will not be available if the calendar does not have any categories.
Under "Layout", you can choose how you want to display information in the expanded view of the Calendar widget. There are four types of layouts to choose from:
One-column List: This is the default layout. With this layout, the optional expanded view text is displayed at the top and the list of events is displayed below
Two-column List: With this layout, the optional expanded view text is displayed on the left side and the events are listed on the right side
One-column Grid: With this layout, the optional expanded view text is displayed at the top and a calendar grid appears below. The current date is selected by default and the events are listed on the right side
Two-column Grid: With this layout, the optional expanded view text is displayed on the left side and a calendar grid appears on the right side. Users can click on individual dates to view the calendar with pre-selected date filters
Select the checkbox next to your preferred layout. To view a sample image of what each layout looks like, hover your cursor over the icon next to each layout's name.
Dashboard items
From the “Dashboard Items” dropdown menu, select the number of events that you’d like to appear on the widget within the citizen dashboard. We recommend including three event entries.
From the “Expanded view items” dropdown menu, select the number of events you’d like to appear on the expanded view. The expanded view will display if someone selects a dashboard item to view more details. We suggest displaying five entries in the expanded view.
Enter any text you would like to appear above your calendar events in the dashboard widget view. For example, if you would like to link to a button to register for events, you could type “Register for Events”, and add a hyperlink to this page on your website.
If you would like the text in expanded view to mirror the dashboard view, select the checkbox next to “Use dashboard text for expanded view”.
If you would like to add content above the events within expanded view, add text within the “Expanded View” textbox.
Notifications
If you would like Citizen Portal to notify users that have subscribed to updates, select the “Widget Notifications” toggle to turn on notifications.
Notifications for individual categories
You can choose whether or not you want citizens to be able to subscribe to calendar widget notifications for each individual category by checking on or off the "Category dependent" checkbox. If you check on the "Category dependent" checkbox, users will have the option to subscribe to notifications for each individual Calendar category. If you check off the "Category dependent" checkbox, users will only have the option to subscribe to notifications for the widget as a whole.
Settings
You can add additional calendar text and filter options for users by selecting "Settings" from the left side menu. These options provide more information about the calendar widget for users and can allow them to filter calendars by location.
This is an optional text addition that, if added, will appear below the “Show widget on home screen” message. No heading will be displayed in the calendar widget settings if you don't add Heading text.
This is an optional text addition that, if added, will appear as a heading for the calendar categories in the calendar widget settings. No title will be displayed in the calendar widget settings if you don't add a Calendar Categories title.
Select whether you want to add a location filter to your calendar widgets by enabling the "Filter by Location" option. Enabling the filter will allow users to view events specific to their preferred location when they selecting the location(s) from the widget settings.
You should only enable this option if you have added "Location" as a field set in your selected Calendar. If any of the events on the Calendar do not have any value in the Location field, they won’t be displayed in the widget. Learn how to add field sets to your calendar so you can enable the "Filter by Location" option.
If you have enabled the "Filter by Location" option, you have the option to add your own Calendar Locations title which will appear as a heading for the calendar locations users can choose from. If you don't add your own title, the default title will read as "Select Locations".
Saving the widget settings
To save these settings and add the Calendar widget to Citizen Portal, select the “Save” button.
Don't have this widget?
If you don't have access to this widget or would like to buy another widget for Citizen Portal, please reach out our sales team or your project manager and they can work with you to get it added.