Calendar Formatting Options
The Calendar Formatting Options in the Date Filter allow users to customize the appearance of various calendar elements. These settings offer options to style the calendar's day view, month view, and header section. Let’s explore each of these in detail below.
Calendar Header Style:
Supported in: ❌Slider Calendar✔️Year ✔️Multi Year ✔️Month ✔️Month Range ✔️Week ✔️Day
The Calendar Header Style feature enables users to customize the appearance of the calendar header in the Date Filter.
How to Configure and Use Calendar Header Style
Navigate to the Format Pane:
Date Filter -> Calendar Header Style.
Customize the following options, with settings specific to different calendar modes:
Header Background Color: Set the background color for the calendar header label where the year or month heading is displayed. This Applies to all calendar modes.
Header Font Color: Choose the text color for the calendar header labels showing the year or month. This Applies to all calendar modes.
Font Size: Customize the font size of all the header fonts using this option.
Year Item Background Color: Customize the background color for year items in the multi-year calendar mode.
Year Item Font Color: Choose the text color for the year items in multi-year mode.
Selected Year Item Background Color: Select the background color for a selected year item in the multi-year calendar mode.
Selected Year Item Font Color: Customize the text color for a selected year item in the multi-year calendar mode.
Calendar Month Style:
Supported in: ❌Slider Calendar✔️Year ✔️Multi Year ❌Month ❌Month Range ❌Week ❌Day
The Calendar Month Style feature enables users to customize the appearance of the calendar month view.
How to Configure and Use Calendar Month Style
Navigate to the Format Pane:
Date Filter -> Calendar Month Style.
Customize the following color settings, each of which applies to Month, Year and Multiyear calendar modes:
Quarter Background Color: Choose the background color for quarters displayed in the calendar mode where months are shown. This applies to Year and Multiyear calendar modes.
Quarter Font Color: Set the text color for quarters in calendar mode where months are displayed. This applies to Year and Multiyear calendar modes.
Selected Quarter Background Color: Select the background color for a selected quarter in the calendar. This applies to Year and Multiyear calendar modes.
Selected Quarter Font Color: Choose the text color for a selected quarter in the calendar. This applies to Year and Multiyear calendar modes.
Month Background Color: Customize the background color for months in the calendar. This applies to Month, Year and Multiyear calendar modes.
Month Font Color: Set the text color for months in the calendar. This applies to Month, Year and Multiyear calendar modes.
Selected Month Background Color: Choose the background color for a selected month in calendar mode. This applies to Month, Year and Multiyear calendar modes.
Selected Month Font Color: Select the text color for a selected month in calendar mode. This applies to Month, Year and Multiyear calendar modes.
Quarter Font Size: Allows users to adjust the font size for quarter labels in Year, Month, and Multi-Year calendar modes.
Month Font Size: Allows users to adjust the font size for month labels in Year, Month, and Multi-Year calendar modes.
Calendar Day Styles:
Supported in: ❌Slider Calendar ❌Year ❌Multi Year ✔️Month✔️Month Range ❌Week ❌Day
The Calendar Day Style feature allows users to customize the color settings for various elements in the date view across all calendar modes.
How to Configure and Use Calendar Day Style
Navigate to the Format Pane section:
Date Filter -> Calendar Month Style.
The following color settings are available, with options for selecting colors via a dropdown list that opens a pop-up color picker:
Day Header Background Color: Customize the background color of the day headers. This applies to all Calendar modes.
Day Header Color: Set the color of the text in the day headers. This applies to all Calendar modes.
Days Background Color: Choose the background color for the days in the days view of the calendar. This applies to Month Range and Month calendar modes.
Days Font Color: Set the text color for the days in the days view of the calendar. This applies to Month Range and Month calendar modes.
Selected Days Background Color: Customize the background color for selected days in the days view of the calendar. This applies to Month Range and Month calendar modes.
Selected Days Font Color: Set the text color for selected days in the days view of the calendar. This applies to Month Range and Month calendar modes.
Disabled Days Background Color: Choose the background color for disabled days (days that are not selectable) in the days view of the calendar. This applies to Month Range and Month calendar modes.
Days Font Size: The Month Font Size option allows users to customize the day font size in Month and Month Range calendar modes for improved readability.
Calendar Week Styles:
Supported in: ❌Slider Calendar ❌Year ❌Multi Year ❌Month ❌Month Range ✔️Week ❌Day
The Calendar Week Mode Style feature allows users to customize the color settings for various elements in the week calendar mode.
How to Configure and Use Calendar Week Style
Navigate to the Format Pane section:
Date Filter -> Calendar Month Style.
The following color settings are available, with options for selecting colors via a dropdown list that opens a pop-up color picker:
Font Color: Set the text color for the week in the week view of the calendar.
Background Color: Choose the background color for the weeks in the week calendar mode.
Header Font Color: Allows users to customize the font color of the week number header for better visibility.
Header Background Color: Allows users to customize the background color of the week number header for enhanced contrast and styling.
Calendar Control Style:
Supported in: ❌Slider Calendar✔️Year ✔️Multi Year ✔️Month ✔️Month Range ✔️Week ✔️Day
The Calendar Control Style option allows users to customize the formatting of calendar control options to enhance the appearance and navigation experience.
How to Configure and Use Calendar Control Style
Navigate to the Format Pane section:
Date Filter -> Calendar Month Style.
The following color settings are available, with options for selecting colors via a dropdown list that opens a pop-up color picker:
Font Size: Adjust the font size of calendar control items for improved readability.
Header Font Color: Customize the font color of the calendar control header.
Button Color: Set the default color for calendar control buttons.
Selected Button Color: Customize the color of Calendar control buttons when selected.
Last updated