[FullCalendar Reactive] Modify calendar advanced options dynamically
Forge component by André Cabral
Application Type
Reactive

Hi everyone,

I am trying to modify the advanced propreties of the calendar to edit the limit of events taht can be displayed on the screen, but I wanted to do it dynamically. The objective is to have a button than when you click on it, it expands the events that are compressed. Changing from a day that has 5 events, 2 appearing on the screen and the other 3 on a +3 events block, to a day with the 5 events on the screen.

That's how the actual advaned options looks like:


The eventLimit option is the property that limits how many events appear in one day, the idea is to be able to put something like a variable to be able to edit it at will at runtime.


That's how the events look with the eventLimit option:


If any more information is needed, please notify it to me so I can add it. 


Thanks in Advance,

Ismael.

mvp_badge
MVP
Solution

Hi Ismael,

After doing some investigation & trails, I got success in implementing the mentioned use case.

See this demo screen: FC_Event_Expand_Collapse_Demo

Add the below mentioned declaration as the FullCalendar widget advancedOptions property value.

Advanced Options Value

"
header: {
    left: 'today',
    center: 'prev, title, next eventLimitButton',
    right: 'dayGridMonth, timeGridWeek'
},
editable: true,
droppable: true,
firstDay: 1,
displayEventTime: false,
eventLimit: 2,
customButtons: {
    eventLimitButton: {
        text: 'Expand/Collapse All',        
        click: function() {
            var fc = document.querySelector('.fCalendar');
            if (fc.ReactiveFullcalendar.getOption('eventLimit')) {          
                fc.ReactiveFullcalendar.setOption('eventLimit', false);
            } else {
                fc.ReactiveFullcalendar.setOption('eventLimit', 2);
            }
        }
    }
}
"

Note:

  •  fullCalendarObj.setOption('eventLimit', false); -- is used to set the eventLimit property value.
  • fullCalendarObj.getOption('eventLimit'); --  is used to see what the eventLimit property value is.


Refer to the attached .oml file.


I hope this helps you!


Kind regards,

Benjith Sam

RWALabFCEvtsCollapseExpand.oml

Hi Benjith,


thanks a lot! that really helped!


Regards, Ismael.

mvp_badge
MVP

You're most welcome, Ismael.

I really enjoyed solving this use case.. glad to help you :)


Kind regards,

Benjith Sam

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