PlanningCalendar Displays rows with appointments for different entities (such as persons or teams) for the selected time interval. <h3>Overview</h3> You can use the <code>PlanningCalendar</code> 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 <code>PlanningCalendar</code> uses parts of the <code>sap.ui.unified</code> library. This library will be loaded after the <code>PlanningCalendar</code>, if it wasn't loaded first. This could lead to a waiting time when a <code>PlanningCalendar</code> is used for the first time. To prevent this, apps that use the <code>PlanningCalendar</code> should also load the <code>sap.ui.unified</code> library. <h3>Usage</h3> The <code>PlanningCalendar</code> has the following structure from top to bottom: <ul> <li>A toolbar where you can add your own buttons or other controls using the <code>toolbarContent</code> aggregation.</li> <li>A header containing a drop-down menu for selecting the {@link sap.m.PlanningCalendarView PlanningCalendarViews}, and navigation for moving through the intervals using arrows or selecting a specific interval with a picker. Custom views can be configured using the <code>views</code> 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.</li> <li>The rows of the <code>PlanningCalendar</code> that contain the assigned appointments. They can be configured with the <code>rows</code> aggregation, which is of type {@link sap.m.PlanningCalendarRow PlanningCalendarRow}.</li> </ul> Since 1.48 the empty space in the cell that is below an appointment can be removed by adding the <code>sapUiCalendarAppFitVertically</code> CSS class to the <code>PlanningCalendar</code>. Please note that it should be used only for a <code>PlanningCalendar</code> 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 <code>sapMPlanCalSuppressAlternatingRowColors</code> CSS class to the <code>PlanningCalendar</code>. <h3>Responsive behavior</h3> You can define the number of displayed intervals based on the size of the <code>PlanningCalendar</code> using the {@link sap.m.PlanningCalendarView PlanningCalendarView}'s properties. 1.34 sap.ui.core/Control Determines the start date of the row, as a JavaScript date object. The current date is used as default. Defines the key of the <code>PlanningCalendarView</code> used for the output. Note: The default value is set <code>Hour</code>. If you are using your own views, the keys of these views should be used instead. Determines whether only a single row can be selected. Specifies the width of the <code>PlanningCalendar</code>. Specifies the height of the <code>PlanningCalendar</code>. Note: If the set height is less than the displayed content, it will not be applied Determines whether the assigned interval headers are displayed. You can assign them using the <code>intervalHeaders</code> aggregation of the {@link sap.m.PlanningCalendarRow PlanningCalendarRow}. Note: If you set both <code>showIntervalHeaders</code> and <code>showEmptyIntervalHeaders</code> properties to <code>true</code>, the space (at the top of the intervals) where the assigned interval headers appear, will remain visible even if no interval headers are assigned. 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 <code>false</code>, this space would collapse/disappear when no interval headers are assigned. Note: This property takes effect, only if <code>showIntervalHeaders</code> is also set to <code>true</code>. Determines whether the column containing the headers of the {@link sap.m.PlanningCalendarRow PlanningCalendarRows} is displayed. Defines the text that is displayed when no {@link sap.m.PlanningCalendarRow PlanningCalendarRows} are assigned. Defines the mode in which the overlapping appointments are displayed. Note: This property takes effect, only if the <code>intervalType</code> of the current calendar view is set to <code>sap.ui.unified.CalendarIntervalType.Month</code>. On phone devices this property is ignored, and the default value is applied. 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. Determines how the appointments are visualized depending on the used theme. Defines the minimum date that can be displayed and selected in the <code>PlanningCalendar</code>. This must be a JavaScript date object. Note: If the <code>minDate</code> is set to be after the current <code>maxDate</code>, the <code>maxDate</code> is set to the last date of the month in which the <code>minDate</code> belongs. Defines the maximum date that can be displayed and selected in the <code>PlanningCalendar</code>. This must be a JavaScript date object. Note: If the <code>maxDate</code> is set to be before the current <code>minDate</code>, the <code>minDate</code> is set to the first date of the month in which the <code>maxDate</code> belongs. Determines whether the day names are displayed in a separate line or inside the single days. Determines if the week numbers are displayed. 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 {@link 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. 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 <code>GridLayout</code> control, the column headers do not fix at the top of the viewport. Similar behavior is also observed with the <code>ObjectPage</code> control. This API should not be used in production environment. Note: The <code>stickyHeader</code> of the <code>PlanningCalendar</code> uses the <code>sticky</code> property of <code>sap.m.Table</code>. Therefore, all features and limitations of the property in <code>sap.m.Table</code> apply to the <code>PlanningCalendar</code> as well. Fired if an appointment is selected. The selected appointment. The selected appointments in case a group appointment is selected. If set, the appointment was selected using multiple selection (e.g. Shift + single mouse click), meaning more than the current appointment could be selected. 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. Start date of the selected interval, as a JavaScript date object. Interval end date as a JavaScript date object. If set, the selected interval is a subinterval. Row of the selected interval. Fires when row selection is changed. Array of rows whose selection has changed. <code>startDate</code> was changed while navigating in the <code>PlanningCalendar</code>. The new value can be obtained using the <code>sap.m.PlanningCalendar#getStartDate()</code> method. <code>viewKey</code> was changed by user interaction. Fires when a row header is clicked. The ID of the <code>PlanningCalendarRowHeader</code> of the selected appointment. Note: Intended to be used as an easy way to get an ID of a <code>PlanningCalendarRowHeader</code>. Do NOT use for modification. The row user clicked on. Rows of the <code>PlanningCalendar</code>. Views of the <code>PlanningCalendar</code>. Note: If not set, all the default views are available. Their keys are defined in {@link sap.ui.unified.CalendarIntervalType}. 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. The content of the toolbar. Hidden, for internal use only. Hidden, for internal use only. Association to controls / IDs which label this control (see WAI-ARIA attribute aria-labelledby). Association to the <code>CalendarLegend</code> explaining the colors of the <code>Appointments</code>. Note: The legend does not have to be rendered but must exist, and all required types must be assigned. Returns an array containing the selected rows. If no row is selected, an empty array is returned. Selects or deselects all <code>PlanningCalendarRows</code>. Note: Selection only works if <code>singleSelection</code> is set to <code>false</code>. Indicator showing whether <code>PlanningCalendarRows</code> should be selected or deselected