OutSystems Full Calendar for Dummies
Introduction
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.
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:
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.
2.2. Configure the Widget Handlers:
2.3. 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:
2.4.2. If you prefer the “Dynamically Update the Calendar” approach, you can implement it in the following manner:
The GetEventsOnAfterFetch should look like this:
3. Create Local Variables
3.1. Create the following local variables using the structures provided by the component: EventList and CurrentEventClick
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
4.2. Create the actions associated with the user interface buttons (update button):
4.3. Create the actions by dragging the respective methods of the component associated with the user interface buttons (remove)
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)
5.1. Complete the Action for the FullCalendar Select (mandatory)
5.2. Complete the Action for the Event Click (mandatory)
Conclusion
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!
