fullcalendar 在月视图中水平渲染事件。（相同的表格单元格）答案

【问题标题】：fullcalendar render events in month view horizontally. (same table cell)fullcalendar 在月视图中水平渲染事件。（相同的表格单元格）
【发布时间】：2016-08-03 20:58:47
【问题描述】：

如何在同一个表格单元格中呈现同一天的事件？

我正在努力：

但结果是：

我尝试使用 eventAfterRender，更改类...但结果始终相同。

【问题讨论】：

现场演示可以帮助您解决这个问题。
嗨，Dekel，这是演示。 jsfiddle.net/5jgumL0c/4
恐怕由于 fullCalendar 库使用表格来绘制 UI，因此很难实现您想要的。
嗨，你是对的，我不得不转移到另一个库，它为我提供了构建该布局的所有工具。这就是库：kylestetz.github.io/CLNDR.

标签： jquery fullcalendar render

【解决方案1】：

所以你现在正在使用一个新插件。希望答案能帮助某人达到与您的问题相同的结果。

所以我尝试使用插件并进行一些调整。我正在使用完整的日历 3.0.1 非缩小版。我打开了 fullcalendar.js 完整日历不会呈现日期容器“td”内的“事件”。所以我重写了一些代码。

我将第 5445 行更改为打击。将属性 'data-date' 更改为 'id'

' id="' + date.format('YYYY-MM-DD') + '"' +

第 6039 行是将事件呈现到日历的方法。我把它改成了下面的。

fgSegHtml: function(seg, disableResizing) {
// Find the td with 'id date' that i changes above and append the span to the date as per the received events. I have also added the className that got from the json events file, so that we can write styles for the classname to make it interactive. 

$('#' + seg.event.start._i.split('T')[0]).append('<span class="event-dot ' + seg.event.className[0] +'">&nbsp;</span>'); 

return false; // Stop default event rendering

还添加了一些样式以正确显示它，即居中对齐、边距等。

<style>
.event-dot {
height: 10px;
width: 10px;
border-radius:50%;
background-color: #4a90e2;
margin:0 auto;
display:inline-block;
margin: 0px 2px;
}

.fc th, .fc td {
vertical-align: middle !important;
text-align: center;
}
</style>

然后你可以实现如下所示。如果您还有其他问题，请告诉我。（现在我已经在'event-dot'类中添加了点的颜色。你可以使用事件json中附加的不同'className'来编写不同的点颜色）

要在所选日期进行四舍五入选择，您可以在 fullcalendar 中使用“dayClick”方法。只需 google 一下，您就可以通过使用 jQuery 向选定日期添加样式来找到许多方法。

【讨论】：

你好，有没有办法创建点来替换隐藏事件（例如“+2 more”被两个点替换）？谢谢你:)