Displays rows with appointments for different entities (such as persons or teams) for the selected time interval.
You can use the PlanningCalendar
to represent a calendar containing multiple rows with appointments, where each row represents a different person.
You can configure different time-interval views that the user can switch between, such as hours or days, and even a whole week/month. The available navigation allows the user to select a specific interval using a picker, or move to the previous/next interval using arrows.
Note: The application developer should add dependency to sap.ui.unified
library on application level to ensure that the library is loaded before the module dependencies will be required. The PlanningCalendar
uses parts of the sap.ui.unified
library. This library will be loaded after the PlanningCalendar
, if it wasn't loaded first. This could lead to CSP compliance issues and adds an additional waiting time when a PlanningCalendar
is used for the first time. To prevent this, apps that use the PlanningCalendar
should also load the sap.ui.unified
library in advance.
The PlanningCalendar
has the following structure from top to bottom:
toolbarContent
aggregation.views
aggregation. If not configured, the following set of default built-in views is available - Hours, Days, 1 Week, 1 Month, and Months. Setting a custom view(s) replaces the built-in ones.PlanningCalendar
that contain the assigned appointments. They can be configured with the rows
aggregation, which is of type PlanningCalendarRow.Since 1.48 the empty space in the cell that is below an appointment can be removed by adding the sapUiCalendarAppFitVertically
CSS class to the PlanningCalendar
. Please note that it should be used only for a PlanningCalendar
with one appointment per day for a row that doesn't have interval headers set.
Since 1.44 alternating row colors can be suppressed by adding the sapMPlanCalSuppressAlternatingRowColors
CSS class to the PlanningCalendar
.
You can define the number of displayed intervals based on the size of the PlanningCalendar
using the PlanningCalendarView's properties.
Constructor for a new PlanningCalendar
.
Accepts an object literal mSettings
that defines initial property values, aggregated and associated objects as well as event handlers. See sap.ui.base.ManagedObject#constructor for a general description of the syntax of the settings object.
new sap.m.PlanningCalendar(sID?, mSettings?)
Param | Type | Default Value | Description |
---|---|---|---|
sID? | string | ID for the new control, generated automatically if no ID is given |
|
mSettings? | object | Initial settings for the new control |
Name | Type | Default Value | Description |
---|---|---|---|
appointmentHeight | sap.ui.unified.CalendarAppointmentHeight | Regular | Determines the different possible sizes for appointments. |
appointmentRoundWidth | sap.ui.unified.CalendarAppointmentRoundWidth | None | Defines rounding of the width |
appointmentsReducedHeight | boolean | false | Determines whether the appointments that have only title without text are rendered with smaller height. Note: On phone devices this property is ignored, appointments are always rendered in full height to facilitate touching. |
appointmentsVisualization | sap.ui.unified.CalendarAppointmentVisualization | Standard | Determines how the appointments are visualized depending on the used theme. |
builtInViews | string[] | Defines the list of predefined views as an array. The views should be specified by their keys. The default predefined views and their keys are available at sap.m.PlanningCalendarBuiltInView. Note: If set, all specified views will be displayed along with any custom views (if available). If not set and no custom views are available, all default views will be displayed. If not set and there are any custom views available, only the custom views will be displayed. |
|
firstDayOfWeek | int | -1 | If set, the first day of the displayed week is this day. Valid values are 0 to 6 starting on Sunday. If there is no valid value set, the default of the used locale is used. Note: this property will only have effect in the weekly – based views of the PlanningCalendar – Week view, and OneMonth view (on small devices). |
groupAppointmentsMode | sap.ui.unified.GroupAppointmentsMode | Collapsed | Defines the mode in which the overlapping appointments are displayed. Note: This property takes effect, only if the |
height | sap.ui.core.CSSSize | Specifies the height of the |
|
maxDate | object | Defines the maximum date that can be displayed and selected in the Note: If the |
|
minDate | object | Defines the minimum date that can be displayed and selected in the Note: If the |
|
noDataText | string | Defines the text that is displayed when no PlanningCalendarRows are assigned. Visibility: public |
|
showDayNamesLine | boolean | false | Determines whether the day names are displayed in a separate line or inside the single days. |
showEmptyIntervalHeaders | boolean | true | Determines whether the space (at the top of the intervals), where the assigned interval headers appear, should remain visible even when no interval headers are present in the visible time frame. If set to Note: This property takes effect, only if |
showIntervalHeaders | boolean | true | Determines whether the assigned interval headers are displayed. You can assign them using the Note: If you set both |
showRowHeaders | boolean | true | Determines whether the column containing the headers of the PlanningCalendarRows is displayed. Visibility: public |
showWeekNumbers | boolean | false | Determines if the week numbers are displayed. |
singleSelection | boolean | true | Determines whether only a single row can be selected. Visibility: public |
startDate | object | Determines the start date of the row, as a JavaScript date object. The current date is used as default. Visibility: public |
|
stickyHeader | boolean | false | Determines whether the header area will remain visible (fixed on top) when the rest of the content is scrolled out of view. The sticky header behavior is automatically disabled on phones in landscape mode for better visibility of the content. Note: There is limited browser support, hence the API is in experimental state. Browsers that currently support this feature are Chrome (desktop and mobile), Safari (desktop and mobile) and Edge 41. There are also some known issues with respect to the scrolling behavior and focus handling. A few are given below: When the PlanningCalendar is placed in certain layout containers, for example the This API should not be used in production environment. Note: The |
viewKey | string | sap.ui.unified.CalendarIntervalType.Hour | Defines the key of the Note: The default value is set |
width | sap.ui.core.CSSSize | Specifies the width of the |
Default Aggregation:
Name | Cardinality | Type | Description |
---|---|---|---|
header | 0..1 | sap.ui.core.Control |
Hidden, for internal use only. |
rows | 0..n | sap.m.PlanningCalendarRow |
Rows of the |
specialDates | 0..n | sap.ui.unified.DateTypeRange |
Special days in the header calendar visualized as date range with a type. Note: If one day is assigned to more than one type, only the first type will be used. |
table | 0..1 | sap.m.Table |
Hidden, for internal use only. |
toolbarContent | 0..n | sap.ui.core.Control |
The content of the toolbar. |
views | 0..n | sap.m.PlanningCalendarView |
Views of the Note: If not set, all the default views are available. Their keys are defined in sap.ui.unified.CalendarIntervalType. |
Name | Cardinality | Type | Description |
---|---|---|---|
ariaLabelledBy | 0..n | sap.ui.core.Control |
Association to controls / IDs which label this control (see WAI-ARIA attribute aria-labelledby). |
legend | 0..1 | sap.ui.unified.CalendarLegend |
Association to the Note: The legend does not have to be rendered but must exist, and all required types must be assigned. |
Event | Description |
---|---|
appointmentSelect |
Fired if an appointment is selected. |
intervalSelect |
Fired if an interval was selected in the calendar header or in the row. |
rowHeaderClick |
Fires when a row header is clicked. |
rowSelectionChange |
Fires when row selection is changed. |
startDateChange |
Fired when the |
viewChange |
Fired when the |
Fired if an appointment is selected.
Param | Type | Description |
---|---|---|
oControlEvent | sap.ui.base.Event | |
getSource | sap.ui.base.EventProvider | |
getParameters | object | |
appointment | sap.ui.unified.CalendarAppointment |
The selected appointment. |
appointments | sap.ui.unified.CalendarAppointment[] |
The selected appointments in case a group appointment is selected. |
multiSelect | boolean |
If set, the appointment was selected using multiple selection (e.g. Shift + single mouse click), meaning more than the current appointment could be selected. |
domRefId | string |
Gives the ID of the DOM element of the clicked appointment |
Fired if an interval was selected in the calendar header or in the row.
Param | Type | Description |
---|---|---|
oControlEvent | sap.ui.base.Event | |
getSource | sap.ui.base.EventProvider | |
getParameters | object | |
startDate | object |
Start date of the selected interval, as a JavaScript date object. |
endDate | object |
Interval end date as a JavaScript date object. |
subInterval | boolean |
If set, the selected interval is a subinterval. |
row | sap.m.PlanningCalendarRow |
Row of the selected interval. |
Fires when a row header is clicked.
Since: 1.46.0.
Param | Type | Description |
---|---|---|
oControlEvent | sap.ui.base.Event | |
getSource | sap.ui.base.EventProvider | |
getParameters | object | |
headerId | string |
The ID of the Note: Intended to be used as an easy way to get an ID of a |
row | sap.m.PlanningCalendarRow |
The row user clicked on. |
Fires when row selection is changed.
Param | Type | Description |
---|---|---|
oControlEvent | sap.ui.base.Event | |
getSource | sap.ui.base.EventProvider | |
getParameters | object | |
rows | sap.m.PlanningCalendarRow[] |
Array of rows whose selection has changed. |
Fired when the startDate
property was changed while navigating in the PlanningCalendar
. The new value can be obtained using the sap.m.PlanningCalendar#getStartDate()
method. Note: This event is fired in case when the viewKey
property is changed, and as a result of which the view requires a change in the startDate
property.
Param | Type | Description |
---|---|---|
oControlEvent | sap.ui.base.Event | |
getSource | sap.ui.base.EventProvider | |
getParameters | object |
Method | Description |
---|---|
addAriaLabelledBy |
Adds some ariaLabelledBy into the association ariaLabelledBy. |
addRow |
Adds some row to the aggregation rows. |
addSpecialDate |
Adds some specialDate to the aggregation specialDates. |
addToolbarContent |
Adds some toolbarContent to the aggregation toolbarContent. |
addView |
Adds some view to the aggregation views. |
attachAppointmentSelect |
Attaches event handler When called, the context of the event handler (its Fired if an appointment is selected. |
attachIntervalSelect |
Attaches event handler When called, the context of the event handler (its Fired if an interval was selected in the calendar header or in the row. |
attachRowHeaderClick |
Attaches event handler When called, the context of the event handler (its Fires when a row header is clicked. |
attachRowSelectionChange |
Attaches event handler When called, the context of the event handler (its Fires when row selection is changed. |
attachStartDateChange |
Attaches event handler When called, the context of the event handler (its Fired when the |
attachViewChange |
Attaches event handler When called, the context of the event handler (its Fired when the |
destroyRows |
Destroys all the rows in the aggregation rows. |
destroySpecialDates |
Destroys all the specialDates in the aggregation specialDates. |
destroyToolbarContent |
Destroys all the toolbarContent in the aggregation toolbarContent. |
destroyViews |
Destroys all the views in the aggregation views. |
detachAppointmentSelect |
Detaches event handler The passed function and listener object must match the ones used for event registration. |
detachIntervalSelect |
Detaches event handler The passed function and listener object must match the ones used for event registration. |
detachRowHeaderClick |
Detaches event handler The passed function and listener object must match the ones used for event registration. |
detachRowSelectionChange |
Detaches event handler The passed function and listener object must match the ones used for event registration. |
detachStartDateChange |
Detaches event handler The passed function and listener object must match the ones used for event registration. |
detachViewChange |
Detaches event handler The passed function and listener object must match the ones used for event registration. |
sap.m.PlanningCalendar.extend |
Creates a new subclass of class sap.m.PlanningCalendar with name
|
fireAppointmentSelect |
Fires event appointmentSelect to attached listeners. |
fireIntervalSelect |
Fires event intervalSelect to attached listeners. |
fireRowHeaderClick |
Fires event rowHeaderClick to attached listeners. |
fireRowSelectionChange |
Fires event rowSelectionChange to attached listeners. |
fireStartDateChange |
Fires event startDateChange to attached listeners. |
fireViewChange |
Fires event viewChange to attached listeners. |
getAppointmentHeight |
Gets current value of property appointmentHeight. Determines the different possible sizes for appointments. Default value is |
getAppointmentRoundWidth |
Gets current value of property appointmentRoundWidth. Defines rounding of the width Default value is |
getAppointmentsReducedHeight |
Gets current value of property appointmentsReducedHeight. Determines whether the appointments that have only title without text are rendered with smaller height. Note: On phone devices this property is ignored, appointments are always rendered in full height to facilitate touching. Default value is |
getAppointmentsVisualization |
Gets current value of property appointmentsVisualization. Determines how the appointments are visualized depending on the used theme. Default value is |
getAriaLabelledBy |
Returns array of IDs of the elements which are the current targets of the association ariaLabelledBy. |
getBuiltInViews |
Gets current value of property builtInViews. Defines the list of predefined views as an array. The views should be specified by their keys. The default predefined views and their keys are available at sap.m.PlanningCalendarBuiltInView. Note: If set, all specified views will be displayed along with any custom views (if available). If not set and no custom views are available, all default views will be displayed. If not set and there are any custom views available, only the custom views will be displayed. Default value is |
getCustomAppointmentsSorterCallback |
Getter for custom appointments sorter (if any). |
getEndDate |
Getter for the end point in time of the shown interval |
getFirstDayOfWeek |
Gets current value of property firstDayOfWeek. If set, the first day of the displayed week is this day. Valid values are 0 to 6 starting on Sunday. If there is no valid value set, the default of the used locale is used. Note: this property will only have effect in the weekly – based views of the PlanningCalendar – Week view, and OneMonth view (on small devices). Default value is |
getGroupAppointmentsMode |
Gets current value of property groupAppointmentsMode. Defines the mode in which the overlapping appointments are displayed. Note: This property takes effect, only if the Default value is |
getHeight |
Gets current value of property height. Specifies the height of the |
getLegend |
ID of the element which is the current target of the association legend, or |
getMaxDate |
Gets current value of property maxDate. Defines the maximum date that can be displayed and selected in the Note: If the |
sap.m.PlanningCalendar.getMetadata |
Returns a metadata object for class sap.m.PlanningCalendar. |
getMinDate |
Gets current value of property minDate. Defines the minimum date that can be displayed and selected in the Note: If the |
getNoDataText |
Gets current value of property noDataText. Defines the text that is displayed when no PlanningCalendarRows are assigned. |
getRows |
Gets content of aggregation rows. Rows of the |
getSelectedAppointments |
Holds the selected appointments. If no appointments are selected, an empty array is returned. |
getSelectedRows |
Returns an array containing the selected rows. If no row is selected, an empty array is returned. |
getShowDayNamesLine |
Gets current value of property showDayNamesLine. Determines whether the day names are displayed in a separate line or inside the single days. Default value is |
getShowEmptyIntervalHeaders |
Gets current value of property showEmptyIntervalHeaders. Determines whether the space (at the top of the intervals), where the assigned interval headers appear, should remain visible even when no interval headers are present in the visible time frame. If set to Note: This property takes effect, only if Default value is |
getShowIntervalHeaders |
Gets current value of property showIntervalHeaders. Determines whether the assigned interval headers are displayed. You can assign them using the Note: If you set both Default value is |
getShowRowHeaders |
Gets current value of property showRowHeaders. Determines whether the column containing the headers of the PlanningCalendarRows is displayed. Default value is |
getShowWeekNumbers |
Gets current value of property showWeekNumbers. Determines if the week numbers are displayed. Default value is |
getSingleSelection |
Gets current value of property singleSelection. Determines whether only a single row can be selected. Default value is |
getSpecialDates |
Gets content of aggregation specialDates. Special days in the header calendar visualized as date range with a type. Note: If one day is assigned to more than one type, only the first type will be used. |
getStartDate |
Gets current value of property startDate. Determines the start date of the row, as a JavaScript date object. The current date is used as default. |
getStickyHeader |
Gets current value of property stickyHeader. Determines whether the header area will remain visible (fixed on top) when the rest of the content is scrolled out of view. The sticky header behavior is automatically disabled on phones in landscape mode for better visibility of the content. Note: There is limited browser support, hence the API is in experimental state. Browsers that currently support this feature are Chrome (desktop and mobile), Safari (desktop and mobile) and Edge 41. There are also some known issues with respect to the scrolling behavior and focus handling. A few are given below: When the PlanningCalendar is placed in certain layout containers, for example the This API should not be used in production environment. Note: The Default value is |
getToolbarContent |
Gets content of aggregation toolbarContent. The content of the toolbar. |
getViewKey |
Gets current value of property viewKey. Defines the key of the Note: The default value is set Default value is |
getViews |
Gets content of aggregation views. Views of the Note: If not set, all the default views are available. Their keys are defined in sap.ui.unified.CalendarIntervalType. |
getVisibleIntervalsCount |
Getter for how many intervals are currently displayed |
getWidth |
Gets current value of property width. Specifies the width of the |
indexOfRow |
Checks for the provided |
indexOfSpecialDate |
Checks for the provided |
indexOfToolbarContent |
Checks for the provided |
indexOfView |
Checks for the provided |
insertRow |
Inserts a row into the aggregation rows. |
insertSpecialDate |
Inserts a specialDate into the aggregation specialDates. |
insertToolbarContent |
Inserts a toolbarContent into the aggregation toolbarContent. |
insertView |
Inserts a view into the aggregation views. |
removeAllAriaLabelledBy |
Removes all the controls in the association named ariaLabelledBy. |
removeAllRows |
Removes all the controls from the aggregation rows. Additionally, it unregisters them from the hosting UIArea. |
removeAllSpecialDates |
Removes all the controls from the aggregation specialDates. Additionally, it unregisters them from the hosting UIArea. |
removeAllToolbarContent |
Removes all the controls from the aggregation toolbarContent. Additionally, it unregisters them from the hosting UIArea. |
removeAllViews |
Removes all the controls from the aggregation views. Additionally, it unregisters them from the hosting UIArea. |
removeAriaLabelledBy |
Removes an ariaLabelledBy from the association named ariaLabelledBy. |
removeRow |
Removes a row from the aggregation rows. |
removeSpecialDate |
Removes a specialDate from the aggregation specialDates. |
removeToolbarContent |
Removes a toolbarContent from the aggregation toolbarContent. |
removeView |
Removes a view from the aggregation views. |
selectAllRows |
Selects or deselects all Note: Selection only works if |
setAppointmentHeight |
Sets a new value for property appointmentHeight. Determines the different possible sizes for appointments. When called with a value of Default value is |
setAppointmentRoundWidth |
Sets a new value for property appointmentRoundWidth. Defines rounding of the width When called with a value of Default value is |
setAppointmentsReducedHeight |
Sets a new value for property appointmentsReducedHeight. Determines whether the appointments that have only title without text are rendered with smaller height. Note: On phone devices this property is ignored, appointments are always rendered in full height to facilitate touching. When called with a value of Default value is |
setAppointmentsVisualization |
Sets a new value for property appointmentsVisualization. Determines how the appointments are visualized depending on the used theme. When called with a value of Default value is |
setBuiltInViews |
Sets a new value for property builtInViews. Defines the list of predefined views as an array. The views should be specified by their keys. The default predefined views and their keys are available at sap.m.PlanningCalendarBuiltInView. Note: If set, all specified views will be displayed along with any custom views (if available). If not set and no custom views are available, all default views will be displayed. If not set and there are any custom views available, only the custom views will be displayed. When called with a value of Default value is |
setCustomAppointmentsSorterCallback |
Setter for custom sorting of appointments. If not used, the appointments will be sorted according to their duration vertically. For example, the start time and order to the X axis won't change. |
setFirstDayOfWeek |
Sets a new value for property firstDayOfWeek. If set, the first day of the displayed week is this day. Valid values are 0 to 6 starting on Sunday. If there is no valid value set, the default of the used locale is used. Note: this property will only have effect in the weekly – based views of the PlanningCalendar – Week view, and OneMonth view (on small devices). When called with a value of Default value is |
setGroupAppointmentsMode |
Sets a new value for property groupAppointmentsMode. Defines the mode in which the overlapping appointments are displayed. Note: This property takes effect, only if the When called with a value of Default value is |
setHeight |
Sets a new value for property height. Specifies the height of the When called with a value of |
setLegend |
Sets the associated legend. |
setMaxDate |
Sets a new value for property maxDate. Defines the maximum date that can be displayed and selected in the Note: If the When called with a value of |
setMinDate |
Sets a new value for property minDate. Defines the minimum date that can be displayed and selected in the Note: If the When called with a value of |
setNoDataText |
Sets a new value for property noDataText. Defines the text that is displayed when no PlanningCalendarRows are assigned. When called with a value of |
setShowDayNamesLine |
Sets a new value for property showDayNamesLine. Determines whether the day names are displayed in a separate line or inside the single days. When called with a value of Default value is |
setShowEmptyIntervalHeaders |
Sets a new value for property showEmptyIntervalHeaders. Determines whether the space (at the top of the intervals), where the assigned interval headers appear, should remain visible even when no interval headers are present in the visible time frame. If set to Note: This property takes effect, only if When called with a value of Default value is |
setShowIntervalHeaders |
Sets a new value for property showIntervalHeaders. Determines whether the assigned interval headers are displayed. You can assign them using the Note: If you set both When called with a value of Default value is |
setShowRowHeaders |
Sets a new value for property showRowHeaders. Determines whether the column containing the headers of the PlanningCalendarRows is displayed. When called with a value of Default value is |
setShowWeekNumbers |
Sets a new value for property showWeekNumbers. Determines if the week numbers are displayed. When called with a value of Default value is |
setSingleSelection |
Sets a new value for property singleSelection. Determines whether only a single row can be selected. When called with a value of Default value is |
setStartDate |
Sets the given date as start date. The current date is used as default. Depending on the current view the start date may be adjusted (for example, the week view shows always the first weekday of the same week as the given date). |
setStickyHeader |
Sets the stickyHeader property. |
setViewKey |
Sets a new value for property viewKey. Defines the key of the Note: The default value is set When called with a value of Default value is |
setWidth |
Sets the width property and ensures that the start date is in sync with each row timeline. |
Adds some ariaLabelledBy into the association ariaLabelledBy.
Param | Type | DefaultValue | Description |
---|---|---|---|
vAriaLabelledBy | sap.ui.core.ID sap.ui.core.Control |
The ariaLabelledBy to add; if empty, nothing is inserted |
Adds some row to the aggregation rows.
Param | Type | DefaultValue | Description |
---|---|---|---|
oRow | sap.m.PlanningCalendarRow |
The row to add; if empty, nothing is inserted |
Adds some specialDate to the aggregation specialDates.
Param | Type | DefaultValue | Description |
---|---|---|---|
oSpecialDate | sap.ui.unified.DateTypeRange |
The specialDate to add; if empty, nothing is inserted |
Adds some toolbarContent to the aggregation toolbarContent.
Param | Type | DefaultValue | Description |
---|---|---|---|
oToolbarContent | sap.ui.core.Control |
The toolbarContent to add; if empty, nothing is inserted |
Adds some view to the aggregation views.
Param | Type | DefaultValue | Description |
---|---|---|---|
oView | sap.m.PlanningCalendarView |
The view to add; if empty, nothing is inserted |
Attaches event handler fnFunction
to the appointmentSelect event of this sap.m.PlanningCalendar
.
When called, the context of the event handler (its this
) will be bound to oListener
if specified, otherwise it will be bound to this sap.m.PlanningCalendar
itself.
Fired if an appointment is selected.
Param | Type | DefaultValue | Description |
---|---|---|---|
oData | object |
An application-specific payload object that will be passed to the event handler along with the event object when firing the event |
|
fnFunction | function(sap.ui.base.Event) : void |
The function to be called when the event occurs |
|
oListener | object |
Context object to call the event handler with. Defaults to this |
Attaches event handler fnFunction
to the intervalSelect event of this sap.m.PlanningCalendar
.
When called, the context of the event handler (its this
) will be bound to oListener
if specified, otherwise it will be bound to this sap.m.PlanningCalendar
itself.
Fired if an interval was selected in the calendar header or in the row.
Param | Type | DefaultValue | Description |
---|---|---|---|
oData | object |
An application-specific payload object that will be passed to the event handler along with the event object when firing the event |
|
fnFunction | function(sap.ui.base.Event) : void |
The function to be called when the event occurs |
|
oListener | object |
Context object to call the event handler with. Defaults to this |
Attaches event handler fnFunction
to the rowHeaderClick event of this sap.m.PlanningCalendar
.
When called, the context of the event handler (its this
) will be bound to oListener
if specified, otherwise it will be bound to this sap.m.PlanningCalendar
itself.
Fires when a row header is clicked.
Param | Type | DefaultValue | Description |
---|---|---|---|
oData | object |
An application-specific payload object that will be passed to the event handler along with the event object when firing the event |
|
fnFunction | function(sap.ui.base.Event) : void |
The function to be called when the event occurs |
|
oListener | object |
Context object to call the event handler with. Defaults to this |
Attaches event handler fnFunction
to the rowSelectionChange event of this sap.m.PlanningCalendar
.
When called, the context of the event handler (its this
) will be bound to oListener
if specified, otherwise it will be bound to this sap.m.PlanningCalendar
itself.
Fires when row selection is changed.
Param | Type | DefaultValue | Description |
---|---|---|---|
oData | object |
An application-specific payload object that will be passed to the event handler along with the event object when firing the event |
|
fnFunction | function(sap.ui.base.Event) : void |
The function to be called when the event occurs |
|
oListener | object |
Context object to call the event handler with. Defaults to this |
Attaches event handler fnFunction
to the startDateChange event of this sap.m.PlanningCalendar
.
When called, the context of the event handler (its this
) will be bound to oListener
if specified, otherwise it will be bound to this sap.m.PlanningCalendar
itself.
Fired when the startDate
property was changed while navigating in the PlanningCalendar
. The new value can be obtained using the sap.m.PlanningCalendar#getStartDate()
method. Note: This event is fired in case when the viewKey
property is changed, and as a result of which the view requires a change in the startDate
property.
Param | Type | DefaultValue | Description |
---|---|---|---|
oData | object |
An application-specific payload object that will be passed to the event handler along with the event object when firing the event |
|
fnFunction | function(sap.ui.base.Event) : void |
The function to be called when the event occurs |
|
oListener | object |
Context object to call the event handler with. Defaults to this |
Attaches event handler fnFunction
to the viewChange event of this sap.m.PlanningCalendar
.
When called, the context of the event handler (its this
) will be bound to oListener
if specified, otherwise it will be bound to this sap.m.PlanningCalendar
itself.
Fired when the viewKey
property was changed by user interaction.
Param | Type | DefaultValue | Description |
---|---|---|---|
oData | object |
An application-specific payload object that will be passed to the event handler along with the event object when firing the event |
|
fnFunction | function(sap.ui.base.Event) : void |
The function to be called when the event occurs |
|
oListener | object |
Context object to call the event handler with. Defaults to this |
Detaches event handler fnFunction
from the appointmentSelect event of this sap.m.PlanningCalendar
.
The passed function and listener object must match the ones used for event registration.
Param | Type | DefaultValue | Description |
---|---|---|---|
fnFunction | function(sap.ui.base.Event) : void |
The function to be called, when the event occurs |
|
oListener | object |
Context object on which the given function had to be called |
Detaches event handler fnFunction
from the intervalSelect event of this sap.m.PlanningCalendar
.
The passed function and listener object must match the ones used for event registration.
Param | Type | DefaultValue | Description |
---|---|---|---|
fnFunction | function(sap.ui.base.Event) : void |
The function to be called, when the event occurs |
|
oListener | object |
Context object on which the given function had to be called |
Detaches event handler fnFunction
from the rowHeaderClick event of this sap.m.PlanningCalendar
.
The passed function and listener object must match the ones used for event registration.
Param | Type | DefaultValue | Description |
---|---|---|---|
fnFunction | function(sap.ui.base.Event) : void |
The function to be called, when the event occurs |
|
oListener | object |
Context object on which the given function had to be called |
Detaches event handler fnFunction
from the rowSelectionChange event of this sap.m.PlanningCalendar
.
The passed function and listener object must match the ones used for event registration.
Param | Type | DefaultValue | Description |
---|---|---|---|
fnFunction | function(sap.ui.base.Event) : void |
The function to be called, when the event occurs |
|
oListener | object |
Context object on which the given function had to be called |
Detaches event handler fnFunction
from the startDateChange event of this sap.m.PlanningCalendar
.
The passed function and listener object must match the ones used for event registration.
Param | Type | DefaultValue | Description |
---|---|---|---|
fnFunction | function(sap.ui.base.Event) : void |
The function to be called, when the event occurs |
|
oListener | object |
Context object on which the given function had to be called |
Detaches event handler fnFunction
from the viewChange event of this sap.m.PlanningCalendar
.
The passed function and listener object must match the ones used for event registration.
Param | Type | DefaultValue | Description |
---|---|---|---|
fnFunction | function(sap.ui.base.Event) : void |
The function to be called, when the event occurs |
|
oListener | object |
Context object on which the given function had to be called |
Creates a new subclass of class sap.m.PlanningCalendar with name sClassName
and enriches it with the information contained in oClassInfo
.
oClassInfo
might contain the same kind of information as described in sap.ui.core.Control.extend.
Param | Type | DefaultValue | Description |
---|---|---|---|
sClassName | string |
Name of the class being created |
|
oClassInfo | object |
Object literal with information about the class |
|
FNMetaImpl | function |
Constructor function for the metadata object; if not given, it defaults to the metadata implementation used by this class |
Fires event appointmentSelect to attached listeners.
Param | Type | DefaultValue | Description |
---|---|---|---|
mParameters | object |
Parameters to pass along with the event |
|
appointment | sap.ui.unified.CalendarAppointment |
The selected appointment. |
|
appointments | sap.ui.unified.CalendarAppointment[] |
The selected appointments in case a group appointment is selected. |
|
multiSelect | boolean |
If set, the appointment was selected using multiple selection (e.g. Shift + single mouse click), meaning more than the current appointment could be selected. |
|
domRefId | string |
Gives the ID of the DOM element of the clicked appointment |
Fires event intervalSelect to attached listeners.
Param | Type | DefaultValue | Description |
---|---|---|---|
mParameters | object |
Parameters to pass along with the event |
|
startDate | object |
Start date of the selected interval, as a JavaScript date object. |
|
endDate | object |
Interval end date as a JavaScript date object. |
|
subInterval | boolean |
If set, the selected interval is a subinterval. |
|
row | sap.m.PlanningCalendarRow |
Row of the selected interval. |
Fires event rowHeaderClick to attached listeners.
Param | Type | DefaultValue | Description |
---|---|---|---|
mParameters | object |
Parameters to pass along with the event |
|
headerId | string |
The ID of the Note: Intended to be used as an easy way to get an ID of a |
|
row | sap.m.PlanningCalendarRow |
The row user clicked on. |
Fires event rowSelectionChange to attached listeners.
Param | Type | DefaultValue | Description |
---|---|---|---|
mParameters | object |
Parameters to pass along with the event |
|
rows | sap.m.PlanningCalendarRow[] |
Array of rows whose selection has changed. |
Fires event startDateChange to attached listeners.
Param | Type | DefaultValue | Description |
---|---|---|---|
mParameters | object |
Parameters to pass along with the event |
Fires event viewChange to attached listeners.
Param | Type | DefaultValue | Description |
---|---|---|---|
mParameters | object |
Parameters to pass along with the event |
Gets current value of property appointmentHeight.
Determines the different possible sizes for appointments.
Default value is Regular
.
Gets current value of property appointmentRoundWidth.
Defines rounding of the width CalendarAppoinment
Note: This property is applied, when the calendar interval type is day and the view shows more than 20 days
Default value is None
.
Gets current value of property appointmentsReducedHeight.
Determines whether the appointments that have only title without text are rendered with smaller height.
Note: On phone devices this property is ignored, appointments are always rendered in full height to facilitate touching.
Default value is false
.
Gets current value of property appointmentsVisualization.
Determines how the appointments are visualized depending on the used theme.
Default value is Standard
.
Returns array of IDs of the elements which are the current targets of the association ariaLabelledBy.
Gets current value of property builtInViews.
Defines the list of predefined views as an array. The views should be specified by their keys.
The default predefined views and their keys are available at sap.m.PlanningCalendarBuiltInView.
Note: If set, all specified views will be displayed along with any custom views (if available). If not set and no custom views are available, all default views will be displayed. If not set and there are any custom views available, only the custom views will be displayed.
Default value is []
.
Gets current value of property firstDayOfWeek.
If set, the first day of the displayed week is this day. Valid values are 0 to 6 starting on Sunday. If there is no valid value set, the default of the used locale is used.
Note: this property will only have effect in the weekly – based views of the PlanningCalendar – Week view, and OneMonth view (on small devices).
Default value is -1
.
Gets current value of property groupAppointmentsMode.
Defines the mode in which the overlapping appointments are displayed.
Note: This property takes effect, only if the intervalType
of the current calendar view is set to sap.ui.unified.CalendarIntervalType.Month
. On phone devices this property is ignored, and the default value is applied.
Default value is Collapsed
.
Gets current value of property height.
Specifies the height of the PlanningCalendar
. Note: If the set height is less than the displayed content, it will not be applied
Gets current value of property maxDate.
Defines the maximum date that can be displayed and selected in the PlanningCalendar
. This must be a JavaScript date object.
Note: If the maxDate
is set to be before the current minDate
, the minDate
is set to the first date of the month in which the maxDate
belongs.
Gets current value of property minDate.
Defines the minimum date that can be displayed and selected in the PlanningCalendar
. This must be a JavaScript date object.
Note: If the minDate
is set to be after the current maxDate
, the maxDate
is set to the last date of the month in which the minDate
belongs.
Gets current value of property noDataText.
Defines the text that is displayed when no PlanningCalendarRows are assigned.
Holds the selected appointments. If no appointments are selected, an empty array is returned.
Returns an array containing the selected rows. If no row is selected, an empty array is returned.
Gets current value of property showDayNamesLine.
Determines whether the day names are displayed in a separate line or inside the single days.
Default value is false
.
Gets current value of property showEmptyIntervalHeaders.
Determines whether the space (at the top of the intervals), where the assigned interval headers appear, should remain visible even when no interval headers are present in the visible time frame. If set to false
, this space would collapse/disappear when no interval headers are assigned.
Note: This property takes effect, only if showIntervalHeaders
is also set to true
.
Default value is true
.
Gets current value of property showIntervalHeaders.
Determines whether the assigned interval headers are displayed. You can assign them using the intervalHeaders
aggregation of the PlanningCalendarRow.
Note: If you set both showIntervalHeaders
and showEmptyIntervalHeaders
properties to true
, the space (at the top of the intervals) where the assigned interval headers appear, will remain visible even if no interval headers are assigned.
Default value is true
.
Gets current value of property showRowHeaders.
Determines whether the column containing the headers of the PlanningCalendarRows is displayed.
Default value is true
.
Gets current value of property showWeekNumbers.
Determines if the week numbers are displayed.
Default value is false
.
Gets current value of property singleSelection.
Determines whether only a single row can be selected.
Default value is true
.
Gets content of aggregation specialDates.
Special days in the header calendar visualized as date range with a type.
Note: If one day is assigned to more than one type, only the first type will be used.
Gets current value of property startDate.
Determines the start date of the row, as a JavaScript date object. The current date is used as default.
Gets current value of property stickyHeader.
Determines whether the header area will remain visible (fixed on top) when the rest of the content is scrolled out of view.
The sticky header behavior is automatically disabled on phones in landscape mode for better visibility of the content.
Note: There is limited browser support, hence the API is in experimental state. Browsers that currently support this feature are Chrome (desktop and mobile), Safari (desktop and mobile) and Edge 41.
There are also some known issues with respect to the scrolling behavior and focus handling. A few are given below:
When the PlanningCalendar is placed in certain layout containers, for example the GridLayout
control, the column headers do not fix at the top of the viewport. Similar behavior is also observed with the ObjectPage
control.
This API should not be used in production environment.
Note: The stickyHeader
of the PlanningCalendar
uses the sticky
property of sap.m.Table
. Therefore, all features and restrictions of the property in sap.m.Table
apply to the PlanningCalendar
as well.
Default value is false
.
Gets current value of property viewKey.
Defines the key of the PlanningCalendarView
used for the output.
Note: The default value is set Hour
. If you are using your own views, the keys of these views should be used instead.
Default value is CalendarIntervalType.Hour
.
Gets content of aggregation views.
Views of the PlanningCalendar
.
Note: If not set, all the default views are available. Their keys are defined in sap.ui.unified.CalendarIntervalType.
Checks for the provided sap.m.PlanningCalendarRow
in the aggregation rows. and returns its index if found or -1 otherwise.
Param | Type | DefaultValue | Description |
---|---|---|---|
oRow | sap.m.PlanningCalendarRow |
The row whose index is looked for |
Checks for the provided sap.ui.unified.DateTypeRange
in the aggregation specialDates. and returns its index if found or -1 otherwise.
Param | Type | DefaultValue | Description |
---|---|---|---|
oSpecialDate | sap.ui.unified.DateTypeRange |
The specialDate whose index is looked for |
Checks for the provided sap.ui.core.Control
in the aggregation toolbarContent. and returns its index if found or -1 otherwise.
Param | Type | DefaultValue | Description |
---|---|---|---|
oToolbarContent | sap.ui.core.Control |
The toolbarContent whose index is looked for |
Checks for the provided sap.m.PlanningCalendarView
in the aggregation views. and returns its index if found or -1 otherwise.
Param | Type | DefaultValue | Description |
---|---|---|---|
oView | sap.m.PlanningCalendarView |
The view whose index is looked for |
Inserts a row into the aggregation rows.
Param | Type | DefaultValue | Description |
---|---|---|---|
oRow | sap.m.PlanningCalendarRow |
The row to insert; if empty, nothing is inserted |
|
iIndex | int |
The |
Inserts a specialDate into the aggregation specialDates.
Param | Type | DefaultValue | Description |
---|---|---|---|
oSpecialDate | sap.ui.unified.DateTypeRange |
The specialDate to insert; if empty, nothing is inserted |
|
iIndex | int |
The |
Inserts a toolbarContent into the aggregation toolbarContent.
Param | Type | DefaultValue | Description |
---|---|---|---|
oToolbarContent | sap.ui.core.Control |
The toolbarContent to insert; if empty, nothing is inserted |
|
iIndex | int |
The |
Inserts a view into the aggregation views.
Param | Type | DefaultValue | Description |
---|---|---|---|
oView | sap.m.PlanningCalendarView |
The view to insert; if empty, nothing is inserted |
|
iIndex | int |
The |
Removes all the controls from the aggregation rows.
Additionally, it unregisters them from the hosting UIArea.
Removes all the controls from the aggregation specialDates.
Additionally, it unregisters them from the hosting UIArea.
Removes all the controls from the aggregation toolbarContent.
Additionally, it unregisters them from the hosting UIArea.
Removes all the controls from the aggregation views.
Additionally, it unregisters them from the hosting UIArea.
Removes an ariaLabelledBy from the association named ariaLabelledBy.
Param | Type | DefaultValue | Description |
---|---|---|---|
vAriaLabelledBy | int sap.ui.core.ID sap.ui.core.Control |
The ariaLabelledBy to be removed or its index or ID |
Removes a row from the aggregation rows.
Param | Type | DefaultValue | Description |
---|---|---|---|
vRow | int string sap.m.PlanningCalendarRow |
The row to remove or its index or id |
Removes a specialDate from the aggregation specialDates.
Param | Type | DefaultValue | Description |
---|---|---|---|
vSpecialDate | int string sap.ui.unified.DateTypeRange |
The specialDate to remove or its index or id |
Removes a toolbarContent from the aggregation toolbarContent.
Param | Type | DefaultValue | Description |
---|---|---|---|
vToolbarContent | int string sap.ui.core.Control |
The toolbarContent to remove or its index or id |
Removes a view from the aggregation views.
Param | Type | DefaultValue | Description |
---|---|---|---|
vView | int string sap.m.PlanningCalendarView |
The view to remove or its index or id |
Selects or deselects all PlanningCalendarRows
.
Note: Selection only works if singleSelection
is set to false
.
Param | Type | DefaultValue | Description |
---|---|---|---|
bSelect | boolean |
Indicator showing whether |
Sets a new value for property appointmentHeight.
Determines the different possible sizes for appointments.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is Regular
.
Param | Type | DefaultValue | Description |
---|---|---|---|
sAppointmentHeight | sap.ui.unified.CalendarAppointmentHeight | Regular |
New value for property |
Sets a new value for property appointmentRoundWidth.
Defines rounding of the width CalendarAppoinment
Note: This property is applied, when the calendar interval type is day and the view shows more than 20 days
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is None
.
Param | Type | DefaultValue | Description |
---|---|---|---|
sAppointmentRoundWidth | sap.ui.unified.CalendarAppointmentRoundWidth | None |
New value for property |
Sets a new value for property appointmentsReducedHeight.
Determines whether the appointments that have only title without text are rendered with smaller height.
Note: On phone devices this property is ignored, appointments are always rendered in full height to facilitate touching.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is false
.
Param | Type | DefaultValue | Description |
---|---|---|---|
bAppointmentsReducedHeight | boolean | false |
New value for property |
Sets a new value for property appointmentsVisualization.
Determines how the appointments are visualized depending on the used theme.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is Standard
.
Param | Type | DefaultValue | Description |
---|---|---|---|
sAppointmentsVisualization | sap.ui.unified.CalendarAppointmentVisualization | Standard |
New value for property |
Sets a new value for property builtInViews.
Defines the list of predefined views as an array. The views should be specified by their keys.
The default predefined views and their keys are available at sap.m.PlanningCalendarBuiltInView.
Note: If set, all specified views will be displayed along with any custom views (if available). If not set and no custom views are available, all default views will be displayed. If not set and there are any custom views available, only the custom views will be displayed.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is []
.
Param | Type | DefaultValue | Description |
---|---|---|---|
sBuiltInViews | string[] | [] |
New value for property |
Setter for custom sorting of appointments. If not used, the appointments will be sorted according to their duration vertically. For example, the start time and order to the X axis won't change.
Param | Type | DefaultValue | Description |
---|---|---|---|
fnSorter | sap.m.PlanningCalendar.appointmentsSorterCallback |
Sets a new value for property firstDayOfWeek.
If set, the first day of the displayed week is this day. Valid values are 0 to 6 starting on Sunday. If there is no valid value set, the default of the used locale is used.
Note: this property will only have effect in the weekly – based views of the PlanningCalendar – Week view, and OneMonth view (on small devices).
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is -1
.
Param | Type | DefaultValue | Description |
---|---|---|---|
iFirstDayOfWeek | int | -1 |
New value for property |
Sets a new value for property groupAppointmentsMode.
Defines the mode in which the overlapping appointments are displayed.
Note: This property takes effect, only if the intervalType
of the current calendar view is set to sap.ui.unified.CalendarIntervalType.Month
. On phone devices this property is ignored, and the default value is applied.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is Collapsed
.
Param | Type | DefaultValue | Description |
---|---|---|---|
sGroupAppointmentsMode | sap.ui.unified.GroupAppointmentsMode | Collapsed |
New value for property |
Sets a new value for property height.
Specifies the height of the PlanningCalendar
. Note: If the set height is less than the displayed content, it will not be applied
When called with a value of null
or undefined
, the default value of the property will be restored.
Param | Type | DefaultValue | Description |
---|---|---|---|
sHeight | sap.ui.core.CSSSize |
New value for property |
Sets the associated legend.
Param | Type | DefaultValue | Description |
---|---|---|---|
oLegend | sap.ui.core.ID sap.ui.unified.CalendarLegend |
ID of an element which becomes the new target of this legend association; alternatively, an element instance may be given |
Sets a new value for property maxDate.
Defines the maximum date that can be displayed and selected in the PlanningCalendar
. This must be a JavaScript date object.
Note: If the maxDate
is set to be before the current minDate
, the minDate
is set to the first date of the month in which the maxDate
belongs.
When called with a value of null
or undefined
, the default value of the property will be restored.
Param | Type | DefaultValue | Description |
---|---|---|---|
oMaxDate | object |
New value for property |
Sets a new value for property minDate.
Defines the minimum date that can be displayed and selected in the PlanningCalendar
. This must be a JavaScript date object.
Note: If the minDate
is set to be after the current maxDate
, the maxDate
is set to the last date of the month in which the minDate
belongs.
When called with a value of null
or undefined
, the default value of the property will be restored.
Param | Type | DefaultValue | Description |
---|---|---|---|
oMinDate | object |
New value for property |
Sets a new value for property noDataText.
Defines the text that is displayed when no PlanningCalendarRows are assigned.
When called with a value of null
or undefined
, the default value of the property will be restored.
Param | Type | DefaultValue | Description |
---|---|---|---|
sNoDataText | string |
New value for property |
Sets a new value for property showDayNamesLine.
Determines whether the day names are displayed in a separate line or inside the single days.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is false
.
Param | Type | DefaultValue | Description |
---|---|---|---|
bShowDayNamesLine | boolean | false |
New value for property |
Sets a new value for property showEmptyIntervalHeaders.
Determines whether the space (at the top of the intervals), where the assigned interval headers appear, should remain visible even when no interval headers are present in the visible time frame. If set to false
, this space would collapse/disappear when no interval headers are assigned.
Note: This property takes effect, only if showIntervalHeaders
is also set to true
.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is true
.
Param | Type | DefaultValue | Description |
---|---|---|---|
bShowEmptyIntervalHeaders | boolean | true |
New value for property |
Sets a new value for property showIntervalHeaders.
Determines whether the assigned interval headers are displayed. You can assign them using the intervalHeaders
aggregation of the PlanningCalendarRow.
Note: If you set both showIntervalHeaders
and showEmptyIntervalHeaders
properties to true
, the space (at the top of the intervals) where the assigned interval headers appear, will remain visible even if no interval headers are assigned.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is true
.
Param | Type | DefaultValue | Description |
---|---|---|---|
bShowIntervalHeaders | boolean | true |
New value for property |
Sets a new value for property showRowHeaders.
Determines whether the column containing the headers of the PlanningCalendarRows is displayed.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is true
.
Param | Type | DefaultValue | Description |
---|---|---|---|
bShowRowHeaders | boolean | true |
New value for property |
Sets a new value for property showWeekNumbers.
Determines if the week numbers are displayed.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is false
.
Param | Type | DefaultValue | Description |
---|---|---|---|
bShowWeekNumbers | boolean | false |
New value for property |
Sets a new value for property singleSelection.
Determines whether only a single row can be selected.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is true
.
Param | Type | DefaultValue | Description |
---|---|---|---|
bSingleSelection | boolean | true |
New value for property |
Sets the given date as start date. The current date is used as default. Depending on the current view the start date may be adjusted (for example, the week view shows always the first weekday of the same week as the given date).
Param | Type | DefaultValue | Description |
---|---|---|---|
oDate | Date |
the date to set as |
Sets the stickyHeader property.
Param | Type | DefaultValue | Description |
---|---|---|---|
bStick | boolean |
Whether the header area will remain visible (fixed on top) |
Sets a new value for property viewKey.
Defines the key of the PlanningCalendarView
used for the output.
Note: The default value is set Hour
. If you are using your own views, the keys of these views should be used instead.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is CalendarIntervalType.Hour
.
Param | Type | DefaultValue | Description |
---|---|---|---|
sViewKey | string | CalendarIntervalType.Hour |
New value for property |