Question

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

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

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

提前感谢您的帮助。

Answer 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();
                }

此解决方案由此参考＆gt; Tooltip for fullcalendar in year view

Answer 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>

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

2 个答案: