在fullcalendar.js中的事件上添加懸停div

Question

我在我的項目中使用fullcalendar.js我想做的是在div內任何事件的懸停上顯示一個div，我有三個操作按鈕edit，view，delete，讓我向您展示我的代碼

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索引或使我的div可見。 有什么幫助嗎？

Answer 1

使用您當前的標記，這將無法正常工作，子級的z-index不能大於父級，將z-index設置為相同的堆疊索引。 您將必須將鼠標懸停在日歷的標記之外，並將其正確放置。

盡管您當然可以自己編寫，但是最簡單的方法是使用庫。

看一下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
        }
      }
    });
  }
});

CodePen與工作qTip2演示。