Condition based event rendering for recurring events - fullcalendar

Question

We need to manipulate the event rendering based on other events for particular day. So is there any option available to get all the events for a day, so that we can merge all the events or use 1st event only or 2nd event only for a particular day based on the condition in our event data (means Merge all events or exclude 1st event & include 2nd event, or include 1st event & exclude 2nd event). We are looking something like a day render but the callback have the event data of that date.
Please see the sample events with the recurring behavior description below
[{
"title": "Recurring on all days",
"dow": [0, 1, 2, 3, 4, 5, 6 ],
"ranges": {
"start": "2017-09-18",
"end": "2017-09-25"
},
"recurringBehaviourType": 1,
"recurringBehaviour": "Merge this event with future conflicting events. This is working fine=> oe. this #event1 merges with #event2.",
"color": "Blue",
"start": "08:00",
"end": "17:00"
},
{
"title": "Non Recurring [Day Schedule]",
"ranges": {
"start": "2017-09-23",
"end": "2017-09-23"
},
"color": "Red",
"start": "08:00",
"end": "17:00"
},
{
"title": "Recurring on all days",
"dow": [0, 1, 2, 3, 4, 5, 6 ],
"recurringBehaviourType": 2,
"recurringBehaviour": "Use this event instead of future conflicting events. ie. #event4 no need to merge with this #event3. Here need to ignore #event4.",
"ranges": {
"start": "2017-09-01",
"end": "2017-09-08"
},
"color": "Blue",
"start": "08:00",
"end": "17:00"
},
{
"title": "Non Recurring [Day Schedule]",
"ranges": {
"start": "2017-09-06",
"end": "2017-09-06"
},
"color": "Red",
"start": "08:00",
"end": "17:00"
},
{
"title": "Recurring on all days",
"dow": [0, 1, 2, 3, 4, 5, 6 ],
"ranges": {
"start": "2017-09-10",
"end": "2017-09-16"
},
"recurringBehaviourType": 3,
"recurringBehaviour": "Use future conflicting events instead of this eventie. ie. This #event5 no need to merge with #event6. Here need to ignore this #event5.",
"color": "Blue",
"start": "08:00",
"end": "17:00"
},
{
"title": "Non Recurring [Day Schedule]",
"ranges": {
"start": "2017-09-12",
"end": "2017-09-12"
},
"color": "Red",
"start": "08:00",
"end": "17:00"
},
]
We are very exited to know if there is a solution for our this requirement .

Answer 1

You can use the eventRender() callback to add CSS classes or data attributes to the events, including CSS to hide them if you don't want to display them yet.
Then, once all events have been rendered with your classes/data attributes, you can use the eventAfterAllRender() callback to find and examine them using those classes/data attributes. You could then update the events' CSS, or add and display new elements.
Here's an example with working JS to show only the total number of events, not the actual events, on any given day. It should get you started.