内联显示 Daygrid (FullCalendar) 事件答案

【问题标题】：Daygrid (FullCalendar) events to be shown inline内联显示 Daygrid (FullCalendar) 事件
【发布时间】：2021-03-25 16:41:34
【问题描述】：

我使用 DayGrid 在我的网站上显示月历，其中每天都会显示事件。当同一天有多个事件时，我希望将事件显示为同一行的图标（例如，当天的同一行中的三个事件）而不是每个事件都在不同的新行中。我用 css 尝试了很多东西，但它似乎不起作用。任何建议都会有所帮助，谢谢

例子：

我使用过这个 CSS，但 inline-block 属性将所有事件分配给一周的第一天，所以我找不到合适的解决方案

a.fc-event { width: 15px; } 
div.fc-content-skeleton > table > tbody > tr { display: inline-block; }

【问题讨论】：

这几乎肯定是不可能的，除非你想自己重写 daygrid 视图的内部源代码。如果您检查过 HTML，您会注意到它们都位于 HTML 表的不同行中，该表跨越了整行天。
我使用过这个 CSS 并且工作正常，但是 inline-block 属性将所有事件分配给一周的第一天，所以我找不到合适的解决方案 a.fc-事件{宽度：15px； } div.fc-content-skeleton > table > tbody > tr { display: inline-block; }
it works fine ...除了你接着描述为什么它实际上不工作正常大声笑:-)
无论如何，它不起作用的原因正是我在第一条评论中所说的 - 网格由一个表格组成，其行跨越每周的整组日子。因此，如果您将它们内联，它们将尽可能向左移动。每天没有单独的网格（这只是一种视觉效果）。如果您将鼠标悬停在浏览器开发工具中的元素检查器上，它们会为您突出显示这些行，因此您可以可视化结构。同样，如果不完全重写绘制该网格的底层源代码，您所要求的根本是不可能的。

【解决方案1】：

您在“dayGridMonth”视图中看到的网格实际上是由一个 HTML 表格组成的，表格中的行跨越了每周的整组日子。因此，如果您内联这些行，它们都会尽可能地向左移动。

每天没有单独的网格（这只是一种视觉效果）。如果您将鼠标悬停在浏览器开发人员工具中的元素检查器上，它们会为您突出显示这些行，以便您可视化结构。

如果不完全重写绘制该网格的 fullCalendar 中的底层源代码，您的要求是不可能的。

您唯一的选择是创建一个custom view，也许可以通过从 fullCalendar 的 GitHub 存储库中克隆 dayGrid 代码并根据您的需要重新编写它，但除非您已经熟悉可能相当重要的代码库任务而不是轻而易举的事情 - 除非你有很多时间并且准备付出很多努力来获得相对较小的用户体验奖励。

【讨论】：