时间戳

首页 > 解决方案 > 如何为全日历事件自定义标题/工具提示？

javascript - 如何为全日历事件自定义标题/工具提示？

问题描述

所以我找到了一些在悬停的完整日历事件上显示标题的解决方案，但它看起来很难看。有什么办法可以自定义吗？

这是我的那部分代码：

function initialize() {//.. 
        var $element = $('#calendar').fullCalendar({
eventRender: function(event, element, view) {
                element.find('span.fc-title').attr('data-toggle', 'tooltip');
                element.find('span.fc-title').attr('title', event.title);
            }}

但它只显示基本标题，我将插入它的图像。提前感谢您的任何建议，如果您需要更多代码，我可以提供。

在此处输入图像描述

标签： javascripthtmlangularjsfullcalendar

解决方案

eventMouseover: function(event, jsEvent) {
            var tooltip = '<div class="calendarTooltip" style="padding-left:10px; text-align: center;width:185px;height:35px;background:#126da2; border-radius: 8px; color: white;position:absolute;z-index:10001;">' + event.title + '</div>';
            var $tool = $(tooltip).appendTo('body');
            $(this).mouseover(function(e) {
                $(this).css('z-index', 10000);
                        $tool.fadeIn('1000');
                        $tool.fadeTo('10', 1.9);
            }).mousemove(function(e) {
                $tool.css('top', e.pageY + 10);
                $tool.css('left', e.pageX + 20);
            });
            },
            eventMouseout: function(event, jsEvent) {
            $(this).css('z-index', 8);
            $('.calendarTooltip').remove();
            },

这是我制作的工作解决方案，效果很好。谢谢大家

推荐阅读