FullCalendar 事件颜色到 qtip

Posted 2023-05-09

【中文标题】FullCalendar 事件颜色到 qtip

【英文标题】：FullCalendar event color to qtip

【发布时间】：2012-12-07 16:35:07

【问题描述】：

我正在使用 fullcalendar 和 qtip 插件。 我有不同颜色的活动。 我需要做的就是有一个与完整日历事件的颜色相对应的工具提示。 我希望根据事件颜色更改 qtip(tooltip) 颜色。 这可能吗？ 谢谢.. :)

这是我的 qtip 的代码

    eventRender: function (event, element) 
        element.qtip(
            content: 
                title:  text: event.title ,
                text: '<span class="title" style="font-weight:bold;">Start: </span>' + ($.fullCalendar.formatDate(event.start, 'hh:mmtt')) +
                    '<br><span class="title" style="font-weight:bold;">End: </span>' + ($.fullCalendar.formatDate(event.end, 'hh:mmtt')) +
                    '<br><span class="title" style="font-weight:bold;">Where: </span>' + event.location +
                    '<br><span class="title" style="font-weight:bold;">Description: </span>' + event.description
            ,
            position: 
                adjust:  screen: true ,
                corner:  target: 'bottomMiddle', tooltip: 'topLeft' 
            ,
            show: 
                solo: true, effect:  type: 'slide' , effect: function () 
                    $(this).fadeTo(200, 0.8);
                
            ,
            hide:  when: 'mouseout', fixed: true ,
            style: 
                tip: true, // Give it a speech bubble tip
                border: 
                    width: 2,
                    radius: 5,
                    color: '#474968'

                ,
                title: 
                    color: '#fff',
                    background: '#9193c4'
                ,
            
        );
      

【问题讨论】：

你是如何设置事件颜色的？如果您使用的是自定义属性，那么您可以在事件渲染回调中使用它来为元素着色

我只是在事件源中为假期设置了事件颜色.. 而对于新添加的事件——我在 css 中设置了颜色

.fc-event-skin 边框颜色：#9193c4;背景颜色：#9193c4；颜色：#fff;

【参考方案1】：

事件对象接受className 属性。您可以使用它为使用 CSS 的事件着色（例如应用“假日”类）。然后，在您的 eventRender 回调中，您可以检查此类是否存在（ if (event.className === 'holiday') ... ）并适当地为您的工具提示着色