21
Views
2
Comments
[FullCalendar Reactive] Full Calendar Dynamic day cell coloring based on status
fullcalendar-reactive
Reactive icon
Forge asset by Mediaweb
Application Type
Reactive

Hello Team,

              So , In my calendar I would like to change day cell color dynamically based on the status from aggregate. so In my dB I have a list of dates and each date has a status. Based on the status from the aggregate I need to switch color in row cell. so certainly I can able to color only single cell using adding CSS in the code.

.fc .fc-daygrid-day.fc-day-today {    background-color: #ddad0f !important;

I also tried coloring using events, where events not change the whole body color of the cell. 


calendar.png
UserImage.jpg
Chiranjeevi Balaji

Hi @Vasudevan Natesan

Hope you are doing well. Could you please check this forum link? It may help you or give you an idea. 

https://www.outsystems.com/forums/discussion/94277/how-to-give-color-to-date-block-in-full-calender-reactive/

https://www.outsystems.com/forums/discussion/87851/full-calendar-reactive-day-color-base-one-condition-of-drop-down/

Alternatively, inspect the elements and experiment with custom CSS styling if possible. 

Thanks,

Chiranjeevi

2025-07-22 10-30-27
Mandar Deshpande

Hi @Vasudevan Natesan 

To change the background color of specific dates in FullCalendar Reactive, you can use the dayCellDidMount function and pass a date-to-color map from Outsystems to JavaScript.

Steps:

  • Build a JSON map from your aggregate and store this JSON in a screen local variable.
  • Use JS that reads your date - color JSON map. For everyday cell that FullCalendar renders, it should check the date and apply the correct background color to that cell. 

When the calendar loads, any date that exists in your JSON map automatically gets its full cell background color changed based on the status.

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