jquery - FullCalendar 事件颜色到 qtip

标签 jquery css jquery-plugins fullcalendar qtip

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

enter image description here

这是我的 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'
                },
            }
        });
    }  

最佳答案

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

关于jquery - FullCalendar 事件颜色到 qtip,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13967392/

相关文章:

javascript - 将 Javascript 注入(inject) DOM

css - IE7 H1 标签不采用 CSS 样式

javascript - Jquery/JS 和 CSS 水平列表导航单击下拉超链接不起作用

javascript - 页面闲置一段时间后,为什么没有数据传给客户端?

jquery - 如何显示动态表单的 jQuery 验证器错误消息而不重复相同类型的消息

jquery - 避免污染 jQuery 命名空间的最佳插件开发实践?

向下滚动某个div后JQuery float div停止

jquery - 显示 div 并使其在悬停时显示 jQuery html

javascript - 如何给galleria big image加边框?

javascript - 如何使用不同高度的页面动态调整 iFrame 的大小?