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

I am working on full calendar for some days. I am facing a problem and I search in lot of place, nothing is working.
I want to show the start and end time on mouseover. I have customised the calendar in a day format. Where I have 30 min. slots. There are some events. I have the code where the event tile is shown on mouse over not the start and time. Below the working code of mouseover section.

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

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

The event title is display here. Need to show the start and end time. Please help me. And also if possible to add style in the mouseover section. How to do these things, please help.

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

Thanks in advance for help.

在此先感谢您的帮助。

2 个解决方案

#1

If I understand you correctly, you can try this solution :

如果我理解正确,您可以尝试以下解决方案:

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

this solution is ref by this > Tooltip for fullcalendar in year view

这个解决方案是通过这个>工具提示在年视图中的fullcalendar

#2

If you use a tooltip library like qTip2 it is easy to add and style a tooltip. Editing the example from eventRender as a demo

如果您使用像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>

#1