hear my requirement is want to trigger ah list at bottom of the calendar based on the month i have to filter the list and show the details at the bottom when the user clicks next month or previous month based on that i have to perform the bottom list 
When the user clicks on the next or previous button based on the clicked month i have to filter the aggrigate and show the details at bottom of the calendar.

EG:- what the month in that calendar the detail of the particular month in the calendar will show all the events at the bottom  from the aggrigate 

Hi Vimal, 

You can achieve your use-case by defining the DataSet event handler in the FullCalendar block as highlighted below.

DataSet Event: Trigger after the calendar’s date range has been initially set or changed in some way and the DOM has been updated.

When the user clicks on the next or previous button the DataSet event gets invoked.

As per the official FullCalendar documentation the event is called DatesSet event.

Refer this link for more info: https://fullcalendar.io/docs/datesSet

I hope this helps you!

Kind regards,

Benjith Sam

hai @Benjith Sam thanks for your suggestions, I'm using full calendar version V5 which is currently updated version in this we have only the calendar object so .i hope this wont work for me any way ill try so can u please give me the solution for full calendar V5 and i dint see any date sets events in the calendar

Hi Vimal,

One of the approach to register a datesSet event handler for the FullCalendar ReactiveV5 is:

1. Define an OnReady event handler to the Calendar Basic block
2. In the OnReady screen action flow, set the datesSet event handler using the JS node
3. Create a screen action (for e.g., OnMonthChange) and invoke the same from the handler to receive all the incoming parameters like Month, MonthIndex, Year. 

JS Snippet:

document.getElementById($parameters.CalendarId).querySelector('.fCalendar').reactiveInstance.setOption('datesSet', function (event) {

    var midDate = new Date((event.start.getTime() + event.end.getTime()) / 2);
    var month = new Date(midDate).toLocaleString('default', { month: 'long' });
    var newDate = new Date(midDate);

    $actions.OnMonthChange(month, newDate.getMonth(), newDate.getFullYear());
});

Note: The month index value starts from 0 - January.

Demo Screen: FC_V5_MonthChangeEvt

Considering your use case, you will have to refresh the table data source in the Screen action (OnMonthChange) flow - referring the incoming month/year value.

Refer to the attached oml file for your reference. 

I hope this helps you!

Kind regards,

Benjith Sam

You're welcome, Vimal.

Glad to help you :)

Kind regards,

Benjith Sam