Full calendar 4.0 fc-more(2+ more) popup over ride

Question

I need help related to disappearance of the popup in each day cell block, When there are too many events in a day, a link that looks like “+2 more” is displayed. How to avoid this popup, my requirement is default eventLimit: 2 and next for the remaining it should show a button, and click on this button, It should navigates to day mode similar as in the above screenshot.

Thanks & Regards, Prabha

Answer 1

Using the below function in calendar intialisation we can remove the default more link text '+n more'.

eventLimitText: function() {
return " ";
}

And using the following CSS(in HTML style tag) we can insert a button like appearance instead of default text.

a.fc-more {background-size: contain;cursor: pointer;width: 14px;height: 6px;
letter-spacing: 1px;
background-image: url(dots.png);
background-color: #F0F0F0;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
border-radius: 4px;
margin-top: 10px;
float: right;
background-position: center;
}

dots.png is the image that has 3 horizontal dots. Using the below function in calendar instantiation we can click on 'more button' to change to day view.

eventLimit: 3,
eventLimitClick: function(cellInfo) {
calendar.gotoDate(cellInfo.date);
calendar.changeView('timeGridDay');
}

Below image is my local calendar click more button view with hover text(click for more cells) and the hover css style as:

a.fc-more:hover:after {
 content: 'Click for more cells';
 font-size: 9px;
 text-align: center;
 position: absolute;
 margin-top: -2px;
 margin-left: 15px;
 line-height: 2em;
 width: 12em;
 border-radius: 0.3em;
 background: #ffffcc;
 display: inline-block;
 }

Answer 2

Then use fullcalendar.io/docs/eventLimitClick to change what happens when you click that link. If you notice, one of the options is "day". – ADyson Thanks a lot Adyson