在 Fullcalendar v5 中使用 css-class 切换事件颜色

Posted 2023-02-19

【中文标题】在 Fullcalendar v5 中使用 css-class 切换事件颜色

【英文标题】：Toggle Event Color with css-class in Fullcalendar v5

【发布时间】：2020-11-21 06:09:52

【问题描述】：

我想通过添加一个 css 类（'click_class'）来标记一个点击事件。再次单击该事件应删除“click_class”。 作为一个起点，如果您想在 eventClick 之后向事件添加持久 CSS 类，我想知道应该更改对象中的哪个值？

cl_object = calendar.getEventById( id );
cl_object.setProp('eventClassNames','click_class');
calendar.render();

或

cl_object.ui.setProp('classNames','click_class');
calendar.render();

两者都不起作用

类在这个事件对象中定义

classNames_arr = cl_object.ui.classNames;

据我所知。

【参考方案1】：

// 可能是这样的

eventClick: function(info) 
    //
    // classNames Object
    classNames_obj = info.event.classNames;
    //
    // Transform into array
    classNames_arr = Object.values(classNames_obj);
    //
    // check, whether the class is here
    if (classNames_arr.includes('click_class'))
        // already here => remove
        classNames_arr = arrayRemove(classNames_arr, 'click_class');
     else 
        //append
        classNames_arr.push('click_class');
    
    // Update fullcalendar event object
    info.event.setProp('classNames',classNames_arr);
,

// Function
function arrayRemove(arr, value)  return arr.filter(function(ele) return ele != value; );