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