# Getting started

<figure><img src="https://4077676698-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fuw0hjj8Sfh4inG0ORgRV%2Fuploads%2FtBGYSqw3qfcBAxPMMQws%2FNexSnap-Jan-04-2025_05-26-16_PM.png?alt=media&#x26;token=6b965af2-f581-490c-9ec5-f94c0f4b845b" alt=""><figcaption><p>Once you purchase this library, the calendar will become accessible within your project's components</p></figcaption></figure>

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: <mark style="color:purple;">`navigationDate`</mark>, <mark style="color:blue;">`selectedDate`</mark>, and <mark style="color:blue;">`selectedEndDate`</mark>. These variables are fundamental for interacting with the calendar's functionality.

{% hint style="info" %}
Access these variables via pageState > customCalendar > variable
{% endhint %}

<figure><img src="https://4077676698-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fuw0hjj8Sfh4inG0ORgRV%2Fuploads%2FFJqcmEDc6Q5QycmpfN2e%2FNexSnap-Jan-04-2025_05-49-58_PM.png?alt=media&#x26;token=b5ee4851-fc0a-4876-8bc5-e210f460b6e0" alt=""><figcaption><p>Access these variables via pageState > customCalendar > variable</p></figcaption></figure>

{% hint style="danger" %}
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.
{% endhint %}

**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...
```

<figure><img src="https://4077676698-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fuw0hjj8Sfh4inG0ORgRV%2Fuploads%2FHX7ONWIpxhAmJlbTUgeS%2FUpdate%20page%20on%20changes%20disabled.png?alt=media&#x26;token=bb54d138-7511-449b-947b-fdaf7df7c7b3" alt=""><figcaption><p>Always keep 'Update Page on Changes' turned on to ensure the page reacts to user interactions with the calendar</p></figcaption></figure>

### <mark style="color:purple;">navigationDate</mark>

<mark style="color:purple;">`navigationDate`</mark> 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.

***

### <mark style="color:blue;">selectedDate</mark>

<mark style="color:blue;">`selectedDate`</mark> 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**, <mark style="color:blue;">`selectedDate`</mark> represents the selected date.
* In **date range mode**, <mark style="color:blue;">`selectedDate`</mark> 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.

***

### <mark style="color:blue;">selectedEndDate</mark>

<mark style="color:blue;">`selectedEndDate`</mark> is a `DateTime` variable relevant when **date range mode** is enabled. It stores the end of the selected date range.

* In date range mode, <mark style="color:blue;">`selectedDate`</mark> is the start date, and <mark style="color:blue;">`selectedEndDate`</mark> is the end date.
* If date range mode is disabled, <mark style="color:blue;">`selectedEndDate`</mark> mirrors the value of <mark style="color:blue;">`selectedDate`</mark>.

### 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.

{% hint style="warning" %}
**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.
{% endhint %}

* **`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).