The Calendar Plus web part configuration includes configuration steps similar to other Data View Toolset web parts, detailed information is available in the Web Part configuration page.
This article describes the data source and display configuration details which are unique to the Calendar Plus web part.
Calendar Plus Data source Configuration
After you add the web part to the page and click "Configure data source" you will see the data source settings page:
Click "Add a data source" to add your 1st data source, you will see the following settings page:
Give your data source a name and then select the data source type.
The available data source types are:
- SharePoint List
connect the Calendar to a single SharePoint list. - SharePoint List Aggregator
connect the Calendar to cross-site query aggregation results (multiple sites/lists). - SharePoint Search
connect to SharePoint Search api, enabling you to aggregate events from the entire tenant. - Graph API
connect the Calendar to MS Graph api, enabling you to connect to any M365 datasource such as Exchange Online or MS Planner. - Excel file
connect to a MS Excel file which is stored in a SharePoint library.
Select one of the data sources and then configure its properties according to linked guidelines above.
Color coding
Use the Color coding tab to configure back/fore colors for your data source. This is most usefull when you have multiple data sources and you want each to appear in a different color.
Column mapping
After you configure your data source, you will see an additional "Column mapping" tab in the settings page.
What's the purpose of the "Column mapping" settings?
There are several properties that are unique to Calendar-type items, such as Subject, Start date, End date etc. Without these properties, an item (event) cannot be displayed properly in the calendar.
In this settings page you configure which datasource column should be displayed for each of the calendar's required properties.
Column display settings
This settings page appears for the following data source types:
This settings page enables you to select columns from the data source, that you wish to be displayed in the "View Item" page (when user clicks an item in the calendar), and configure their display settings.
To add a column click the "Add column info" button, you'll see the following popup:
These configuration properties include:
- Field - select the column you wish to display
- Friendly name - you can type a caption that will be displayed instead of the column name
- Include in table view - check this property in case you are using the Table control and want this column to appear in it.
- Field data type - Select the data type of this column. The column's data will be rendered according to the selected data type.
After you add the column you want to be displayed, you can also reorder them by using the arrow buttons:
These columns will be displayed in a clicked event's "View Item" page, in the same order:
Calendar Plus display configuration
As described in the Configuring web part display page, the display configuration is all about choosing which controls you want to have and then configuring each of these controls. By default, when you add the Calendar Plus web part to the page, you see the following controls:
So by default you see the following controls:
4. Calendar
The 1st three controls are generic controls (available in all Data View Toolset web parts), click their links above to learn how to configure them.
The Calendar control is the main control displaying the calendar view. In the next section we'll go over it configuration properties.
Calendar control configuration
Clicking the Calendar control's gear icon on the right, you'll see the following settings toolpane:
By default the web part is in "Simple mode" which means it displays only the most basic and commonly used properties:
| Property | Description |
| Start view | The default view displayed by the calendar. |
| Show these views | You can configure which vieews will be available to end-users. By default the week, month, year views are available to users to switch between, you can add additional view and can also set the order in which their toggle buttons appear to users. |
| Show only business days | Switch to "On" to display only the business days in monthly and weekly views. |
| Enable timezone support | Switch to "On" to display SharePoint calendars in user's local time. |
| Tooltip | Update the displayed tooltip when user hovers over the event. The tooltip can include dynamic tokens such as column names. |
| Allow text to wrap in grid views | Switch to "On" to have long text be fully displayed by wrapping it. Unchecking this property will make long text get trimmed to the available cell space. |
Clicking the "Switch to advanced mode" button at the top of this settings page will reveal additional properties:
| Property | Description |
| Language | Calendar's displayed language. By default it will use the Site's language. |
| Maximum content height | In case you want to limit the Calendar's height so the page won't have a scrollbar, type the required height in pixels. |
Maximum number of events
in grid views | This is the maximum number of events displayed in the monthly and weekly grid (not agenda) views. If there are more events than the configured limit, a link will be displayed to all events. |
| Business days | Add the week work days, or leave empty to use the site settings. |
| Show business hours | Switch to "On" to show non-business hours with a different background color.
This applies to day & week agendat views. |
| Business hours start | Configure the work start time, or leave as "Default" to use the site settings. |
| Business hours end | Configure the work end time, or leave as "Default" to use the site settings.
|
| Event click | Select the desired result when user clicks an event in the calendar. By default an item click will open a "View Item" popup page that displays the selected event properties. |
| Second line text | Update this property if you want to display a second line in the event title. You can use html and dynamic tokens such as column names. |
| Third line text | Update this property if you want to display a third line in the event title. You can use html and dynamic tokens such as column names. |
| Fourth line text | Update this property if you want to display a fourth line in the event title. You can use html and dynamic tokens such as column names. |
| Item actions | The Calendar control supports 2 user-events: - Event click: when user clicks an event - Date click: when user clicks a date cell in the calendar view Using the Script Editor you can customize these events and select ready-to-use actions or write your own knockout code that will be triggered. |