Discuss

Getting Started with App Connect Event Calendar

On this page

App Connect Event Calendar is a full-sized event calendar with drag & drop support and lots of customization options. It allows you to add static events or use different data sources for dynamic events.


Getting Started with the Event Calendar

We'll go through the basics of adding the calendar on the page, customizing it and adding static events.

Adding App Connect Event Calendar on Your Page

Click the add new element button:

Screenshot_1|690x416

Open Components and select Calendar:

Screenshot_2|690x416

And you will see the Event Calendar in Design View and App Structure. Select it in the App Structure to see its properties:

Screenshot_3|690x416

Main Properties

You can select the default timezone for the calendar. Select between Local (the users browser time zone) and UTC:

Screenshot_4|690x416

You can set an initial date displayed when the calendar first loads. If you leave this option empty it defaults to the current date:

Screenshot_5|690x416

Select a Locale option. This option allows you to localize the calendar options such as buttons text, days, months and days of week, date formatting etc.:

Screenshot_6|690x416

Choose between two themes - Default and Bootstrap. If you select the Bootstrap theme, the selected Bootstrap 4 (or any of the available Boostwatch themes) will be applied to the calendar:

Screenshot_7|690x416

You can enter a height for the calendar. By default this option is unset and the calendar’s height is calculated by the Aspect Ratio option:

Screenshot_8|690x416

The Aspect Ratio option sets the width-to-height aspect ratio of the calendar. A calendar is a block-level element that fills its entire available width. The calendar’s height, however, is determined by this ratio of width to height. (Hint: larger numbers make smaller heights):

Screenshot_9|690x416

Choosing Different Views

App Connect Event Calendar provides options for setting up different views. Select the views, which should be available in the calendar, the default ones are Month, Week and Day:

Screenshot_10|690x416

You can add more or remove any of the default ones:

Screenshot_11|690x416

The default view for the calendar is the Month view. You can change it and set some other view as a default:

Screenshot_12|690x416

NOTE: In order to set a default view, make sure it's also added to the Views option above!

There are a few more options available for the views:

  • Hide Non Current Dates - Hides the dates in the previous or next month In month view.

  • No Event Overlap - By default all events are allowed to overlap each other, when they are being dragged and resized. Enable this option to disable this behavior, so the events won't be allowed to overlap.

  • Selectable - Allows a user to highlight multiple days or timeslots by clicking and dragging.

  • Editable - Allows the events to be dragged and resized.

Screenshot_13|690x416

Adding Source and Static Events

In order to add events in the calendar we need to add a Source. Right click the Calendar in the App Structure:

Screenshot_14|690x416

Then select Source:

Screenshot_15|690x416

You can have multiple sources, with different events inside them - static and dynamic. You can add a default styling for each Source. This styling will be applied to all of the events added in this Source:

  • Color: Sets the background and border colors for the events in this source.
  • Back Color: Sets the background color for the events in this source.
  • Border Color: Sets the border color for the events in this source.
  • Text Color: Sets the text color for the events in this source.

So if you want to use the same color for the background and borders, just set the Color option. If you want different colors for the background and border - use the Back Color and Border Color options:

Screenshot_16|690x416

We add a color and text color for the events in this source:

Screenshot_18|690x416

Now, let's add a static event. Right click Source in the App Structure:

Screenshot_19|690x416

And select event:

Screenshot_20|690x416

Add a Title for this event:

Screenshot_21|690x416

Select a start date and time, using the date and time picker:

Screenshot_23|690x415

Then select an end date and time:

Screenshot_24|690x415

Enable the All Day option, if your event is a full-day event. When this option is enabled, the event will be shown in the “all-day” section of relevant views. In addition, the time will not displayed with the event:

Screenshot_25|690x415

You can group your events together, entering the same Group ID for them. When the events are using the same group ID will be dragged and resized together automatically:

Screenshot_26|690x415

Styling Events

You can override the styling option, which you applied for the Source, by adding custom styles per event:

Screenshot_28|690x415

Making the Event Calendar Dynamic

You can use any dynamic data source in Wappler to show dynamic dates in your calendar - a database query, a JSON data source or an API data source. In our example we will show you how to use a server action which returns records from our database table.

Using Dynamic Data Sources

We created a simple server action which contains a database query. Our database structure is as follows:

Screenshot_30|690x245

The start and end columns are DATETIME types so we store there the start date and times for the events. The allday is a BOOLEAN type and the title and group are simple VARCHAR fields.

We added a server connect component in App Structure which loads our Server Action:

Screenshot_31|690x417

In order to add our dynamic events to the calendar we need to add a new Source. Right click the calendar:

Screenshot_32|690x417

Then select Source:

Screenshot_33|690x417

Scroll down the Source properties and enable the Dynamic Events option:

Screenshot_34|690x417

Click the dynamic data picker icon to select a dynamic Events Source:

Screenshot_35|690x417

This is the database query, returned by our server action:

Screenshot_36|690x417

Select the dynamic data for the event ID:

Screenshot_37|690x417

This is the binding corresponding to the event IDs:

Screenshot_38|690x417

Do the same for the rest of the options, selecting the corresponding dynamic binding from the data picker:

Screenshot_39|690x417

You can customize the dynamic events, by applying styles to the Source which they belong to. Scroll up the properties panel and setup the style options:

Screenshot_40|690x417

We added a custom color and text color for the events:

Screenshot_41|690x417

Our dynamic events are now displayed in the calendar and they are nicely styled. You can have as many Sources with dynamic events as you need.

Selectable Dates and Editable Events

The Event Calendar includes advanced options like highlight multiple days or time slots by clicking and dragging and editing events - by dragging and resizing them.

Selectable Dates

You can enable selectable dates in the Calendar Options. This will allow users to select multiple dates by click and drag over the dates. You can use the selected range with dynamic events - to set values, filter some data source, show notification etc.

In our example we will show you how to set the selected start and end dates in form inputs. So we added 2 form inputs below the calendar. We will store the start and end dates of the selected date range in them:

Screenshot_46|690x416

In order to allow selecting dates select the Calendar, and enable the Selectable option:

Screenshot_47|690x416

Then add new dynamic event:

Screenshot_48|690x416

Select Calendar > Select:

Screenshot_49|690x416

And click the dynamic action picker button:

Screenshot_50|690x416

Select Set Value under the start date input and click the add button:

Screenshot_51|690x416

Click the dynamic data picker, to select what value to set to it:

Screenshot_52|690x416

This is the start date, returned by the Select Event:

Screenshot_53|690x416

Then we select Set Value under the end date input and click the add button:

Screenshot_55|690x416

We do the same here, but select the end date returned by the Click Event:

Screenshot_57|690x416

Click select when you are done:

Screenshot_58|690x416

Save your page. And here are the results:

date-selection|687x500

The selected start and end dates are set as values into the inputs.

Editable Events

You can make your events editable allowing your users to drag and resize them in the Calendar. You can use the data returned by the drag/resize events to update data in your database, using an update record action. There are several options to make your events editable:

Make all the events in the calendar editable

In order to make all the events in the calendar editable, select the Calendar and enable the Editable option:

Screenshot_59|690x416

Make all the events in a source editable

In order to make all the events in a source editable, select the Source and enable the Editable option:

Screenshot_60|690x416

Make a single event editable

In order to make a single event in your calendar editable, select the Event and enable the Editable option:

Screenshot_61|690x416

You can access the edited event ID, the new start and end dates and other data, using the Event Move/Drop and the Event Resize Dynamic Events:

Screenshot_63|690x415