Parameters

The Custom Calendar provides a variety of parameters to configure its behavior and appearance, making it adaptable to different use cases and design preferences. These parameters allow you to control everything from the calendar's initial display mode to its colors, event markers, and date selection logic.

In this section, you'll find a detailed explanation of each parameter, ensuring you can effortlessly integrate and customize the calendar to suit your project's needs. Whether you're looking to adjust styles or fine-tune functionality, these options make the process intuitive and flexible.

List of available parameters

This section explains all the available parameters for customizing the calendar's behavior and appearance. These parameters allow you to modify various aspects of the calendar according to your needs.

eventsDates

• Type: List of DateTime

• Description: A list of DateTime objects representing the dates with events. These DateTime values can come from any source, such as Supabase, Firestore, a variable, or the response from an API call. The calendar will automatically count how many events occur on each date and display a count next to the date. This helps in visualizing multiple events on the same day.

hideEventsCount

• Type: Boolean

• Description: If set to true, it hides the event count number next to the dates, but still shows a small circle on the days with events. This is useful when you want to indicate that a day has events but prefer not to display the count of those events.

startWeekOnMonday

• Type: Boolean

• Description: Determines whether the week starts on Monday. If set to true, the calendar will display weeks starting from Monday instead of Sunday.

dimWeekends

• Type: Boolean

• Description: If true, weekends (Saturday and Sunday) will be visually dimmed or less prominent. This helps focus on weekdays if required.

backgroundColor

• Type: Color

• Description: Sets the background color of the calendar. You can choose any color you like to match your app’s theme.

mainColor

• Type: Color

• Description: Specifies the primary color for calendar elements, such as the selected date.

textColor

• Type: Color

• Description: This is the color for the text displayed on the calendar, including date numbers and day names.

eventMarkerColor

• Type: Color

• Description: Sets the color of event markers displayed on dates that have events, helping them stand out.

daysOfWeekColor

• Type: Color

• Description: Defines the color of the days of the week labels (e.g., "Mon", "Tue", etc.).

displayDivider

• Type: Boolean

• Description: If true, it will display a divider between the days of the week row and the days of the month. This provides a clearer visual distinction between them, and you can choose to enable or disable it according to your preference.

headerBackgroundColor

• Type: Color

• Description: Sets the background color of the header section of the calendar, where the month and year are displayed.

headerTextColor

• Type: Color

• Description: Defines the color of the text in the header section, including month and year labels.

startDate

• Type: DateTime

• Description: Sets the initial preselected date when the calendar loads. If not specified, the current date will be used. This is important for initializing the calendar view, setting the default selected date, and preventing null values.

onDateSelectionAction

• Type: Action

• Description: This parameter allows you to define actions that will be executed whenever the user selects a date on the calendar. You can use it to trigger any custom behavior, such as navigating to another page, updating a modal, or running other actions based on the selected date.

dateRangeMode

• Type: Boolean

• Description: Enables the date range selection mode. When set to true, users can select a range of dates. The selected start date and end date will be saved in the selectedDate and selectedEndDate variables.

dateRangeColor

• Type: Color

• Description: Sets the background color of the dates within the selected date range. This helps visually highlight the selected range by changing the background color of the dates inside the range, making it easy for users to see the chosen period.

dateRangeTextColor

• Type: Color

• Description: Defines the text color for the dates within the selected date range. For example, if a user selects a range from March 1 to March 15, this color will apply to the text of the dates from March 2 to March 14 (the dates inside the range, excluding the start and end dates).

onWeeklyViewButtonLabel

• Type: String

• Description: Defines the text displayed on the button when the weekly view mode is active. This label will show the current active mode (weekly), and when clicked, it will switch to the biweekly view. You can customize the label to fit your language or application needs.

onBiWeeklyViewButtonLabel

• Type: String

• Description: Defines the text displayed on the button when the biweekly view mode is active. This label will show the current active mode (biweekly), and when clicked, it will switch to the monthly view. You can customize the label to fit your language or application needs.

onMonthlyViewButtonLabel

• Type: String

• Description: Defines the text displayed on the button when the monthly view mode is active. This label will show the current active mode (monthly), and when clicked, it will switch to the weekly view. You can customize the label to fit your language or application needs.

calendarViewMode

• Type: Integer

• Description: Defines the initial display mode of the calendar when it is first loaded. By default, this sets whether the calendar will show in weekly, biweekly, or monthly view:

  • 1: Weekly View

  • 2: Bi-Weekly View

  • 3: Monthly View

  Any other value will cause the calendar to fail, so it is important to set this parameter correctly.

hideViewModeButton

• Type: Boolean

• Description: If set to true, it hides the button that allows the user to switch between weekly, bi-weekly, and monthly views. This is useful if you want to restrict users to a specific view mode.

hideMonthAndYearSelection

• Type: Boolean

• Description: If set to true, it hides the navigation arrow that allows users to switch between the day selection, month selection, and year selection. With this option enabled, the user will remain in the day selection mode, preventing them from navigating to the month or year selection views.

selectedDateTextColor

• Type: Color

• Description: Defines the text color for the day within the selected date (or range end date, if applicable). Use this parameter to customize the appearance of the selected date's text in the calendar.

languageCode

• Type: String

• Description: Sets the general language of the calendar. This parameter accepts a language code (e.g., "es" for Spanish, "en" for English) and adjusts the calendar's text accordingly. To ensure consistency with your app’s localization settings, pass the value from "Localization > Current Language Code".