14min

Calendar (Drag and Drop)

Link to plugin page: https://zeroqode.com/plugin/zq-drag-n-drop-calendar-1531403685344x504588587521015800​

Introduction

This plugin is a powerful calendar with a fully customizable design and which connects directly to the Bubble database.​

Getting started

  • Add calendar element on your page
Document image

ο»Ώ

  • First we need type name for Calendars table and Events table.

What is Owner email needed for ?

This email will be used to locate user specific data, this is optional. But if you want to use it you should insert a dynamic expression pointing to the user's email address.

Creating Calendars table and Events table types in DataBase

Calendars table is the database table that contains all the information about your calendar.
  • First let's create a type for calendars table, add fields as in example below, you can name this type any way you want but for fields use names as in example below:

Note: Datatype Name should not have any spacing ( ). CalendarEvents - ok. Calendar Events - not ok.

Document image

ο»Ώ

  • Now let's create Events table type, you can name it also any way you want but for fields use names from example.
Events table is the database table that contains all the information about your calendar.
Document image

In order to get it work , it will be required to open this types for public end points (Exposing DATA and Workflow API)!

  • To make them public, go to settings then API tab and set the checkmark to types that you just created.
Document image

ο»Ώ

To let the plugin edit, delete and update the data from the database of the app it is needed to set up privacy settings. In order to do that please open the Privacy tab, select from the left side the data type Calendars and TaskEvents and set the roles for both data types as shown in the image.

Document image

At this point, your calendar will be shown already, now you just need to customize it, if needed. You can add custom popups with fields to create new schedule or to update them and use calendar actions in workflow.

You can easily customize colors of most inner elements like SIDE MENU(Background color, Button background, Button font color, Radio color), TOP MENU (Background color, Elements' background), POPUP, VIEW MENU, DATE PICKER and others.

Other functionality

Partial Multi-editing:

Partial Multi-editing means that any changes you apply will apply to the bubble database, but only that user who made those changes see them immediately, while others using the same calendar will need to reload the page in order to see them, but they are allowed to modify the fields at the same time, and by manual re-initiation (through the workflow that is called "reload table")

Changelogs

Update 05.04.2021

  • Minor changes

Update 13.04.2021

  • Bugfix in displaying event color if there is more than one calendar on the page

Update 28.05.2021 - Version 1.27.0

  • Fixed the 'current user's email field. now events and calendars are loaded in two fields, owner email, and current user email.

  • Fixed bugs sometimes occurring when editing events

Update 27.09.2021 - Version 1.29.0

  • Added posibility to refetch events from base.

Update 28.10.2021 - Version 1.30.0

  • Fixed events request on version live.

Update 21.12.2021 - Version 1.31.0

  • Fixed error in events creation

Demo to preview the settings

Bubble Editor: https://bubble.is/page?type=page&name=calendar&id=zeroqode-demo-07&tab=tabs-1​

Live Demo: https://zeroqode-demo-07.bubbleapps.io/calendarο»Ώο»Ώο»Ώ

ο»Ώ

Updated 19 Apr 2022
Did this page help?
Yes
No
UP NEXT
AOS Page Plugin
Documentation powered byΒ archbeeΒ