Calendar Card
The Calendar Card is used to display a schedule of a single entity (such as person, resource) for the selected time interval.
Properties
The Calendar Card has few defining properties.
Calendar properties
Property | Type | Default Value | Required | Description | Schema Version | Since |
---|---|---|---|---|---|---|
date | string | No | The date for which appointments are shown when card is initially loaded. The accepted date format is ISO 8601. | 1.18.0 | 1.74 | |
maxItems | int | No | The maximum number of items shown for each day. | 1.18.0 | 1.74 | |
maxLegendItems | int | No | The maximum number of legend items shown in the card. | 1.18.0 | 1.74 | |
noItemsText | string | No | The text shown when there are no items for the selected day. | 1.18.0 | 1.74 | |
items | object | No | The appointments defined for each date. | 1.18.0 | 1.74 | |
legendItems | object | No | The items in the legend, which describe the semantic meaning of item colors or special date colors for the application. | 1.18.0 | 1.74 | |
specialDates | object | No | The dates in the calendar part of the card marked as special. | 1.18.0 | 1.74 | |
moreItems | MoreItems | No | This button is present only if there are more items existing than the allowed maxItem. | 1.18.0 | 1.74 | |
actions | Actions[] | No | Defines actions that can be applied on the item. Note: This property is experimental and may change! | 1.32.0 | 1.88 |
The Calendar Card contains arrays of appointment items, legend items and special days.
Calendar item properties
Property | Type | Default Value | Required | Description | Schema Version | Since |
---|---|---|---|---|---|---|
path | string | No | Defines the path to the structure holding the data about the items. | 1.18.0 | 1.74 | |
template | object | Yes | The template describing the properties of each item. | 1.18.0 | 1.74 |
Calendar item template properties
Property | Type | Default Value | Required | Description | Schema Version | Since |
---|---|---|---|---|---|---|
startDate | string | Yes | The start date and time of the item. The accepted date format is ISO 8601. | 1.18.0 | 1.74 | |
endDate | string | Yes | The end date and time of the item. The accepted date format is ISO 8601. | 1.18.0 | 1.74 | |
title | string | No | The title of the item. | 1.18.0 | 1.74 | |
text | string | No | The additional information of the item. | 1.18.0 | 1.74 | |
type | sap.ui.unified.CalendarDayType | Type01 | No | The type of the item - one of the types defined in the legend. | 1.18.0 | 1.74 |
icon | icon | No | The icon of the item. | 1.18.0 | 1.74 |
Calendar legendItem properties
Property | Type | Default Value | Required | Description | Schema Version | Since |
---|---|---|---|---|---|---|
path | string | No | Defines the path to the structure holding the data about the legendItems. | 1.18.0 | 1.74 | |
template | object | Yes | The template describing the properties of each legendItem. | 1.18.0 | 1.74 |
Calendar legendItem template properties
Property | Type | Default Value | Required | Description | Schema Version | Since |
---|---|---|---|---|---|---|
category | string | Yes | Defines which card component describes the legend item. Available categories: "calendar" (represented as square) or "appointment" (circle). | 1.18.0 | 1.74 | |
text | string | No | The describing information of the item. | 1.18.0 | 1.74 | |
type | sap.ui.unified.CalendarDayType | Type01 | No | The type of the legend item corresponding with the described component. | 1.18.0 | 1.74 |
Calendar specialDate properties
Property | Type | Default Value | Required | Description | Schema Version | Since |
---|---|---|---|---|---|---|
path | string | No | Defines the path to the structure holding the data about the specialDates. | 1.18.0 | 1.74 | |
template | object | Yes | The template describing the properties of each specialDate. | 1.18.0 | 1.74 |
Calendar specialDate template properties
Property | Type | Default Value | Required | Description | Schema Version | Since |
---|---|---|---|---|---|---|
startDate | string | Yes | The start date and time of the special date. The accepted date format is ISO 8601. | 1.18.0 | 1.74 | |
endDate | string | Yes | The end date and time of the special date. The accepted date format is ISO 8601. | 1.18.0 | 1.74 | |
type | sap.ui.unified.CalendarDayType | Type01 | No | The type of the special date - one of the types defined in the legend. | 1.18.0 | 1.74 |
MoreItems button properties
Property | Type | Default Value | Required | Description | Schema Version | Since |
---|---|---|---|---|---|---|
actions | Actions[] | No | Actions that are triggered when the button is pressed. Note: This property is experimental and may change! | 1.32.0 | 1.88 |
Actions
The Calendar Card has few actions fired by user interaction.
Calendar actions
Using an extension, you can attach handlers to the following actions. Thus, you can set data fetching to be dependent to the selected date/month. See the sample about Fetch Data with Extension.
Action | Type | Description | Schema Version | Since |
---|---|---|---|---|
DateChange | Navigation | An action fired when a date in the calendar is selected. Note: This action is experimental and may change! |
1.31.0 | 1.87 |
MonthChange | Navigation | An action fired when the currently displayed month in the calendar is changed. Note: This action is experimental and may change! |
1.31.0 | 1.87 |
Parameters for the DateChange action
Parameter | Type | Description | Schema Version | Since |
---|---|---|---|---|
selectedDate | JavaScript Date object | The date that is chosen. | 1.31.0 | 1.87 |
Parameters for the MonthChange action
Parameter | Type | Description | Schema Version | Since |
---|---|---|---|---|
firstDate | JavaScript Date object | The first displayed date in the month view. This could be a date in the previous month. | 1.31.0 | 1.87 |
lastDate | JavaScript Date object | The last displayed date in the month view. This could be a date in the next month. | 1.31.0 | 1.87 |
Example
Define the type and data for the card:
{ "sap.card": { "type": "Calendar", "data": { "json": { "item": [ { "start": "2019-09-02T09:00", "end": "2019-09-02T10:00", "title": "Payment reminder", "icon": "sap-icon://desktop-mobile", "type": "Type06" }, { "start": "2019-09-02T17:00", "end": "2019-09-02T17:30", "title": "Private appointment", "icon": "sap-icon://desktop-mobile", "type": "Type07" }, { "start": "2019-09-02T12:00", "end": "2019-09-02T13:00", "title": "Lunch", "text": "working", "icon": "sap-icon://desktop-mobile", "type": "Type03" }, { "start": "2019-09-01T08:30", "end": "2019-09-03T17:30", "title": "Workshop", "text": "Out of office", "icon": "sap-icon://sap-ui5", "type": "Type07" }, { "start": "2019-09-02T14:00", "end": "2019-09-02T16:30", "title": "Discussion with clients", "text": "working", "icon": "sap-icon://desktop-mobile" }, { "start": "2019-09-02T11:00", "end": "2019-09-02T12:00", "title": "Team meeting", "text": "online meeting", "icon": "sap-icon://sap-ui5", "type": "Type04" } ], "specialDate": [ { "start": "2019-09-13", "end": "2019-09-14", "type": "Type08" }, { "start": "2019-09-24", "end": "2019-09-24", "type": "Type13" } ], "legendItem": [ { "category": "calendar", "text": "Team building", "type": "Type08" }, { "category": "calendar", "text": "Public holiday", "type": "Type13" }, { "category": "appointment", "text": "Reminder", "type": "Type06" }, { "category": "appointment", "text": "Private appointment", "type": "Type07" }, { "category": "appointment", "text": "Out of office", "type": "Type03" }, { "category": "appointment", "text": "Collaboration with other team members", "type": "Type07" } ] } }, "header": {}, "content": {} } }
Define the header of the card:
"header": { "title": "My calendar", "subTitle": "Team Balkan", "status": { "text": { "format": { "translationKey": "i18n>CARD.COUNT_X_OF_Y", "parts": [ "parameters>/visibleItems", "parameters>/allItems" ] } } } }
Define the content of the card:
"content": { "date": "2019-09-02", "maxItems": 5, "maxLegendItems": 3, "noItemsText": "You have nothing planned for that day", "item": { "template": { "startDate": "{start}", "endDate": "{end}", "title": "{title}", "text": "{text}", "icon": "{icon}", "type": "{type}" }, "path": "/item" }, "specialDate": { "template": { "startDate": "{start}", "endDate": "{end}", "type": "{type}" }, "path": "/specialDate" }, "legendItem": { "template": { "category": "{category}", "text": "{text}", "type": "{type}" }, "path": "/legendItem" }, "moreItems": { "actions": [ { "type": "Navigation", "parameters": { "enabled": true, "url": "http://sap.com" } } ] } }
Create the view to display the card:
<mvc:View xmlns:w="sap.ui.integration.widgets"> <w:Card manifest="./manifest.json" width="400px" height="auto"/> </mvc:View>Try it Out