时间戳

首页 > 解决方案 > 全日历 | 在列表视图中更改 fc-event-dot 的颜色

javascript - 全日历 | 在列表视图中更改 fc-event-dot 的颜色

问题描述

我正在使用完整的日历，并且我将defaultView设置为listMonth，如下所示：

var events= [... this.events,
    {
      "title": "a title"
      "start": "a date",
       type: "X"
    },
    {
      "title": "a title 2"
      "start": "a date 2",
       type: "Y"
    }
];

$("#calendar").fullCalendar({
    ...
    defaultView: "listMonth",
    eventRender: function (event, element) {
       if(event.type=="X")
          $(".fc-event-dot").css('background-color', '#2a7568 !important'); //does nothing
       if(event.type=="Y")
          $(".fc-event-dot").css('background-color', '#fff!important'); //does nothing
    }
});

我怎样才能改变点的颜色？

标签： javascriptjqueryfullcalendarfullcalendar-3

解决方案

$(".fc-event-dot").css(....不会按您的预期工作，即使它完全可以工作，因为$(".fc-event-dot")目标是所有点（即具有该类的所有元素），而不仅仅是针对正在呈现的特定事件的点。它不起作用，因为这些元素还没有被渲染。每个点仅存在于element提供给 eventRender 回调的对象中。FullCalendar 尚未将事件及其组成元素添加到 DOM - 只有在 eventRender 调用完成时才会发生，因此您有机会在将外观绘制到日历上之前对其进行修改。

因此，您必须通过在element. 幸运的是，jQuery 提供了一种简单的方法，使用以下.find()函数：

eventRender: function(event, element) {
  if (event.type == "X")
    element.find(".fc-event-dot").css('background-color','#08b394');
  if (event.type == "Y")
    element.find(".fc-event-dot").css('background-color','#2a7568');
},

工作演示：https ://codepen.io/ADyson82/pen/MWwXbVK?editable=true&editors=001

推荐阅读