*[Layers](build-applications/app-editor/layers.md)

*[Visual Components](build-applications/app-editor/visual-components/README.md)

*[Common Component Settings](build-applications/app-editor/visual-components/common-component-settings.md)

*[File upload](build-applications/app-editor/visual-components/file-upload.md)

*[Charts and graphs](build-applications/app-editor/visual-components/charts-and-graphs.md)

*[Image](build-applications/app-editor/visual-components/image.md)

*[List View](build-applications/app-editor/visual-components/list-view.md)

*[Drawer](build-applications/app-editor/visual-components/drawer.md)

*[Google Maps](build-applications/app-editor/visual-components/google-maps.md)

*[Table](build-applications/app-editor/visual-components/table.md)

*[Messages / Toast](build-applications/app-editor/visual-components/messages-toast.md)

*[Calendar](build-applications/app-editor/visual-components/calendar.md)

*[Dashboard & Reporting](build-applications/app-editor/visual-components/dashboard-and-reporting/README.md)

*[Table](build-applications/app-editor/visual-components/dashboard-and-reporting/table.md)

*[Charts and graphs](build-applications/app-editor/visual-components/dashboard-and-reporting/charts-and-graphs.md)

*[Google Maps](build-applications/app-editor/visual-components/dashboard-and-reporting/google-maps.md)

*[Layout & Navigation](build-applications/app-editor/visual-components/layout-and-navigation/README.md)

*[List View](build-applications/app-editor/visual-components/layout-and-navigation/list-view.md)

*[Drawer](build-applications/app-editor/visual-components/layout-and-navigation/drawer.md)

*[Modal](build-applications/app-editor/visual-components/layout-and-navigation/modal.md)

*[Navigation](build-applications/app-editor/visual-components/layout-and-navigation/navigation.md)

*[Cascader](build-applications/app-editor/visual-components/layout-and-navigation/cascader.md)

*[Tree / Tree Select](build-applications/app-editor/visual-components/layout-and-navigation/tree-tree-select.md)

*[Link](build-applications/app-editor/visual-components/layout-and-navigation/link.md)

*[Floating Button](build-applications/app-editor/visual-components/layout-and-navigation/floating-button.md)

*[Text](build-applications/app-editor/visual-components/layout-and-navigation/text.md)

*[Step Control](build-applications/app-editor/visual-components/layout-and-navigation/step-control.md)

*[Page Layout](build-applications/app-editor/visual-components/layout-and-navigation/page-layout.md)

*[Content Card](build-applications/app-editor/visual-components/layout-and-navigation/content-card.md)

*[Tabbed Container](build-applications/app-editor/visual-components/layout-and-navigation/tabbed-container.md)

*[Data Collection & Forms](build-applications/app-editor/visual-components/data-collection-and-forms/README.md)

*[Form](build-applications/app-editor/visual-components/data-collection-and-forms/form.md)

*[Input Field Types](build-applications/app-editor/visual-components/data-collection-and-forms/input-field-types.md)

*[JSON Schema Form](build-applications/app-editor/visual-components/data-collection-and-forms/json-schema-form.md)

*[Meeting & Collaboration](build-applications/app-editor/visual-components/meeting-and-collaboration.md)

*[Project Management](build-applications/app-editor/visual-components/project-management.md)

*[Calendar & Scheduling](build-applications/app-editor/visual-components/calendar-and-scheduling/README.md)

*[Calendar](build-applications/app-editor/visual-components/calendar-and-scheduling/calendar.md)

*[Document & File Management](build-applications/app-editor/visual-components/document-and-file-management/README.md)

*[File upload](build-applications/app-editor/visual-components/document-and-file-management/file-upload.md)

*[Item & Signature Handling](build-applications/app-editor/visual-components/item-and-signature-handling.md)

*[Multimedia & Animation](build-applications/app-editor/visual-components/multimedia-and-animation/README.md)

*[Image](build-applications/app-editor/visual-components/multimedia-and-animation/image.md)

*[Integration & Extension](build-applications/app-editor/visual-components/integration-and-extension.md)

*[Legacy & Deprecated](build-applications/app-editor/visual-components/legacy-and-deprecated.md)

*[Option lists](build-applications/app-editor/option-lists.md)

*[Date handling](build-applications/app-editor/date-handling.md)

*[Use Markdown](build-applications/app-editor/use-markdown.md)

The Calendar Component is a feature-rich way to organize and edit date and calendar entries in Lowcoder. To offer the best experience for Calendars, we integrated the[fullcalendar.io](https://fullcalendar.io/docs) Project.

You can refer to the documentation like this:[https://fullcalendar.io/docs](https://fullcalendar.io/docs)

<figure><imgsrc="../../../../.gitbook/assets/Component Calendar Overview.png"alt=""><figcaption></figcaption></figure>

In the "Basic" section, you can bind your Datasource to feed the calendar with your existing Events.

The JSON structure is an array of objects, where each object represents a single event on the calendar. Here's a breakdown of what each key in the object means:

***`id`**: A unique identifier for the event. This is a string that helps distinguish each event from others.

***`title`**: The name or title of the event. This is a brief description that will be displayed on the calendar to represent the event.

***`start`**: The start date and time of the event. This should be in the format "YYYY-MM-DD HH:MM:SS". For all-day events, you can omit the time part and only provide the date.

***`end`**: The end date and time of the event, following the same format as the start date. For all-day events that last multiple days, this indicates the end date.

***`color`**: (Optional) A string representing the color code (in hexadecimal format) to be used for the event's display on the calendar. This allows for visual differentiation between different types of events.

***`allDay`**: (Optional) A boolean value (`true` or`false`) indicating whether the event lasts all day. If`true`, the event will be shown as an all-day event, possibly in a different section of the calendar or styled differently. If this key is omitted, the event is treated as having specific start and end times.

As soon as a user edits or adds a new Event, the data object is updated so that you can persist this change on your chosen Datasource.&#x20;

Based on the Setting "Editable" you can allow your Application Users to add or edit own Calendar Events. A small modal opens and allows the entry of Event information.

To display the Premium Views (Resource Timeline and Resource Grid), you must purchase a License at[https://fullcalendar.io/purchase](https://fullcalendar.io/purchase) per Developer Seat. This License is then valid for all App Users in the Role "Member / Viewer".

You can enter the License Key in the Property Settings Menu. As soon as you enter the License Key, the Premium Views will be available at the Dropdown "Default View".

These properties are accessible in\{{\}} notations, as well as in JavaScript Queries.&#x20;

<table><thead><tr><thwidth="168.40234375">Property Name</th><thwidth="144.2265625">Type</th><th>Description</th></tr></thead><tbody><tr><td>allEvents</td><td>Array</td><td>An array of Objects containing list of all the Events on a Calendar component</td></tr><tr><td>events</td><td>Array</td><td></td></tr><tr><td>hidden</td><td>Boolean</td><td>Returns True or False based on whether the Form component is hidden or not</td></tr><tr><td>resources</td><td>Array</td><td></td></tr><tr><td>resourcesEvents</td><td>Array</td><td></td></tr><tr><td>toDeletedEvents</td><td>Object</td><td></td></tr><tr><td>toInsertedEvents</td><td>Object</td><td>An Object to be Inserted as a new Event in the Calendar </td></tr><tr><td>toUpdatedEvents</td><td>Object</td><td>An Object to be updated as an Event in the Calendar</td></tr></tbody></table>

Events give you the ability to trigger further actions (with Event-Handlers).

<table><thead><tr><thwidth="175.01953125">Event Name</th><thwidth="442.3671875">Description</th></tr></thead><tbody><tr><td>Change</td><td>When a User make any"changes" to the Calendar component.</td></tr><tr><td>Double Click</td><td>When a User "Double Click" on an Event or a Time slot.</td></tr><tr><td>Drag</td><td>When a User "Drags" an Event.</td></tr><tr><td>Drop</td><td>When a User "Drops" an Event.</td></tr></tbody></table>

You have the capability to engage with components via their respective methods, which can be accessed by their designated names within any segment where JavaScript is utilized. Additionally, these components can be activated through the 'Control Component' action, which is triggered in response to specific events.

<table><thead><tr><th width="247.83984375">Method Name</th><th width="446.3984375">Description</th></tr></thead><tbody><tr><td>clearDeletedEvents</td><td>Clears the data in the property toDeletedEvent</td></tr><tr><td>clearInsertedEvents</td><td>Clears the data in the property toInsertedEvent</td></tr><tr><td>clearUpdatedEvents</td><td>Clears the data in the property toUpdatedEvent</td></tr><tr><td>setResources</td><td>Set the data for the property Resources</td></tr><tr><td>clearResources</td><td>Clear the data for the property Resources</td></tr><tr><td>resetResources</td><td>Reset the data for the property Resources</td></tr><tr><td>setDayGridDayView</td><td>Switches the Calendar view to 'Day Grid Day', displaying a Single day in a grid layout that includes all events for that day.</td></tr><tr><td>setDayGridWeeklyView</td><td>Switches the Calendar view to 'Day Grid Week', where the days of the week are displayed as Columns and Events are laid out in Grid form.</td></tr><tr><td>setDayGridMonthlyView</td><td>Switches the Calendar view to 'Day Grid Month', presenting the entire month in a grid with events displayed on their respective days.</td></tr><tr><td>setListWeekView</td><td>Switches the Calendar view to 'List Week', which provides a list-style overview of all the events happening throughout the week.</td></tr><tr><td>setMultiMonthYearView</td><td>Switches the Calendar view to 'Multi Month Year', showing multiple months at once, allowing for long-term planning and overview.</td></tr><tr><td>setResourceTimeGridDayView</td><td>Switches the Calendar view to 'Resource Time Grid Day', which displays resources along the vertical axis and the hours of the Single day along the horizontal axis.</td></tr><tr><td>setResourceTimelineDayView</td><td>Switches the Calendar view to 'Resource Timeline Day', showing Events against a timeline for a Single day, segmented by Resources.</td></tr><tr><td>setTimeGridDayView</td><td>Switches the Calendar view to 'Time Grid Day', which shows a detailed hourly schedule for a Single day.</td></tr><tr><td>setTimeGridWeekView</td><td>Switches the Calendar view to 'Day Grid Week', where the days of the week are displayed as Columns and Events are laid out in Grid form.</td></tr></tbody></table>

The core feature of this integration is the seamless combination of Google Geomaps with eCharts overlays. Google Geomaps provides a robust and familiar mapping interface, known for its detailed and accurate geographical data. By overlaying eCharts, Lowcoder enables the addition of rich, interactive data visualizations directly onto these maps. This overlay capability is not just about static data representation; it supports dynamic, real-time data updates, making it ideal for applications that require up-to-the-minute information, such as traffic monitoring, weather updates, or tracking movements in logistics.

<figure><imgsrc="../../../.gitbook/assets/Screenshot 2023-10-27 at 22.07.19.png"alt=""><figcaption><p>Distribution of Lowcoder Users worldwide (10.2023)</p></figcaption></figure>

<figure><imgsrc="../../../../.gitbook/assets/Screenshot 2023-10-27 at 22.07.19.png"alt=""><figcaption><p>Distribution of Lowcoder Users worldwide (10.2023)</p></figcaption></figure>

Lowcoder ensures that the data displayed in the eCharts overlay is not only current but can also be updated in real-time with the[Stream Query](../../../connect-your-data/data-sources-in-lowcoder/websocket-datasource.md). This is crucial for scenarios where timely data is essential for decision-making. Users can see changes as they happen, providing an interactive and engaging experience.

Lowcoder ensures that the data displayed in the eCharts overlay is not only current but can also be updated in real-time with the[Stream Query](../../../../connect-your-data/data-sources-in-lowcoder/websocket-datasource.md). This is crucial for scenarios where timely data is essential for decision-making. Users can see changes as they happen, providing an interactive and engaging experience.

The eCharts overlay on Google Geomaps in Lowcoder also offers a high degree of customization and interactivity. Users can zoom in and out, pan across different regions, and interact with the data points on the map. This interactivity is enhanced with tooltips, clickable elements, and various chart types like heatmaps, scatter plots, or line graphs, all geo-referenced and layered over the map.

As the first step, place a new Chart from the right Components panel on the canvas.

<figure><imgsrc="../../../.gitbook/assets/App Editor GeoMaps use 1.png"alt=""><figcaption></figcaption></figure>

<figure><imgsrc="../../../../.gitbook/assets/App Editor GeoMaps use 1.png"alt=""><figcaption></figcaption></figure>

Now you can select in the Component Properties the type "Map"

<figure><imgsrc="../../../.gitbook/assets/App Editor GeoMaps Select Map.png"alt=""><figcaption></figcaption></figure>

<figure><imgsrc="../../../../.gitbook/assets/App Editor GeoMaps Select Map.png"alt=""><figcaption></figcaption></figure>

You can use the Properties "Zoomlevel, Longitude, and Latitude" to define the first impression of the GeoMap when the App is displayed.

<figure><imgsrc="../../../.gitbook/assets/Google Maps APIs 0.png"alt=""><figcaption></figcaption></figure>

<figure><imgsrc="../../../../.gitbook/assets/Google Maps APIs 0.png"alt=""><figcaption></figcaption></figure>

To display only the Map and use the JavaScript API, "Map Embed API" and "Maps JavaScript API" need to be activated.

<figure><imgsrc="../../../.gitbook/assets/Google Maps APIs 1.png"alt=""><figcaption></figcaption></figure>

<figure><imgsrc="../../../../.gitbook/assets/Google Maps APIs 1.png"alt=""><figcaption></figcaption></figure>

Now you can create and see your Google Maps API Key. It is suggested that you limit the Traffic by a Domain or IP Range.

<figure><imgsrc="../../../.gitbook/assets/Google Maps APIs API Key.png"alt=""><figcaption></figcaption></figure>

<figure><imgsrc="../../../../.gitbook/assets/Google Maps APIs API Key.png"alt=""><figcaption></figcaption></figure>