Full Calendar ODC – RTL support, custom event time display, and event click handling

Back to Forums

hava sh

Question

Hi,

I’m using the following component to display a calendar:

https://www.outsystems.com/forge/component-overview/15801/full-calendar-odc

I’m trying to customize its behavior and styling, and I have a few questions:

RTL support –

Currently, the events are displayed in LTR.

Is there a way to force the calendar and/or events to be displayed in RTL?

Event time format –

The event time is displayed in a format like “8p”.

How can I remove the default time display or replace it with a custom format/content?

Event click handling –

I would like to trigger an action when clicking on an event

(for example, opening a popup or performing a custom action).

What is the recommended way to handle event click actions in this component?

Any guidance or examples would be greatly appreciated.

Thank you!

25 Jan

Sherif El-Habibi

Champion

Hello,

For the first and second points, based on my understanding of the component and its documentation, it is built on top of the FullCalendar (React) library (https://fullcalendar.io/).

One important thing to note is that all calendar elements are generated dynamically at runtime by FullCalendar itself. For example, during runtime we can see elements such as:

In this case, the element we would like to modify is the table that represents the calendar grid.

However, attempting to apply RTL styling partially (for example, only on the table or specific inner elements) does not work as expected.

The only reliable way to make RTL work correctly is to override the root direction, for example:

.fc { direction: rtl;}

This approach forces all FullCalendar elements (including headers, toolbar, and navigation) into RTL, which is not desirable.

For the third point regarding event interaction:

The component provides a built-in EventClick event. This event can be handled using a Client Action, where you can implement any custom behavior you need, such as Opening a popup.

P.S. There might be alternative ways to handle this, but this is based on my current understanding.

25 Jan

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines