Blog PostOutSystems Full Calendar for Dummies

João Reis's picture

João Reis



FullCalendar is a powerful JavaScript library that allows the creation of interactive and visually appealing calendars. In this comprehensive guide, we will walk through the process of integrating and using FullCalendar in OutSystems applications, providing developers with an easy way to incorporate calendar functionality into their projects.

The FullCalendar Reactive, integrated by the Mediaweb team, offers multiple views, event management, and customizable configurations, allowing interaction with various event sources.

We received numerous inquiries about FullCalendar, so we decided to create this article to assist the community.

Quick Setup of FullCalendar

1. Setting Up the Development Environment

Before embarking on FullCalendar integration, ensure your OutSystems environment is configured and ready for development. If you're new to OutSystems, follow the installation instructions available on the official website.

2. Installing FullCalendar in OutSystems

Login to your OutSystems environment.

Navigate to the "Factory" section and select the "Forge" menu.

Search for "FullCalendar" and install the corresponding component.

Forge Full Calendar Install

3. Adding FullCalendar to Your Page:

Open the page where you want to add the calendar.

Drag and drop the FullCalendar component from the toolbar onto your page.

4. Configuring FullCalendar

Select the FullCalendar component on your page.

In the component properties, you can set options such as default events, date range, date format, and more.

5. Integrating with Application Data

When integrating a calendar with application data, the events are typically loaded and rendered on the page as they are initialized or assigned. However, with slower databases or asynchronous operations, there can be issues where the calendar is rendered before the data is fully loaded, resulting in missing events. Here are two possible solutions:

1.Delay Calendar Rendering:

Render the calendar only after the data is fully loaded. This can be done by placing an If condition around the calendar to check if the data is available. The downside is that the calendar may take longer to appear on the page.

2.Dynamically Update the Calendar:

Render the calendar immediately, and once the data is fetched, iterate through the list of events and add them using the calendar's client actions, such as Add Event. This ensures the calendar appears promptly and updates dynamically as data becomes available. Be cautious to avoid adding duplicate events.

6. Customizing the Layout

Explore styling and customization options available in FullCalendar.

Adapt the calendar's appearance according to your application's design.

7. Testing and Publishing

Test your page to ensure that FullCalendar is functioning as expected.

Publish your application to make it available to end-users.

Detailed step-by-step

1. Add the component as a Dependency of your project

Go to your Studio environment, click the manage dependencies button on the top menu and add the following references to your Reactive Web Application:

Add Full Calendar dependencies in OutSystems Service Studio

2. Drag the Block to a Screen, Customize the widget and Create the OnInitialize Action

2.1. Drag the FullCalendar widget to your desired screen or block.

Dragging Full Calendar widget to the page
2.2. Configure the Widget Handlers:
Configure the widget handlers
2.3. Configure the Widget Advanced options:
Configure the Widget Advanced options
2.4. Data Integration
2.4.1. If you opt for Delay Calendar Rendering, it can be implemented as follows:
Delay rendering condition
2.4.2. If you prefer the "Dynamically Update the Calendar" approach, you can implement it in the following manner:
Update calendar dynamically

The GetEventsOnAfterFetch should look like this:

How GetEventsOnAfterFetch should look

3. Create Local Variables

3.1. Create the following local variables using the structures provided by the component: EventList and CurrentEventClick
Creating local variables

4. Assign Values to Parameters: create a New PopUp with Input boxes and Update / Remove Button

4.1. Create the Popup with the inputs for the task scheduler and the buttons to update and remove
Create a popup with the inputs for the task scheduler
4.2. Create the actions associated with the user interface buttons (update button):
Create the actions associated with the user interface
4.3. Create the actions by dragging the respective methods of the component associated with the user interface buttons (remove)
Create the actions by dragging the respective methods of the component associated

5. Assign Values to Parameters: Use the following mandatory Actions for Reactive Web or Mobile App

Below is a list of all the component actions. The FullCalendar Select and the the FullCalendarEventClick must be configured in order to have minimal functionality (update, remove and view appointments in the calendar)

Full Calendar actions
5.1. Complete the Action for the FullCalendar Select (mandatory)
Full Calendar select action flow
5.2. Complete the Action for the Event Click (mandatory)
Event click action flow


In this guide, we've covered the basic steps to integrate FullCalendar into OutSystems applications. Remember to refer to the official documentation of FullCalendar and in the component page in Forge for more detailed and advanced information.

This guide serves as a starting point, and as you become more familiar with FullCalendar and the OutSystems environment, you can explore more advanced features and customizations.

Additionally, don't hesitate to leverage community forums and support resources for troubleshooting and tips. Best of luck with your development, and may your applications benefit greatly from the powerful capabilities of FullCalendar!