I want to change the flow of how FullCalendar ReactJS component render my multi-days events (Three or more days), I am using the calendar with initial view as dayGridMonth
, and I want to render my events only at the start date of the event, and end date of the event, I don’t want to events to be rendered in the days between.
This is my declaration for the component, I will add below the function dateHasEvent and renderEventContent.
<FullCalendar
ref={calendarRef}
plugins={[dayGridPlugin]}
initialView="dayGridMonth"
themeSystem="bootstrap"
dayMaxEvents={0}
direction={isRTL ? 'rtl' : 'ltr'}
stickyHeaderDates={false}
editable={false}
selectable={false}
selectMirror
eventTimeFormat={eventTimeFormat}
events={events}
initialDate={new Date()}
style={{ fontSize: '5px' }}
headerToolbar={{
start: 'title',
center: '',
end: `today prev,next`
}}
buttonText={{
today: t('common:today'),
month: t('common:month'),
week: t('common:week'),
day: t('common:day'),
list: t('common:list')
}}
moreLinkDidMount={args => dateHasEvent(args)}
eventContent={renderEventContent}
/>
const dateHasEvent = info => {
const dayCell = info?.el?.closest('.fc-daygrid-day');
if (dayCell) {
const datCellNumber = dayCell?.querySelector('.fc-daygrid-day-number');
if (datCellNumber) {
datCellNumber?.classList?.add('has-event');
}
const dayEvents = dayCell
?.querySelector('.fc-daygrid-day-events')
?.querySelector('.fc-daygrid-day-bottom');
if (dayEvents) {
const dayEventsLink = dayEvents?.querySelector('a');
if (dayEventsLink) {
dayCell?.addEventListener('mouseover', function () {
let popOver = document?.querySelector('.fc-popover');
if (popOver) {
popOver?.querySelector('.fc-popover-close').click();
}
dayEventsLink?.click();
});
}
dayEvents?.classList?.add('day-cell-events-removal');
}
}
};
const renderEventContent = eventInfo => {
if (!eventInfo.isEnd && !eventInfo.isStart) {
return null;
}
return (
<>
{eventInfo.isStart && eventInfo.isStart != eventInfo.isEnd && (
<div
style={{
backgroundColor: 'green',
padding: '5px 0px 5px 0px',
borderRadius: '20px',
textAlign: 'center',
fontWeight: 'bold'
}}
>
{eventInfo.event.title}
</div>
)}
{eventInfo.isEnd && (
<div
style={{
backgroundColor: 'red',
padding: '5px 5px 5px 5px',
borderRadius: '20px',
textAlign: 'center',
fontWeight: 'bold'
}}
>
{eventInfo.event.title}
</div>
)}
</>
);
};
Function renderEventContent
will check if the event is at start date or end date or not, based on that it will render the event with a specific color, or return null.
Function dateHasEvent
will check if the a day has an event or not, as I am doing a bit of customization on the day cell itself if there is at least one event, and here is my problem.
My problem is even if the renderEventContent
return null, it will still show that the day of that event has an event, so it will be like I have a day with event, but looking into the details of that day, no are no events.