---
category: [Administration & Integrations, Platform and Product Extensions, Platform and Product Extensions/Integration, Administration & Integrations/Custom Integrations & Apps, Platform and Product Extensions/Workday Extend]
keyword: [Extend, Presentation Components, widgets, tags, UI components]
nav: wcp_docs
parent_url: /wcp_docs/
title: >-
Concept: multiSelectCalendar
layout: subsection
wd_wcptag: multiSelectCalendar
---
Use the [multiSelectCalendar](/wcp_docs/GUID-97a3f2c2-f6ae-46c2-942b-3d5d15cd6334.html) for enabling app users to view, select multiple dates, create, and update calendar events. The `multiSelectCalendar` renders events on a 7-day monthly calendar, displaying weekdays from Sunday to Saturday.
Define the `multiSelectCalendar` in the `presentation` > `body` > `section` of a view page. Specify these main attributes:
- `calendarStartDate`
Determines the initial month and year displayed on the calendar, which defaults to today's month and year. Set the `calendarStartDate` attribute to ensure the user sees the correct initial month. Example: `"calendarStartDate" : "<% date:now('America/Los_Angeles') %>"`.
- `eventData`
Contains the event data and a template that specifies how to render the events on the calendar. The template can include an `editTask` that opens a micro edit page, enabling users to view or update the event details.
- `sidebar`
Displays a simple page on the left or right of the calendar.
In browser view, the sidebar displays next to the calendar. In mobile view or App Preview in a small size, the View Balances information icon (at the top of the calendar) opens the sidebar. Note that if the `multiSelectCalendar` doesn't have a `sidebar`, the information icon displays an empty panel.
- `submitButton`
Displays a submit button at the bottom of the calendar, enabling users to create an event based on the selected dates.
## Prerequisites
If you specify the `editTask` and `submitButton` attributes, ensure that for each specified task:
- The `taskId` is the `id` of a micro edit page.
A micro edit page is an edit page that sets the `micro` attribute to true. Example:
```
"presentation": {
"micro": true,
"pageType": "edit",
. . .
```
- The `flowDefinitions[]` in the AMD contains a definition for the micro edit flow, in which the micro edit page starts the flow and a micro conclusion page ends the flow. In this example, createRemoteWorkEvent is a micro edit page.
```
{
"id": "calendarSubmitMicroFlow",
"flowSteps": [
{
"id": "startCalendarSubmitMicro",
"transitions": [
{
"order": "a",
"value": "concludeCalendarSubmitMicro",
"condition": "true"
}
],
"startsFlow": true,
"taskId": "createRemoteWorkEvent"
},
{
"id": "concludeCalendarSubmitMicro",
"endsFlow": true,
"taskId": "microConclusion"
}
]
}
```
Ensure that your app contains the micro conclusion page referenced in the micro edit flow definition. A micro conclusion page is a placeholder confirmation page that displays a confirmation message at the end of the flow. Example:
```
{
"id": "microConclusion",
"presentation": {
"pageType": "confirm",
"microConclusion": true,
"body": {
"type": "section",
"children": [
{
"type": "text",
"_comment": "A micro conclusion triggers a 'Your changes have been saved.' message popup at the end of your micro edit flow. Widgets in this page will not be rendered.",
"label": "Done"
}
]
}
}
}
```
- The `tasks[]` in the AMD contains a definition for the micro edit page and micro conclusion page.
Consider these guidelines:
- Define only 1 `multiSelectCalendar` on a page.
You can add other tags to the page, but it can only have 1 `multiSelectCalendar`.
The `multiSelectCalendar` must be in a section that is a direct child of the `body`. You can only use the `multiSelectCalendar` tag in a non-horizontal section without a title. You can’t use the `multiSelectCalendar` in a `fieldSet`, `pod`, `hub`, and `tab`.
- For the sidebar, we recommend that you use a simple view page that contains only the basic UI widgets.
You can use an edit page to allow user interactions on the sidebar, but you can't submit outbound endpoints from the sidebar page. Note that the submit button on the calendar only invokes the micro edit page you specified in the `submitButton` attribute of the `multiSelectCalendar`.
- If you need to send task parameter bindings to a page containing the `multiSelectCalendar`, use route parameters.
The route parameters ensure that the task parameter values persist when users refresh the page containing the `multiSelectCalendar`. For details, see [Sending Parameters to the Calendar Page](#section-sending-parameters-to-the-calendar-page) .
- Workday doesn't support embedding the `multiSelectCalendar` widget within a profile group and dashboard.
## Displaying Calendar Events
To display events on the `multiSelectCalendar`, specify these attributes of `eventData`:
- `on` - The list of events which must contain the event start date, end date, and title. The `multiSelectCalendar` displays days, so it ignores the time in the input dates.
Also specify the `as` variable for referencing the current instance in the list of events.
Example: The `on` attribute specifies the sample getRemoteWorkDays endpoint, which returns the data list of events:
```
"eventData": {
"on": "<% getRemoteWorkDays.data %>",
"as": "event",
. . .
}
```
This sample list from the getRemoteWorkDays endpoint contains the start date, end date, and remote location fields. The sample calendar uses the remote location as the event title. Note that in the Remote Work Day business object, the remoteLocation field is enabled as the display name so the instance descriptor contains the remote location.
```
{
"total": 4,
"data": [
{
"id": "a32767d7fd06900020aa189793a00000",
"descriptor": "San Diego",
"submittedBy": {
"descriptor": "Logan McNeil",
"id": "3aa5550b7fe348b98d7b5741afc65534"
},
"startDate": "2023-10-11",
"endDate": "2023-10-13",
"remoteLocation": "San Diego",
"approved": true
},
{
"id": "a32767d7fd06900020adc150a51f0000",
"descriptor": "San Diego",
"submittedBy": {
"descriptor": "Logan McNeil",
"id": "3aa5550b7fe348b98d7b5741afc65534"
},
"startDate": "2023-10-16",
"endDate": "2023-10-16",
"remoteLocation": "San Diego",
"approved": true
},
. . .
]
}
```
- `template` - Specifies the required `startDate`, `endDate`, and `title` fields from the input list. You can also define the `style` attribute, which indicates the event status and how to render the event labels.
Example:
```
"eventData": {
"on": "<% getRemoteWorkDays.data %>",
"as": "event",
"template": {
"startDate": "<% date:parse(event.startDate) %>",
"endDate": "<% date:parse(event.endDate ?? event.startDate) %>",
"title": "<% event.descriptor %>",
"style": "<% event.approved ? 'APPROVED' : 'SUBMITTED' %>",
. . .
}
}
```
Each event in the list displays on the start and end day with a label and title. The label color and icon depends on the specified style. A tooltip also displays a concatenation of the style, title, and dates.
Note: In App Preview, you'll likely see a condensed view of the initial calendar. Expand the width of App Preview to see the full `multiSelectCalendar`, complete with displayed event labels and titles.
## Updating Calendar Events
You can enable users to update a calendar event when they click an event label. In the `template` attribute of `eventData`, you can specify the `editTask` attribute with a micro edit page for updating the event details. You can pass task `parameters` including the event ID, which the micro edit page can reference as `queryParams` variables.
Note: If you don't specify the `editTask` attribute, nothing happens when the user clicks an event label. To display a view-only calendar, see the Displaying a View-Only Calendar section.
Example: The `template` in `eventData` contains `editTask`, which specifies the editRemoteWorkEvent micro edit page.
```
"eventData": {
"on": "<% getRemoteWorkDays.data %>",
"as": "event",
"template": {
"startDate": "<% date:parse(event.startDate) %>",
"endDate": "<% date:parse(event.endDate ?? event.startDate) %>",
"title": "<% event.descriptor %>",
"style": "<% event.approved ? 'APPROVED' : 'DEFAULT' %>",
"editTask": {
"task": {
"taskId": "editRemoteWorkEvent",
"parameters": {
"remoteLocation": "<% event.descriptor %>",
"startDate": "<% event.startDate %>",
"endDate": "<% event.endDate ?? event.startDate %>",
"approved": "<% event.approved %>",
"eventId": "<% event.id %>",
"editedById": "<% me.id %>",
"editedByName": "<% me.descriptor %>"
}
}
}
}
}
```
When the app user clicks an event on the calendar, `multiSelectCalendar` displays the micro edit page specified in `editTask`. The micro edit page displays as a modal window:
The sample micro edit page, which submits the update outbound endpoint:
```
{
"id": "editRemoteWorkEvent",
"presentation": {
"pageType": "edit",
"micro": true,
"title": {
"type": "title",
"id": "title",
"label": "<% 'Update Remote Work: ' + queryParams.editedByName %>"
},
"body": {
"type": "section",
"id": "bodySection",
"children": [
{
"type": "text",
"id": "RemoteWorkDayName",
"label": "Remote Location",
"value": "<% queryParams.name %>",
"valuesOut": [
{
"value": "<% self.value %>",
"valueOutBinding": "RemoteWorkDay_Update.name"
}
]
},
{
"type": "date",
"datePrecision": "DAY",
"dateFormat": "yyyy-MM-dd",
"id": "RemoteWorkDayStartDate",
"label": "Start Date",
"value": "<% queryParams.startDate %>",
"valuesOut": [
{
"value": "<% date:format(self.value, 'yyyy-MM-dd') %>",
"valueOutBinding": "RemoteWorkDay_Update.startDate"
}
]
},
{
"type": "date",
"datePrecision": "DAY",
"dateFormat": "yyyy-MM-dd",
"id": "RemoteWorkDayEndDate",
"label": "End Date",
"value": "<% queryParams.endDate %>",
"valuesOut": [
{
"value": "<% date:format(self.value, 'yyyy-MM-dd') %>",
"valueOutBinding": "RemoteWorkDay_Update.endDate"
}
]
},
{
"type": "checkBox",
"id": "RemoteWorkDayApproved",
"label": "Approved by Manager?",
"value": "<% queryParams.approved %>",
"valuesOut": [
{
"value": "<% self.value %>",
"valueOutBinding": "RemoteWorkDay_Update.approved"
}
]
},
{
"type": "hidden",
"id": "RemoteWorkDaySubmittedBy",
"value": "<% queryParams.editedById %>",
"valueOutBinding": "RemoteWorkDay_Update.submittedBy.id"
}
]
}
},
"outboundData": {
"outboundEndPoints": [
{
"name": "RemoteWorkDay_Update",
"baseUrlType": "myApp",
"url": "remoteWorkDays/<% queryParams.id %>",
"authType": "sso",
"httpMethod": "PUT"
}
],
"responseErrorDetail": {
"errorSummary": "<% error %>",
"errors": "<% empty errors ? [] : [error].join(errors.map(err => { err.error } )) %>"
}
}
}
```
See the [Prerequisites](#section_prerequisites) section for an example of the required micro edit flow in the AMD and the micro conclusion page.
## Creating Events on the Calendar
Users can select dates on the `multiSelectCalendar` and click the submit button to create a calendar event. To enable this feature, specify the `submitButton` attribute of the `multiSelectCalendar`. Define the submit button label and the task that opens a micro edit page. In the `task` attribute of `submitButton`, specify the `taskId` of the micro edit page for creating the event. Use the task `parameters` to pass event data to the micro edit page.
To send the selected dates in a `queryParams` variable, specify the `datesQueryParamName` attribute with the name of the variable. Its value is a string concatenation of the selected dates, starting with the earliest date. The micro edit page can parse this `queryParams` variable to determine the new event dates.
Example: This sample `submitButton` renders only if pageVariables.viewOnly is false, and dynamically defines the label text. The `task` specifies the micro edit page that creates the event for the selected dates.
```
"submitButton": {
"render": "<% !pageVariables.viewOnly %>",
"label": "<% pageVariables.approvalRequired ? 'Request' : 'Add' %>",
"datesQueryParamName": "selectedDates",
"task": {
"taskId": "createRemoteWorkEvent",
"parameters": {
"createdById": "<% me.id %>",
"createdByName": "<% me.descriptor %>"
}
}
}
```
When the app user selects days and clicks the submit button, the `multiSelectCalendar` displays the micro edit page specified in the `task` attribute.
Here's the sample micro edit page, which submits the create outbound endpoint. This sample assumes that the user selected consecutive days for the new event, and gets the start and end dates from the queryParams.selectedDates variable.
```
{
"id": "createRemoteWorkEvent",
"onLoad": "<%
var eventSelectedDates = queryParams.selectedDates.split(',');
pageVariables.eventStartDate = eventSelectedDates[0];
pageVariables.eventEndDate = eventSelectedDates[eventSelectedDates.size() - 1];
%>",
"presentation": {
"pageType": "edit",
"micro": true,
"title": {
"type": "title",
"id": "title",
"label": "<% 'Create Remote Work: ' + queryParams.createdByName %>"
},
"body": {
"type": "section",
"id": "bodySection",
"children": [
{
"type": "text",
"id": "RemoteWorkDayName",
"label": "Remote Location",
"valuesOut": [
{
"value": "<% self.value %>",
"valueOutBinding": "RemoteWorkDay_Create.name"
}
]
},
{
"type": "date",
"datePrecision": "DAY",
"dateFormat": "yyyy-MM-dd",
"id": "RemoteWorkDayStartDate",
"label": "Start Date",
"value": "<% pageVariables.eventStartDate %>",
"valuesOut": [
{
"value": "<% date:format(self.value, 'yyyy-MM-dd') %>",
"valueOutBinding": "RemoteWorkDay_Create.startDate"
}
]
},
{
"type": "date",
"datePrecision": "DAY",
"dateFormat": "yyyy-MM-dd",
"id": "RemoteWorkDayEndDate",
"label": "End Date",
"value": "<% pageVariables.eventEndDate %>",
"valuesOut": [
{
"value": "<% date:format(self.value, 'yyyy-MM-dd') %>",
"valueOutBinding": "RemoteWorkDay_Create.endDate"
}
]
},
{
"type": "checkBox",
"id": "RemoteWorkDayApproved",
"label": "Approved by Manager?",
"valuesOut": [
{
"value": "<% self.value %>",
"valueOutBinding": "RemoteWorkDay_Create.approved"
}
]
},
{
"type": "hidden",
"id": "RemoteWorkDaySubmittedBy",
"value": "<% queryParams.createdById %>",
"valueOutBinding": "RemoteWorkDay_Create.submittedBy.id"
}
]
}
},
"outboundData": {
"outboundEndPoints": [
{
"name": "RemoteWorkDay_Create",
"url": "https://api.workday.com/apps/<% site.applicationId %>/v1/remoteWorkDays",
"authType": "sso",
"httpMethod": "POST"
}
],
"responseErrorDetail": {
"errorSummary": "<% error %>",
"errors": "<% empty errors ? [] : [error].join(errors.map(err => { err.error } )) %>"
}
}
}
```
See the [Prerequisites](#section_prerequisites) section for an example of the required micro edit flow in the AMD and the micro conclusion page.
## Displaying a View-Only Calendar
If you want to display the `multiSelectCalendar` as a view-only calendar, exclude these attributes:
- `editTask` in `eventData.template`.
- `submitButton`.
If you need to conditionally prevent users from updating and/or creating calendar events, use PMD Scripting to set the `render` attribute of `editTask` or `submitButton`.
## Displaying Related Calendar Information
To display related information on the left or right of the calendar, use the `sidebar` attribute of the `multiSelectCalendar`. Specify the `task` with the `taskId` of a simple view page with basic UI widgets. You can pass task `parameters`, which the sidebar page can reference as `queryParams` variables.
This sample `sidebar` opens a view page on the left side of the calendar. The sample also sends related data from the calendar page, including a calculated number of days based on the event date ranges.
```
"sidebar": {
"task": {
"taskId": "sidebarInfo",
"parameters": {
"name": "<% me.descriptor %>",
"businessTitle": "<% me.primaryJob.businessTitle %>",
"primaryLocation": "<% me.primaryJob.location.descriptor %>",
"currentDate": "<% pageVariables.calendarStartDate %>",
"remoteDaysTotal": "<%
var numRemoteDays = 0;
for (let i = 0; i < getRemoteWorkDays.data.size() i++){
const thisEvent = getRemoteWorkDays.data[i];
const thisStartDate = date:parse(thisEvent.startDate);
const thisEndDate = date:parse(thisEvent.endDate ?? thisEvent.startDate);
numRemoteDays += thisStartDate.between(thisEndDate, 'DAY') + 1 ;
}
numRemoteDays %>"
}
},
"position": "left"
}
}
```
The sample sidebar view page:
```
{
"id": "sidebarInfo",
"presentation": {
"body": {
"type": "section",
"children": [
{
"type": "text",
"label": "Title",
"value": "<% queryParams.businessTitle %>",
"enabled": false
},
{
"type": "text",
"label": "Primary Office Location",
"value": "<% queryParams.primaryLocation %>",
"enabled": false
},
{
"type": "number",
"label": "Total Remote Work Days:",
"value": "<% queryParams.remoteDaysTotal %>"
}
]
}
}
}
```
## Sending Parameters to the Calendar Page
To guarantee that the task parameters persist when a user refreshes the page containing the `multiSelectCalendar`, use route parameters.
Note: The use of `routeParams` only applies to sending parameter bindings to the page that contains `multiSelectCalendar`. We recommend `routeParams` instead of using `queryParams` when sending inbound parameters to the calendar page. However, you can use `queryParams` when sending parameters from the `multiSelectCalendar` to the micro edit pages. You can use `queryParams` in the task parameters for the `editTask`,`submitTask`, and `sidebar` attributes.
This sample `button` calls the sample calendarRemoteWork page, which contains the `multiSelectCalendar`, The `taskReference` for the `button` sends the startDate parameter binding:
```
{
"type": "button",
"label": "Remote work calendar",
"taskReference": {
"type": "taskReference",
"taskId": "calendarRemoteWork",
"parameterBindings": {
"startDate": "2023-10-01"
}
},
"action": "PRIMARY"
}
```
To use startDate as a route parameter of the calendarRemoteWork page, add startDate to the `routingPattern` for the calendarRemoteWork task in the AMD. Example:
```
"tasks": [
{
"id": "calendarRemoteWork",
"routingPattern": "/calendarRemoteWork/{startDate}",
"page": {
"id": "calendarRemoteWork"
}
},
. . .
]
```
To reference the startDate value in the calendarRemoteWork page, use `routeParams.startDate`. This `multiSelectCalendar` snippet uses `routeParams.startDate` in the `calendarStartDate` attribute:
```
{
"type": "multiSelectCalendar",
"calendarStartDate": "<% date:parse(routeParams.startDate) %>",
. . .
}
```