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

Question

我正在使用完整日历，我正在将 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
    }
});

如何更改圆点的颜色？

Answer 1

我找到了解决方案。

不知道这个方法对不对，但确实有效。

它是这样的：

eventRender: function (event, element) {
    if (event.type == "planted") {
        element[0].cells[1].children[0].style.background = "#08b394" //works!
        //$(".fc-event-dot").addClass("#08b394 !important") //does not work
    } else {
        element[0].cells[1].children[0].style.background = "#2a7568" //works!
        //$(".fc-event-dot").css('background-color', '#2a7568 !important') //does not work
    }
}

Answer 2

$(".fc-event-dot").css(.... 不会像您预期的那样工作，即使它在工作，因为 $(".fc-event-dot") 目标 all 点（即所有class) 的元素，而不仅仅是呈现特定事件的元素。而且它不起作用，因为这些元素尚未呈现。每个点仅存在于提供给 eventRender 回调的 element 对象中。 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

Answer 3

我在将 eventClick 与全日历组件（使用 Vue）结合使用时发现了同样的问题：

eventClick: function(info) {
        if(info.el.style.borderColor == 'green') {
          info.el.children[0]["style"].borderColor = "red"; //change the dot
          info.el.style.borderColor = 'red'; //change the border-color of the date
        }
        else{
         info.el.children[0]["style"].borderColor = "green";
            info.el.style.borderColor = 'green';
        }
        },

这个函数放在组件的calendarOptions里面。希望这对某人有用:)

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

Fullcalendar | Change color of fc-event-dot at list view

javascript

jquery

fullcalendar

fullcalendar-3