I'm new in Outsystems and I'm using Full Calendar import from Forge of Outsystems (in Reactive web) to show the calendar for booking application. But I want to display the available day with color (ex: yellow) to explain no booking on this day and another color (ex: gray) to explain this day is booked. In database I have a column as a flag to check if the day is booked or not.
But I dont know how to show in calendar. Can someone help me on this?
Hi Bella,
When you fetch the events from aggregate, you could assign an additional className based on your flag column, and then write your own css style in your screen to create the color match what your need or write your own css style inside the FullCalendar forge component and republish it, so all your application which using the fullcalendar widget could reuse the same style without any change.
This is the Event Structure that used by FC.
Simply double click the style sheet field to add your own css style in FC component.
Thank a lot Kay,
I'm new in Outsystems too . I have some question about full calendar too . I can change color of event block in calendar by changing color field in my db . But I want to change all date block instead of just only event block . In additional , can full calendar limit 1 event create in 1 date only ?
Hi Hoang,
Correct me if I'm wrong, I guess you wanted to change the background color of each day block?
If that's what you want then I think you could do that inside the FullCalendar component inself, open the FullCalendar application, and select the FullCalendar widget, then you should be able to see all the stylesheet of FC, you could change how the FC should look like here, but remember, this action will affect the look and feel of all the applications which using the FC component in your environment.
Thank Kay ,
I want to change date block background color depend on my event block color could style sheet use color field in database to change color dynamically
Since there's no way to add class to the day block, I would suggest to do it in the event block itself.
try these style property of your event class
.eventClassName {
position: absolute;
height: calc(100% + 1px);
width: 100%;
top: -1px;
left: 0;
background-color: {your color};
}
in this way, you should be able to overlap the whole day block with your event block.
Hope this help.