时间戳

首页 > 解决方案 > 如何实现全日历工具提示

fullcalendar - 如何实现全日历工具提示

问题描述

我正在尝试将工具提示添加到 fullcalendar。我使用 Angular 2 模块（ap-angular2-fullcalendar）。需要以编程方式创建工具提示，以便工具提示内容与事件内容匹配（例如：描述）。

我尝试使用qtip和材料 MatToolTip库但没有成功（我设法将工具提示添加到 DOM，但它不起作用）。

标签： fullcalendartooltip

解决方案

您需要使用eventRender例如

      eventRender: function(eventObj, $el) {
        $el.popover({
          title: eventObj.title,
          content: eventObj.description,
          trigger: 'hover',
          placement: 'top',
          container: 'body'
        });
      },

在此处查看一个工作示例- 注意此示例依赖于 Bootstrap 和 Popper.js

您还可以使用 Bootstrap 工具提示而不是弹出框，例如

      eventRender: function(event, element) {
        $(element).tooltip({title: event.tooltip,
                  container: 'body',
                  delay: { "show": 500, "hide": 300 }
        });
      },

推荐阅读