为什么V5的eventClassNames返回的class没有应用？

Question

在 Alpinejs 2 应用程序中使用 fullcalendar v5.7.2 我想根据需要为单元格设置不同的颜色在一些属性和阅读这里 https://fullcalendar.io/docs/classname-input 我赶上事件 :

                dayMaxEvents: true,
                views: {
                    dayGridMonth: {
                        editable: false
                    }
                },

                events: function (info, successCallback, failureCallback) {    //get data from db for selected dates
                    self.select_year = parseInt(moment(info.start).format('YYYY'))
                    self.select_month = parseInt(moment(info.start).format('MM'))

                    var dataArray = {
                        '_token': '{{ $csrf_token }}',
                        'start': moment(info.start).format('YYYY-MM-DD'),
                        'end': moment(info.end).format('YYYY-MM-DD'),
                        'ad_categories': self.searchSelectedCategoryIds,
                        'users': self.searchSelectedUserIds,
                        'status': self.searchStatus,
                        'text': self.searchText
                    }
                    window.axios.post('/admin/get_ad_events', dataArray).then((response) => {
                        successCallback(response.data.events);
                    }).catch((error) => {
                        console.error(error)
                        failureCallback(error)
                        popupAlert('Calendar', 'Run time error : ' + getErrorMessage(error), 'error')
                    });

                }, // events: function(info, successCallback, failureCallback) {    //get data from db for selected dates

                eventClassNames: function(arg) {
                   // return 'fullcalendar_nearest_days'; // if to uncomment this line it does not work anyway

                   if (arg.event.extendedProps.is_past) {
                        return [ 'fullcalendar_nearest_days' ]
                     } else {
                        return [ 'normal' ]
                     }

我检查并发现 fullcalendar_nearest_days 已返回，但它的属性未应用并检查事件代码我在事件样式中没有看到“fullcalendar_nearest_days”...

哪种方式是正确的？

修改： fullcalendar_nearest_days 定义为：

.fullcalendar_nearest_days {
  background-color: red !important;
  color: yellow !important;
  font-weight: bold;
}

查看生成的代码，我发现 fullcalendar_nearest_days 是“a”标签中最新的 class class 定义：

  <div class="fc-daygrid-event-harness fc-daygrid-event-harness-abs"
                 style="visibility: hidden; top: 0px; left: 0px; right: 0px;"><a
                    class="fc-daygrid-event fc-daygrid-dot-event fc-event fc-event-draggable fc-event-resizable fc-event-start fc-event-end fc-event-past fullcalendar_nearest_days"
                    data-id="undefined"><span class="flex flex-nowrap"><

难道 fullcalendar_nearest_days 的属性没有应用，因为它们被 fc-daygrid-event fc-daygrid-dot-event fc-event fc-event-draggable fc-event-resizable fc 覆盖了-event-start fc-event-end fc-event-past ？我可以在某些日期的“a”标签 class 定义中删除这些 class 中的 all/part 吗？

谢谢！

Answer 1

我用你的 CSS - https://codepen.io/ADyson82/pen/zYwYxRp 制作了一个演示。定时事件似乎没有问题，class 应用于正确的事件并且颜色会按您预期的那样变化。

但是在 all-day 事件中不应用黄色。如果您在浏览器中使用元素检查器，您可以看到每个元素应用了哪些 CSS 规则，以及什么覆盖了它们。你可以看到标题在主元素的另一个 div 里面，上面有 fc-event-main class，并且 class 有一条规则覆盖 color 属性再一次。

幸运的是，我们可以通过调整 CSS 规则来专门处理这种情况，从而轻松解决此问题：

.fullcalendar_nearest_days, .fullcalendar_nearest_days .fc-event-main {
  background-color: red !important;
  color: yellow !important;
  font-weight: bold;
}

工作演示：https://codepen.io/ADyson82/pen/OJmJPEP

为什么V5的eventClassNames返回的class没有应用？

Why class returned in eventClassNames of V5 is not applied?

html

css

fullcalendar

fullcalendar-5