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.
Last updated