angular - 当鼠标悬停在fullcalendar Angular 6中的事件时显示弹出框
问题描述
我在 Angular 6 项目中使用 Fullcalendar,我想在鼠标悬停事件时显示一个弹出框
使用此代码,我的控制台没有问题,但也没有显示任何内容
TS 文件:
PopOver(elem): void {
console.log(elem);
$(elem.element).popover({
title: 'the title',
content: 'qsdqsd',
placement: 'top',
trigger: 'manual',
delay: { show: 200, hide: 100 },
animation: true,
container: '#calendar',
html: true,
}).popover('show');
}
HTML 文件:
<div *ngIf="calendarOptions">
<ng-fullcalendar #ucCalendar
[options]="calendarOptions"
(eventResize)="draging($event)"
(eventStartEditable)="true"
(eventDrop)="draging($event)"
(eventMouseover)="PopOver(this)"
(eventMouseout)="undisplay()"
></ng-fullcalendar>
</div>
我尝试了许多其他解决方案,但没有请我需要一个答案,这对我很重要
解决方案
我知道这篇文章迟到了,但我找到了解决方法。
我的 HTML
<div *ngIf="calendarOptions">
<ng-fullcalendar #ucCalendar [options]="calendarOptions" (eventClick)="eventClick($event.detail)" (eventDrop)="updateEvent($event.detail)"
(eventResize)="updateEvent($event.detail)" (clickButton)="clickButton($event.detail)"></ng-fullcalendar>
</div>
我的 eventClick 方法的打字稿
事件点击(型号:任何){
var popTemplate = [
'<div class="popover" style="max-width:600px;" >',
'<div class="arrow"></div>',
'<div class="popover-header">',
'<button id="closepopover" type="button" class="close" aria-hidden="true">×</button>',
'<h3 class="popover-title"></h3>',
'</div>',
'<div class="popover-content"></div>',
'</div>'].join('');
$('.popover').not(model.jsEvent.currentTarget).popover('hide');
$(model.jsEvent.currentTarget).popover({
title: 'the title',
content: function () {
return "This <em>rich</em> <pre>html</pre> content goes inside popover";
},
template: popTemplate,
placement: 'left',
html: true,
trigger: 'click',
animation: true,
container: 'body'
}).popover('show');
}
我希望这可以帮助别人
推荐阅读
- mongodb - 获取具有多个条件的 MongoDB 集合记录
- java - 调用“子字符串”是多余的
- javascript - 如何每 5 分钟重绘一次画布仪表板?
- aspnetboilerplate - 启动项目中的 Web.Tests 项目发生了什么?
- objective-c - Objective-C 崩溃:从类创建对象
- python - PyMongo如何获取集合中的最后一项?
- javascript - 获取特定单元中某个css属性的值
- sendmail - 由于“握手错误”,无法使用 STARTTLS 连接到 Outlook SMTP
- ruby-on-rails - 如何在 rake 任务中使用 ActiveStorage 将图像附加到对象?
- c# - HTTPwebresponse 不起作用,我无法发布任何内容