Skip to main content

CalendarLegend

The ui5-calendar-legend component is designed for use within the ui5-calendar to display a legend. Each ui5-calendar-legend-item represents a unique date type, specifying its visual style and a corresponding textual label.

ES6 Module Import​

import "@ui5/webcomponents/dist/CalendarLegend.js";

Basic Sample​

Properties​

hideToday​

DescriptionHides the Today item in the legend.
Typeboolean
Defaultfalse

hideSelectedDay​

DescriptionHides the Selected day item in the legend.
Typeboolean
Defaultfalse

hideNonWorkingDay​

DescriptionHides the Non-Working day item in the legend.
Typeboolean
Defaultfalse

hideWorkingDay​

DescriptionHides the Working day item in the legend.
Typeboolean
Defaultfalse

Slots​

default​

DescriptionDefines the items of the component.
TypeArray<CalendarLegendItem>

Events​

No events available for this component.

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.

More Samples​

CalendarLegendItem Types​

Hide CalendarLegendItems​

By default, the CalendarLegend shows Today, SelectedDay, WorkingDay and NonWorkingDay items. However, you can hide them as shown in the sample.