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