Calendar

A Calendar Widget is a UI component that allows users to view and interact with calendar dates. It can be used for various purposes such as selecting dates, scheduling events, and displaying date-related information.

Adding Calendar Widget in Your Application

• Select the Calendar widget from the Add Widget Button or add it directly from the widget tree.

• Positioning: Place the Calendar widget where you want it in your layout. You can use the layout properties to adjust its position and size.

Key Elements of Calendar Widget

First Day:

• Defines the earliest date visible on the calendar.

• Specify the starting point of the calendar's date range.

Last Day:

• Specifies the latest date visible on the calendar.

• Set the end date of the calendar's date range.

Focused Day

• Represents the currently focused date in the calendar view.

• Controls which date is centered or highlighted when the calendar is initially displayed.

Current Day:

• Indicates the currently selected date on the calendar.

Calendar Format:

• Defines the format of the calendar view (e.g., month, week, two-week).

• Allows users to switch between different views or granularities of time.

Customization

Selection Mode

• Controls how dates are selected within the calendar.

• Options:

  • Single Date: Allows selecting only one date at a time.

  • Range: Enables selecting a range of dates.

Headers Visibility

• Determines whether the calendar's headers (month and year) are visible.

• Customize to show or hide headers based on design preferences or space constraints.

Days of Week Visibility

• Controls the visibility of the row displaying days of the week (e.g., Sunday, Monday, ...).

• Toggle to show or hide the row depending on user interface requirements.

Row Height

• Adjusts the height of each row within the calendar grid.

Days of Week Height

• Sets the height of the row displaying days of the week.

Styling:

Header Styling

• Customize the style of the header that displays the current month and year.

• Adjust text color, font size, background color, and alignment.

Days of Week Style

• Customize the style of the row displaying days of the week (e.g., Sunday, Monday, ...).

• Adjust text color, font size, background color, and alignment.

Calendar Style

• Customize the overall style of the calendar grid and its elements.

• Adjust background color, border radius, shadow effects, and more

Page Jumping Enabled

• Enable navigation to quickly jump between months or weeks.

• Provides users with a fast way to navigate through the calendar.

Full Viewport

• Expand the calendar to fill the entire available screen space.

• Maximizes visibility and usability, especially on larger screens.

Week Number Visibility

• Display week numbers alongside the calendar dates.

• Helps users quickly identify and navigate to specific weeks.