Build a drag-and-drop calendar

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

A full example setup of a Calendar with Drag & Drop is available in our Showroom! You may view a demo, as well as access the setup in Appfarm Create. If you do not have access, you may register here.

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.

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.