---
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: multiSelectCalendar
layout: subsection
wd_wcptag: multiSelectCalendar
---
Displays a monthly calendar that enables users to:
- Visualize events in a 7-day monthly calendar that has the same look and feel as the Workday calendar.
- Click an event to view and update the event details.
- Select multiple dates and click a submit button to create an event.
- View related information in a sidebar panel.
- Navigate back to the today's date (in `userTimeZone`) using the Today button. The calendar also highlights the appropriate cell for today's date on the calendar.
Use `multiSelectCalendar` only on view pages.
## Usage
See [Concept: multiSelectCalendar](/wcp_docs/GUID-43c71e22-9854-4593-b89e-b65725888ebf-enHYPHENus.html)
## Example
This sample page uses the `multiSelectCalendar` for viewing, updating, and creating remote work days on the calendar.
The sample PMD with the `multiSelectCalendar` tag:
```
{
"id": "calendarRemoteWork",
"onLoad": "<%
// In this example, we'll use pageVariables to control the display of multiSelectCalendar.
// The calendar start date is next month, which overrides the default current month.
pageVariables.calendarStartDate = (date:now()).plusMonths(1);
// The calendar is view-only for non-employees.
me.workerType.descriptor == 'Employee' ? pageVariables.viewOnly = false : pageVariables.viewOnly = true;
// The submit button label will change if the worker reached maximum remote events.
let numEvents = getRemoteWorkDays.data.size();
pageVariables.maxRemoteEvents = 5;
numEvents > pageVariables.maxRemoteEvents ? pageVariables.approvalRequired = true : pageVariables.approvalRequired = false;
%>",
"presentation": {
"title": {
"type": "title",
"id": "title",
"label": "Remote Work Calendar"
},
"body": {
"type": "section",
"children": [
{
"type": "multiSelectCalendar",
"calendarStartDate": "<% pageVariables.calendarStartDate %>",
"eventData": {
"on": "<% getRemoteWorkDays.data %>",
"as": "event",
"template": {
"startDate": "<% date:parse(event.startDate) %>",
"endDate": "<% date:parse(event.endDate ?? event.startDate) %>",
"style": "<% event.approved ? 'APPROVED' : 'SUBMITTED' %>",
"title": "<% event.descriptor %>",
"editTask": {
"task": {
"taskId": "editRemoteWorkEvent",
"parameters": {
"startDate": "<% event.startDate %>",
"endDate": "<% event.endDate %>",
"id": "<% event.id %>",
"name": "<% event.descriptor %>",
"approved": "<% event.approved %>",
"editedById": "<% me.id %>",
"editedByName": "<% me.descriptor %>"
}
},
"render": "<% !pageVariables.viewOnly %>"
}
}
},
"submitButton": {
"render": "<% !pageVariables.viewOnly %>",
"label": "<% pageVariables.approvalRequired ? 'Request' : 'Add' %>",
"datesQueryParamName": "selectedDates",
"task": {
"taskId": "createRemoteWorkEvent",
"parameters": {
"createdById": "<% me.id %>",
"createdByName": "<% me.descriptor %>"
}
}
},
"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"
}
}
]
},
"footer": {
"type": "footer",
"children": [
{
"type": "richText",
"enabled": "false",
"value": "Powered By Workday Extend"
}
]
}
},
"endPoints": [
{
"baseUrlType": "workday-staffing",
"name": "me",
"authType": "sso",
"url": "workers/me"
},
{
"name": "getRemoteWorkDays",
"baseUrlType": "myApp",
"url": "remoteWorkDays?limit=<% pagingVariables.limit ?: 50 %>&offset=<% pagingVariables.offset ?: 0 %>",
"authType": "sso",
"httpMethod": "GET"
}
]
}
```
The sample `multiSelectCalendar` uses these components:
- Model business object, Remote Work Day.
`eventData` contains the `on` attribute, which specifies the getRemoteWorkDays.data list from the Remote Work Day collection endpoint.
- Micro edit page, editRemoteWorkEvent.pmd, which displays as a popup window when a user clicks an event label on the calendar. This page enables the user to edit event details.
`editTask` contains the `task` attribute, which specifies the editRemoteWorkEvent `taskId` of the micro edit page.
In the AMD, the micro edit page must have a flow definition that ends with a micro conclusion page.
- Micro edit page, createRemoteWorkEvent.pmd, which displays as a popup window when a user clicks the submit button at the bottom of the calendar. This page enables the user to add an event for the selected dates.
`submitButton` contains the `task` attribute, which specifies the createRemoteWorkEvent `taskId`of the micro edit page.
In the AMD, the micro edit page must have a flow definition that ends with a micro conclusion page.
- Sidebar page, sidebarInfo.pmd, which displays related information on the left of the calendar.
`sidebar` contains the `task` attribute, which specifies the sidebarInfo `taskId`of the view page.
## Mobile Support
Android, iOS
## Attributes
- calendarStartDate
Data type: dateScript
The start date whose month initially renders on the calendar. The default is today's date.
To specify a dynamic start date, use a script. Example:
```
"calendarStartDate" : "<% date:now('America/Los_Angeles') %>"
```
If you need to specify a literal date, use the `yyyy-MM-dd` format.
- eventData
Data type: eventData map
Specifies the event data and template for displaying each event on the calendar. If you don't specify `eventData`, the calendar displays without events. If you specify `eventData`, include its required attributes.
- on
Data type: listScript
(Required) A PMD script or endpoint that returns a list of event data rendered on the calendar. The event data should at least contain the event:
- Start date.
- End date, which can be the same as the start date.
- Title.
- as
Data type: string
(Required) The variable name that references the current instance in the list of events. Specify only alphanumeric and underscore characters.
- template
Data type: calendarEventTemplate map
(Required) Defines the template for rendering event data on the calendar. When the user hovers the mouse on an event, the hover text displays the style (if specified in the template), title, and date range.
`template` contains these attributes:
- startDate
Data type: dateScript
(Required) A PMD script that returns a date object containing the event start date, in `yyyy-MM-dd` format. The `multiSelectCalendar` renders the day and ignores the time in the input start date.
To ensure an input date object, use the `date:parse` function. Example:
```
"startDate": "<% date:parse(data.start) %>"
```
- endDate
Data type: dateScript
(Required) A PMD script that returns a date object containing the event end date, in `yyyy-MM-dd` format. The `multiSelectCalendar` renders the day and ignores the time in the input end date.
To ensure an input date object, use the `date:parse` function. For a single-day event, use the start date. Example:
```
"endDate": "<% date:parse(data.end ?? data.start) %>"
```
- title
Data type: stringScript
(Required) The title displayed on the event label. If the event spans multiple days, the label containing the title displays across the event days.
- editTask
Data type: StaticTaskReference map
Specifies the micro edit page that displays when the user clicks an event. If you don't specify `editTask`, nothing happens when the user clicks an event label.
`editTask` contains these attributes:
- task
Data type: StaticTaskReference map
(Required) Specifies the page that displays on the sidebar panel.
`task` contains these attributes:
- taskId
Data type: string
(Required) The `taskId` that corresponds to the micro edit page that displays when the user clicks the event. Ensure that you've defined the `taskId` in the AMD.
The micro edit page identified by the `taskId` must:
- Be an edit page whose `presentation` tag sets the `micro` attribute to true.
- Have a flow definition (in the AMD) that ends with a micro conclusion page.
- render
Data type: booleanScript
If true, the `multiSelectCalendar` enables the user to click the event and display the micro edit page. If false, the event isn't clickable. Setting the `render` attribute to false provides a view-only version of the calendar events. The default is true.
- parameters
Data type: Map
A map containing task parameters sent to the micro edit page that's specified by the `taskId`. Note that the parameter value supports PMD Scripting. The micro edit page can reference these parameters using the `queryParams` variable.
- style
Data type: eventStyle enum
Workday's standard calendar style for event labels. Valid values (case-insensitive):
- DEFAULT - Grey label with no icon. If you don't specify the `style` attribute, this value is the default. If you specify `style`, a dynamic value can't be null.
- HOLIDAY - Grey label with no icon.
- APPROVED - Green label with a check icon.
- SUBMITTED - Grey label with a clock icon.
- NOT_SUBMITTED - Blue label with a bookmark icon.
- DENIED - Red label with an exclamation point.
- CONFLICT - Green label with no icon.
- NEEDS_ATTENTION - Red label with an exclamation point.
- sidebar
Data type: calendarSideBar map
Specifies the page that displays on the sidebar panel. If you don't specify `sidebar`, an empty panel displays on the right of the calendar.
`sidebar` contains these attributes:
- task
Data type: StaticTaskReference map
(Required) Specifies the page that displays on the sidebar panel.
`task` contains these attributes:
- taskId
Data type: string
(Required) The `taskId` that corresponds to the view page that displays on the sidebar panel on the right or left of the calendar. Ensure that you've defined the `taskId` in the AMD.
Note: We recommend that you use a simple page that contains only the basic UI widgets. You can use an edit page to allow user interactions on the sidebar. However, 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 `multiSelectCalendar`.
- parameters
Data type: Map
A map containing task parameters sent to the specified `taskId` page. Note that the parameter value supports PMD Scripting. The page can reference these parameters using the `queryParams` variable.
- label
Data type: stringScript
(Required) The text that displays on the submit button that the user clicks after selecting dates on the calendar.
- position
Data type: sidebarPosition enum
The position of the sidebar panel. Valid values:
- RIGHT - The sidebar panel displays on the right of the calendar. This value is the default.
- LEFT - The sidebar panel displays on the left of the calendar.
- submitButton
Data type: submitTask map
Specifies the micro edit page that displays when the user clicks the submit button. If you don't specify `submitButton`, the calendar supports a view-only option, which doesn't display a submit button (users can still select dates but not submit an action).
`submitButton` contains these attributes:
- datesQueryParamName
Data type: string
(Required) The variable name in `queryParam` that will contain the user's selected dates. The micro edit page invoked by the submit button can reference the selected dates using `queryParam.`. The value is a comma-delimited string containing the selected dates from the earliest to the latest date.
Example: If the user selects July 13-14, 2023 and then clicks the submit button, `queryParam.theSelectedDates` contains the value 2023-07-13,2023-07-14.
- label
Data type: stringScript
(Required) The text that displays on the submit button. The label can be a literal string (Example: "Submit" ) or a dynamic label (Example: "<% me.isManager ? 'Add' : 'Request' %>".
As the user selects dates on the calendar, the label dynamically concatenates the number of selected dates and the specified label text.
- task
Data type: StaticTaskReference map
(Required) Specifies the micro edit page that displays when the user clicks the submit button.
`task` contains these attributes:
- taskId
Data type: string
(Required) The `taskId` that corresponds to the micro edit page that displays when the user clicks the submit button. Ensure that you've defined the `taskId` in the AMD.
The micro edit page identified by the `taskId` must:
- Be an edit page whose presentation tag sets the `micro` attribute to true.
- Be in a flow definition that ends with a micro conclusion page.
- parameters
Data type: Map
A map containing task parameters sent to the specified `taskId` page. Note that the parameter value supports PMD Scripting. The page can reference these parameters using the `queryParams` variable.
- render
Data type: booleanScript
If true, the `multiSelectCalendar` displays the submit button. If false, the submit button doesn't display. Setting the `render` attribute to false on both `submitButton` and `editTask` provides a view-only version of the calendar. The default is true.