javascript - 在 fullcalendar.js 中的事件上添加悬停 div

Question

我在我的项目中使用fullcalendar.js我想做的是在该 div 内的任何事件的悬停时显示一个 div 我有三个操作按钮编辑、查看、删除让我给你看我的代码

HTML

 <div id="calendar"/>

JavaScript/jQuery

<script>
      $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay,listWeek'
                },
                eventMouseover: function(event, jsEvent, view) {
                    $template="<div class='hover-div clearfix' id='event_"+event.id+"'>"+
                        "<div class='display-inline-block'>"+
                        "<i class='fas fa-pencil-alt'></i>"+
                        "<a class='edit-calender common-font-properties'>Edit</a>"+
                        "</div>"+
                        "<div class='display-inline-block'>"+
                        "<i class='fas fa-eye'></i>"+
                        "<a class='edit-calender common-font-properties'>View</a>"+
                        "</div>"+
                        "<div class='display-inline-block'>"+
                        " <i class='fas fa-trash'></i>"+
                        " <a class='edit-calender common-font-properties'>Delete</a>"+
                        " </div>"+
                        "</div>";

                                       //$('.fc-content .fc-title', this).wrapAll("<div class='wrapall'><div>");
//                    $('.fc-content .wrapall', this).prepend($template);
                    $('.fc-content', this).prepend($template);
                },

                eventMouseout: function(event, jsEvent, view) {
                    //$('#event_'+event.id).remove();
                },
                navLinks: true, // can click day/week names to navigate views
                editable: true,
                eventLimit: true, // allow "more" link when too many events
                events: [

                    {
                        id: 7,
                        title: 'Lunch',
                        start: '2018-08-12T12:00:00'
                    },
                    {
                        id: 8,
                        title: 'Meeting',
                        start: '2018-08-13T14:30:00'
                    },
                    {
                        id: 9,
                        title: 'Happy Hour',
                        start: '2018-08-14T17:30:00'
                    },
                    {
                        id: 10,
                        title: 'Dinner',
                        start: '2018-08-15T20:00:00'
                    },
                    {
                        id: 11,
                        title: 'Birthday Party',
                        start: '2018-08-16T07:00:00'
                    },
                    {
                        id: 12,
                        title: 'Click for Google',
                        url: 'http://google.com/',
                        start: '2018-03-28'
                    }
                ]
            });
  </script>

JSBIN

我面临的问题非常简单，我正在创建的悬停 div 位于盒子的背面，它在较小的屏幕上不完全可见，所有东西都隐藏了，我尝试了很多尝试z-index等的东西，但我仍然无法增加z-index或使我的 div 可见。有什么帮助吗？

标签： javascriptfullcalendar

Answer 1

使用您当前的标记，这将不起作用，子级的 z-index 不能大于父级，它被设置为相同的堆叠索引。您必须将悬停 div 放在日历标记之外并正确定位。

尽管您当然可以自己编写它，但实现它的最简单方法是使用库。

查看 Fullcalendar演示，它使用 Bootstrap 弹出框功能。打开您的开发工具并将鼠标悬停在某个事件上，您将看到工具提示的标记已添加到日历下方。如果您还没有使用 Bootstrap，另一种选择是qtip2，它是一个 jQuery 插件，您将使用它作为 FC 依赖项。

使用 qTip2 的示例：

$("#calendar").fullCalendar({
  defaultView: "basicWeek",
  defaultDate: "2018-04-07",
  resources: [
    { id: "a", title: "Room A" },
    { id: "b", title: "Room B", eventColor: "green" },
    { id: "c", title: "Room C", eventColor: "orange" },
    { id: "d", title: "Room D", eventColor: "red" }
  ],
  events: [
    {
      id: "1",
      resourceId: "a",
      start: "2018-04-06",
      end: "2018-04-08",
      title: "event 1"
    },
    {
      id: "2",
      resourceId: "a",
      start: "2018-04-07T09:00:00",
      end: "2018-04-07T14:00:00",
      title: "event 2"
    },
    {
      id: "3",
      resourceId: "b",
      start: "2018-04-07T12:00:00",
      end: "2018-04-08T06:00:00",
      title: "event 3"
    },
    {
      id: "4",
      resourceId: "c",
      start: "2018-04-07T07:30:00",
      end: "2018-04-07T09:30:00",
      title: "event 4"
    },
    {
      id: "5",
      resourceId: "d",
      start: "2018-04-07T10:00:00",
      end: "2018-04-07T15:00:00",
      title: "event 5"
    }
  ],
  eventRender: function(event, element) {
    element.qtip({
      content: {
        title: { text: event.title },
        text:
          '<span class="title">Start: </span>' +
          $.fullCalendar.formatDate(event.start, "hh:mmtt") +
          '<br><span class="title">Description: </span>' +
          event.description
      },
      hide: {
        delay: 200,
        fixed: true
      },
      position: {
        target: "mouse", // Use the mouse position as the position origin
        adjust: {
          // Don't continuously  the mouse, just use initial position
          mouse: false
        }
      }
    });
  }
});

带有工作 qTip2 演示的 CodePen 。