It’s recommended to read more details about FullCalendar implementations here: https://fullcalendar.io/docs

Table of contents

1. Calendar configuration
   1. Install the component in your environment
   2. Create the FullCalendar2 dependency
   3. Drag the “FullCalendar” widget to your webscreen
   4. Configure the calendar
2. Manage events
   1. Load events
   2. Create events
   3. Drop and resize events
   4. Delete events
   5. Draggable events
   6. Advanced configuration
3. Using Templates
   1. Calendar
   2. Calendar (from event feed)
   3. Calendar Background
   4. Calendar resources

1. Calendar configuration
This component allows the creation of calendars manually or using existing templates.

In this document it will be explained how to manually create your own calendar, which will be similar to what exists with the creation through a template and next it will also be explained a little about the creation through templates.

1.1 Install the component in your environment

Open the Forge FullCalendar2 and download the component. The demo application can also be downloaded. Install it.

1.2 Create the FullCalendar2 dependency

Open the Manage Dependencies option and search for FullCalendar2. Select the FullCalendar2 dependencies and apply changes.

1.3 Drag the “FullCalendar” widget to your webscreen

Search for FullCalendar2 in the Service Studio toolbox input and drag it to your WebScreen.

 1.4 Configure the calendar

It is necessary to configure the Calendar as shown in the image and in the details below.

Input details

• SchedulerLicense
  License Key to use the Scheduler View.
  You can read more here: https://fullcalendar.io/license/premium
• DefaultDate
  The initial date displayed when the calendar first loads. Usually used to highlight the current day.
  You can also update this input variable with the date coming from the ViewChange event. This way you will be able to refresh the Calendar and keep the same date selection.
  You can read more here: https://fullcalendar.io/docs/v4/defaultDate
•  AdvancedConfig
  Allows the configuration for every aspect of the calendar.
  You can configure or change on the demo page.
  
  Note 1: In order to be able to ajax refresh the calendar, you should use a variable for the DefaultView setting, this way when the ViewChange event is triggered you can update that variable, which will allow you to keep the calendar in the current view after ajax refreshing the calendar.
  
  Note 2: If the selectable setting is set to True, you should only use the Select event and not the DateClick event. And in this case, you also need to disable the Callbacks DateClick Notify (input parameter Callbacks).
  
  This is because the select event is also triggered when we click on a date or time. This is the standard behavior of the FullCalendar v4.
  
  You can view all available options here:https://fullcalendar.io/docs

• GoogleCalendarApiKey
  API Key used to get calendar events from Google Calendar.
  
  You can read more here: https://fullcalendar.io/docs/google-calendar
  
  
  
• EventSources
  A way to specify multiple event sources. This option is used instead of the events option. You can put any number of event arrays, functions, JSON feed URLs, or full-out Event Source Objects into the eventSources array. In this Demo we use the NewEventSourceData action to load a list of events from the database.
  
  You can read more here: https://fullcalendar.io/docs/eventSources 
• ResourceSource
  How to get resources onto your calendar and how to manipulate resource data thereafter.
  
  Read more here: https://fullcalendar.io/docs/resources-array

• LoadingClass
  Triggered when event or resource fetching starts/stops. Triggered with a true argument when the calendar begins fetching events via AJAX. Triggered with false when done. This function is often used to show/hide a loading indicator. When one of the resource plugins are loaded, this callback is also fired when resources are fetched.
  
  Read more here: https://fullcalendar.io/docs/loading

• Callbacks
  Handlers (sometimes called “callbacks”) are sort of like options, but they are functions that get called whenever something special happens.
  
  Note: If the selectable setting in the input parameter AdvancedConfig is set to True, you should only use the Select event and not the DateClick event. And in this case, you also need to disable the Callbacks DateClick Notify.
  
  This is because the select event is also triggered when we click on a date or time. This is the standard behavior of the FullCalendar v4.
  
  Read more here: https://fullcalendar.io/docs/handlers

• EventDescription
  Events are shown expanded with title and description. Default: AlwaysShow.

2. Manage events

2.1 Load events 

Where to implement ?: Preparation

To load events from the database first make an aggregate and get as much events as needed from the entity, then map your entity's fields to "Event" with the "NewEventSourceData" action and then assign the result from the NewEventSourceDate to a local variable of the same data type.

2.2 Date Click events

Which event is triggered?: DateClick

To create an event just click on a day on the calendar and the DateClick event will be triggered.

In the Handler of this event, create a variable with the same type as your entity and assign its fields.

After that, just use the entity's create action to save the event to the database.

Note: If the AdvancedConfig selectable is set True and you are using the Select event, you should not use the DateClick event. And in this case, you also need to disable the Callbacks DateClick Notify.

This is because the select event is also triggered when we click on a date or time. This is the standard behavior of the FullCalendar v4.

2.3 Select events

Which event is triggered?: Select

To create an event just click on a day on the calendar and the SelectEvent event will be triggered. If you want to create an event with multiple days, you can drag the mouse cursor while clicking.

In the Handler of this event, create a variable with the same type as your entity and assign its fields.

After that, just use the entity's create action to save the event to the database.

Note that in this DEMO we are using the Title and Description Inputs that are being stored in the EventTitle and EventDescription variables, to be used in the creation of the events.

2.4 Drop and resize events

Which events are triggered?: EventDrop & EventResize

EventDrop is triggered when dragging stops and the event has moved to a different day/time.

EventResize is triggered when resizing stops and the event has changed in duration.

 When the user triggers an event, the triggered event sends an "Event" parameter to the handler, containing information about the event to be changed.

To edit an event, just ensure that we edit the existing event in the database and edit it according to the changes made to the calendar.

2.5 Delete events

Which event is triggered?: EventClick

To delete an event, we need to obtain the event ID that we want to delete. In the example below, we are using the “EventClick” event, which is triggered when the user clicks on an event in the calendar. When the user clicks on an event, the event fires and sends an "Event" parameter to the handler, containing information about the clicked event, such as its ID.

Then we delete the event using such ID on the entity's delete action.

2.6 Draggable events

Which event is triggered?: EventReceive

It is possible to create events by simply dragging and dropping them.

To create a draggable event we need to create a list of the events we want to create first.

Then we need to list these events in a ListRecords.

REQUIREMENT:

For draggable to work it is necessary to place the external-events class in the ListRecords Style Classes.

 2.7 View Change events Which events are triggered?: ViewChange 

This event returns the current active View and the current active Initial Date in the Calendar. And can therefore be used to update the DefaultView (AdvancedConfig) and DefaultDate (input parameter) of the Calendar before ajax refreshing the calendar.

This event is triggered in 2 different circumstances:

1 - When the view changes (applies to Month, TimeGrid, List and DayGrid views), for example, when the view changes from Month to Week; 

2 - When the user clicks on one of the following buttons of the Calendar: prev, next, prevYear, nextYear, today.

An alternative for this behavior is to use the datesRender callback, which can be defined in the input parameter AdvancedConfig. More information here.

2.8 Advanced configuration

With the advanced configuration, you can tweak various settings of the calendar to make it fit your needs.

To update the settings just edit in the DEMO Screen input and save it in the database to be loaded by the calendar. 

3. Using Templates

You can create Calendars using existing templates. For that, you just need to create a new WebScreen and select the most appropriate template.

3.1 Calendar

This template contains a calendar similar to the one explained above. It allows the creation, dropping and resizing of events from a table. It also allows you to create predefined Draggable events.

Calendar (from event feed)

This template allows the creation, dropping and resizing of events from source url or Web Services. It also allows you to create predefined Draggable events.

It uses WebService methods to insert and update events.

RunCalendarRefetchEvents: This server action runs JavaScript code to refresh the calendar events.

Calendar Background

Calendar to display events as background events. 

It's not different from the Calendar template. It's just that in this template, we turned all the events into background events to show you how they work.

Calendar resources

Calendar to schedule events by resource. It should be used cases where you need to allocate specific time slots for different types of "things" (assigning people to meeting rooms, assigning work to people in a pool of resources).