# Build a drag-and-drop calendar

You can create a calendar in Appfarm using Calendar Data Sources, iterating containers and drag and drop behaviors.

{% hint style="info" %}
A full example setup of a Calendar with Drag & Drop is available in our [Showroom](https://showroom-dev.appfarm.app/use-cases/calendar)! You may view a demo, as well as access the setup in Appfarm Create. If you do not have access, you may register [here](https://showroom.appfarm.app/sign-up).
{% endhint %}

### Calendar Data Source

A **Calendar Data Source** is a Data Source consisting of calendar objects given a *From Date*, *To Date,* and *Resolution*. For more information on this Data Source, view the article [Calendar Data Source](https://docs.appfarm.io/reference/apps/data/calendar-data-sources).

### Drag and Drop

To set up **Drag and Drop** you you need to specify the *Drop Area* in the view, and in this Drop Area you can specify *Draggable Objects*. For the *Drop Area* you can define an event handler for *On Drop*, while you can specify an *On Drag Start* event handler for the draggable object. In the action for the event handler, you can access the dragged elements contextual data and the contextual data in the drop area in *Object in Context*.

### Setting up a Calendar with Drag and Drop

Since a Calendar consists of a two-dimensional data grid with some unit vertical and some other unit horizontal it is convenient to use iterating structures to create these components. You can create a Calendar in many different ways, but an example of how this can be done is given below.

Take for instance a month's view of a Calendar. Here you can use a Calendar Data Source which consists of the weeks in a given month and a Calendar Data Source which contains the days in a given month. First, start by defining a header with weekday names. Then, to create the body you iterate over the weeks in the month vertically. A container has a setting that allows you to iterate over a Data Source instead of just displaying one container. Inside each week iterate over days in the week horizontally, and inside each day, iterate over the Data Source, for instance, activities, you want to display.

To set up **Drag and Drop** on the container you first set your Drop Areas, this is where you want to be able to drop *Activities*, and your draggable items, *Activities*. Furthermore, you need to at least specify what should happen when a user drops an *Activity* over a *Day*, which is done in the event handler *On Drop* on the drop area. You can also add an action *On Drag Start* on the draggable area if you need something to happen there as well.


---

# Agent Instructions: 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:

```
GET https://docs.appfarm.io/how-to/user-interface/drag-and-drop-calendar.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.