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 < / strong>等，但我仍然无法增加 z-index 或使我的div可见。有帮助吗？

Answer 1

使用您当前的标记，这将无法正常工作，子级的z-index不能大于父级，将其设置为相同的堆叠索引。您必须将鼠标悬停在日历的标记之外，然后将其正确放置。

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

看看Fullcalendar demo，它使用了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演示。

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

1 个答案: