> For the complete documentation index, see [llms.txt](https://docs.ninox.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ninox.com/builder-hub/visualize-and-organize-your-data/create-and-customize-pages/calendar-component.md).

# Calendar component

Use a **Calendar** component on a page to show records by date.

Before you add a Calendar component, make sure your table has:

* A field with a **Date** or **Appointment**
* A **Text** field that can be used as an identifier of the record
* Fields to filter the records if the calendar component should show only relevant ones

## **Add a Calendar component to a page**

{% stepper %}
{% step %}
**Open the Add tab**

In the **Settings** panel, open **Add**.
{% endstep %}

{% step %}
**Add Calendar**

Under **Views**, drag **Calendar** to the preferred location on the page.
{% endstep %}

{% step %}
**Configure the Calendar**

In the component **Settings**:

* Choose the source **Table**
* Pick the **Date** to display. That can also be an appointment field.
* Select fields under **Configure cards** for the **Title**, displayed **Image**, or card **Color**.
  {% endstep %}

{% step %}
**Check the schedule**

Review whether the expected records appear on the correct dates.\
Then drag the component to move it on the page.\
Use the resize handles to adjust its size.
{% endstep %}
{% endstepper %}

{% hint style="info" %}
To remove a component from a page, select the component, then click <i class="fa-trash-can">:trash-can:</i> **Delete component** in the blue menu above it.
{% endhint %}

## **Calendar component settings**

In **Settings**, you can define the basic component details:

* **Label** for the title shown on the component
* **Internal name** is filled automatically. Change it only if needed and carefully. When you script, you use **Internal name**, not **Label**.

Under **Behavior**, configure how the calendar works on the page:

* **Data point** to set up data retrieval. Use **Manual** to configure it with controls, or **Conditional** to use Ninox Script.\
  \
  If **Data point** is set to **Manual**:
* **Table** to choose the source table
* **Date** to choose which date or appointment field places records on the calendar
* **Annual recurring** if you display a date of this type, for example birthdays
* **Filter** to limit which records users can see with one or more conditions
* Click **Configure cards** to configure:
  * **Titel** to assign a field with text content for the calendar entry title
  * **Image** to display a thumb nail of a file field content in the entry
  * **Color** to distinguish categories at a glance by the card color. You can pick color or choice fields.
  * Select additional fields whose content you want to display on the card.
* **Calendar type** to choose the default view as **Month**, **Week**, or **Day**
* **Show calendar view selector** to show a dropdown for switching between month, week, and day views
* **Show search field** to show a search field at the top of the calendar\
  \
  If **Data point** is set to **Conditional**:
* **Logic** to add the Ninox Script that retrieves the data.\
  In this case, Ninox expects **key-value pairs** in curly braces **{...}**.

Under **Visibility**, choose how the component is shown on the page:

* **Visible** to show the component on the page
* **Hidden** to hide the component on the page
* **Conditional** to define a **Visibility condition** that controls when the component is shown or hidden

  Use **Conditional** when the calendar should appear only in specific cases.

  Build the condition based on **Fields** and **Tables**.

  This only affects what is shown on the page. It does not change records or permissions.<br>

{% hint style="info" %}
For the **Logic** under **Data point**, we suggest to use Ninox AI in the [Logic editor](/ninox-scripting/automate-your-workflows/explore-core-scripting-elements/logic-editor-features.md). It will support you to create a script for the required result or get an existing script explained.
{% endhint %}

**Let's take a look at an example:**

{% code lineNumbers="true" %}

```
for r in select customers do
	{
		date: r.visit_date
	}
end
```

{% endcode %}

Use this prompt to create the script with Ninox AI:\
"Please show me all visit dates of all customers."


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.ninox.com/builder-hub/visualize-and-organize-your-data/create-and-customize-pages/calendar-component.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.