Full calendar 4.0 fc-more(2+ more) 弹出窗口覆盖

Question

我需要有关每天单元格块中弹出窗口消失的帮助，当一天中的事件太多时，link 看起来像“+2 more”显示。如何避免这个弹出窗口，我的要求是默认的 eventLimit: 2，接下来它应该显示一个按钮，然后点击这个按钮，它应该导航到类似于上面截图的日模式。

感谢和问候，帕巴

Answer 1

然后使用 fullcalendar.io/docs/eventLimitClick 来更改单击 link 时发生的情况。如果您注意到，其中一个选项是 "day"。 – 阿迪森非常感谢阿迪森

Answer 2

在日历初始化中使用以下函数，我们可以删除默认的 more link 文本 '+n more'。

eventLimitText: function() {
return " ";
}

并使用以下 CSS（在 HTML 样式标签中）我们可以插入一个类似外观的按钮而不是默认文本。

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 是有 3 个水平点的图像。在日历实例化中使用以下函数，我们可以单击 'more button' 更改为日视图。

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

下图是我的本地日历单击更多按钮视图，带有悬停文本（单击更多单元格）和悬停 css 样式为：

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;
 }

Full calendar 4.0 fc-more(2+ more) 弹出窗口覆盖

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

javascript

html

fullcalendar

fullcalendar-4