[英]Adding event hovertext in fullcalendar
I'm trying to include a hover text on events in a month calendar page of full calendar.我正在尝试在完整日历的月历页面中的事件中包含 hover 文本。
I have and array object declaring the events that need to be on the page as loaded in by a php script.我有数组 object 声明需要在页面上由 php 脚本加载的事件。 It looks as followed:它看起来如下:
$('#calendar').fullCalendar({
events: [
{
title : 'event1',
start : '2010-01-01'
},
{
title : 'event2',
start : '2010-01-05',
end : '2010-01-07'
}
]
}); });
I am trying to use the eventMouseover function to include a hover text with each event.我正在尝试使用 eventMouseover function 在每个事件中包含 hover 文本。 This function's prototype is as followed: function( event, jsEvent, view ) { } Where event is the event object, jsEvent is the native JavaScript event with low-level information such as mouse coordinates.该函数的原型如下: function( event, jsEvent, view ) { } 其中 event 是事件 object,jsEvent 是带有鼠标坐标等低级信息的原生 JavaScript 事件。 and the view holds the view object of fullcalendar.并且视图包含 fullcalendar 的视图 object。 I am not able to correctly call the arguments of this function.我无法正确调用此 function 的 arguments。 My info is coming from here: http://arshaw.com/fullcalendar/docs/mouse/eventMouseover/ and I'm totally cool with other ways of achieving a hovertext on each event.我的信息来自这里: http://arshaw.com/fullcalendar/docs/mouse/eventMouseover/我对在每个事件上实现悬停文本的其他方法非常满意。 Thank you.谢谢你。
You're on the right track.你在正确的轨道上。 I did something similar to show the event end time at the bottom of the event in agenda view.我做了类似的事情,在议程视图的事件底部显示事件结束时间。
Options on the calendar:日历上的选项:
eventMouseover: function(event, jsEvent, view) {
$('.fc-event-inner', this).append('<div id=\"'+event.id+'\" class=\"hover-end\">'+$.fullCalendar.formatDate(event.end, 'h:mmt')+'</div>');
}
eventMouseout: function(event, jsEvent, view) {
$('#'+event.id).remove();
}
CSS for the hover over: CSS 用于 hover 超过:
.hover-end{padding:0;margin:0;font-size:75%;text-align:center;position:absolute;bottom:0;width:100%;opacity:.8}
Hopefully this helps you希望这可以帮助你
Without bootstrap, even simpler to add just browser tooltip with没有引导程序,只需添加浏览器工具提示就更简单了
eventRender : function(event, element) {
element[0].title = event.title;
}
If you are using bootstrap, this is very elegant solution:如果您使用的是引导程序,这是非常优雅的解决方案:
eventRender: function(event, element) {
$(element).tooltip({title: event.title});
}
(I got it from this answer: https://stackoverflow.com/a/27922934/2941313 ) (我从这个答案中得到它: https://stackoverflow.com/a/27922934/2941313 )
For me this is what I did as I needed to mod other great answers.对我来说,这就是我所做的,因为我需要修改其他很棒的答案。
HTML: HTML:
(eventRender)="addHoverTitle($event)"
Component:零件:
addHoverTitle(args: any): void {
args.el.title = args.event.title;
}
In version 4 of FullCalendar, there is only one argument: eventRender: function (info) so the snippet is:在 FullCalendar 的第 4 版中,只有一个参数: eventRender: function (info) 所以片段是:
WORK WITH BOOTSTRAP使用引导程序
eventRender: function (info) {
$(info.el).tooltip({ title: info.event.title });
}
If you are using Angular如果您使用的是Angular
Html: Html:
<full-calendar
...
(eventLeave)="eventLeave($event)">
</full-calendar>
Typescript: Typescript:
eventRender($event) {
$event.el.title = $event.event.title;
}
In the Calendar options I used this for my angular project:在日历选项中,我将其用于我的 angular 项目:
eventMouseEnter: function (calEvent) {
calEvent.el.title = calEvent.event.title;
},
If you are using fullcalendar version5:如果您使用的是 fullcalendar 版本 5:
eventMouseEnter: function(info) {info.el.title = info.event.start;}, eventMouseEnter:函数(信息){info.el.title = info.event.start;},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.