如何在鼠标悬停时在完整日历中显示开始和结束时间？答案

【问题标题】：How to show start and end time in full calendar on mouseover?如何在鼠标悬停时在完整日历中显示开始和结束时间？
【发布时间】：2016-05-26 13:16:23
【问题描述】：

我在全日历上工作了几天。我面临一个问题，我在很多地方搜索，没有任何工作。
我想在鼠标悬停时显示开始和结束时间。我已经以一天的格式自定义了日历。我有30分钟的地方。插槽。有一些事件。我有代码，其中事件磁贴显示在鼠标悬停而不是开始和时间上。在鼠标悬停部分的工作代码下方。

eventMouseover: function(event, jsEvent, view) {
 if (view.name !== 'agendaDay') {
    $(jsEvent.target).attr('title', event.title);
   }
},

此处显示活动标题。需要显示开始和结束时间。请帮我。如果可能的话，还可以在鼠标悬停部分添加样式。这些东西怎么做，请帮忙。

提前感谢您的帮助。

【问题讨论】：

标签： javascript jquery calendar fullcalendar

【解决方案1】：

如果我理解正确，你可以试试这个解决方案：

                    eventMouseover: function(calEvent, jsEvent) {  

                    var durationTime = moment(calEvent.start).format('HH') + ":" + moment(calEvent.start).format('mm') + " - " + moment(calEvent.end).format('HH') + ":" + moment(calEvent.end).format('mm')
                    var tooltip = '<div class="tooltipevent" style="width:100px; height:20px; position:absolute;z-index:1000;">' + durationTime + '</div>';
                    $("body").append(tooltip);
                    $(this).mouseover(function(e) {
                        $(this).css('z-index', 10000);
                        $('.tooltipevent').fadeIn('500');
                        $('.tooltipevent').fadeTo('10', 1.9);
                    }).mousemove(function(e) {
                        $('.tooltipevent').css('top', e.pageY + 10);
                        $('.tooltipevent').css('left', e.pageX + 20);
                    });
                },

                eventMouseout: function(calEvent, jsEvent) {
                    $(this).css('z-index', 8);
                    $('.tooltipevent').remove();
                }

这个解决方案是 ref by this > Tooltip for fullcalendar in year view

【讨论】：

【解决方案2】：

如果您使用qTip2 之类的工具提示库，则可以轻松添加工具提示并设置其样式。编辑来自eventRender 的示例作为演示

$('#calendar').fullCalendar({
  defaultView: 'basicWeek',
  events: [{
      title: 'My Event',
      start: moment().format('YYYY-MM-DD') + ' 16:30',
      end: moment().format('YYYY-MM-DD') + ' 17:00',
      description: 'This is an event from 4:30pm to 5:00pm'
    }
    // more events here
  ],
  eventRender: function(event, element) {
    element.qtip({
      content: 	'<b>' + event.start.format('hh:mma') + ' - ' + event.end.format('hh:mma') + '</b>' +
        	'<br>' +
        	'<u>' + event.description + '</u>'
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.2/fullcalendar.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.2/fullcalendar.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.css" rel="stylesheet"/>
<div id='calendar'></div>

【讨论】：