Getting started

Once you purchase this library, the calendar will become accessible within your project's components

The Custom Calendar with Event Markers is a natively built FlutterFlow component designed to integrate seamlessly into your application. It does not require additional dependencies or custom code, ensuring compatibility with future updates to FlutterFlow. This component is fully validated and functional from the start, even without configuring any parameters. It provides a reliable "plug-and-play" experience, and its behavior can be further tailored using the customizable parameters described in the Parameters section.

Calendar variables

The calendar includes three main variables that are automatically accessible in any view where the calendar is implemented: navigationDate, selectedDate, and selectedEndDate. These variables are fundamental for interacting with the calendar's functionality.

Access these variables via pageState > customCalendar > variable

Access these variables via pageState > customCalendar > variable

It's crucial to keep the "Update page on changes" option enabled. This allows the page to The "Update page on changes" option must remain disabled to avoid layout issues. Previously, this option needed to be enabled to allow the page to react when a user selected a date on The "Update page on changes" option must remain disabled to avoid layout issues. The logic for updating the page (e.g., when a date is selected) has been moved to the component's internal actions, ensuring real-time updates without enabling this option.

Note: If you enable "Update page on changes," you may encounter an error like this:

setState() or markNeedsBuild() called during build.
This DefaultProfileWidget widget cannot be marked as needing to build
because the framework is already in the process of building widgets...
Always keep 'Update Page on Changes' turned on to ensure the page reacts to user interactions with the calendar

navigationDate

navigationDate is a DateTime variable that represents the first visible day in the calendar's current view.

  • In monthly view: Always the first day of the displayed month (e.g., 2025-03-01 for March), even if a date is selected.

  • In weekly/bi-weekly view:

    • Default behavior: Reflects the first visible day in the first row (e.g., 2025-03-03).

    • After selecting a date: Updates to match selectedDate and retains this value until the calendar view changes (e.g., navigating to another week/month).

    • After view change: Resets to the first visible day of the new view.

Use this variable to dynamically generate days, optimize queries, or build custom logic based on the visible period.

Key note: Date selection temporarily affects navigationDate only in non-monthly modes. In monthly view, it remains fixed to the start of the month, regardless of selections.

selectedDate

selectedDate is a DateTime variable that holds the date selected by the user. Whenever a user taps on a date in the calendar, this variable updates to reflect their choice.

  • If the calendar is in single date mode, selectedDate represents the selected date.

  • In date range mode, selectedDate represents the start of the selected range.

This variable captures the user's current selection in real-time. It can be used to filter queries related to the selected date, such as retrieving a list of events corresponding to the date chosen by the user.

selectedEndDate

selectedEndDate is a DateTime variable relevant when date range mode is enabled. It stores the end of the selected date range.

  • In date range mode, selectedDate is the start date, and selectedEndDate is the end date.

  • If date range mode is disabled, selectedEndDate mirrors the value of selectedDate.

Internal Variables Overview

The Custom Calendar includes some internal variables that are primarily used to manage its functionality. While they are not intended for direct use, you might find them helpful in specific cases for advanced custom logic.

Note: These variables are part of the calendar's internal logic and aren't meant for typical use. While they could be useful for specific customizations, their functionality is primarily focused on ensuring the calendar operates smoothly.

  • index: Tracks the position of the calendar as the user navigates between months.

  • isSelectingStartDate: Indicates whether the user is selecting the start or end date when date range mode is active.

  • selectionMode: Determines the type of selection currently active, such as selecting a year, month, or day.

  • daySelectionMode: Defines the calendar's current display mode (weekly, bi-weekly, or monthly).

PreviousWelcome to the Custom Calendar with Event Markers! 🎉NextParameters

Last updated