FullCalendar出现在具有更高z-index的背景幕后

Posted 2021-04-07

我试图让FullCalendar的一些事件出现在我创建的背景前面，但我无法改变z-index，我不知道为什么。

我已经设法在背景前获得整个日历div，但我似乎无法定位一个事件并设置z-index。

我对模态和背景没有那么多经验 - 我错过了CSS属性吗？

$(document).ready(function() {
  $("#calendar").fullCalendar({
    header: {
      right: "prev,next"
    },
    slotDuration: "00:05:00",
    slotLabelInterval: "00:15:00",
    contentHeight: "auto",
    defaultView: "agendaWeek",
    eventDurationEditable: false,
    allDaySlot: false,
    eventLimit: true,
    events: [{
      title: "Test Entry",
      start: "2017-12-18T01:00:00",
      end: "2017-12-18T02:00:00"
    }]
  });
});

@import url('https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.print.css');
#calendar {
  width: 800px;
  position: absolute;
}

.fc-event {
  z-index: 20;
}

#backdrop {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
  background-color: rgb(0, 0, 0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.min.js"></script>
<div id="backdrop">
</div>
<div id="calendar">
</div>

Codepen：https://codepen.io/anon/pen/YYwrqq

答案

这有效，更新你的愿望：

$(document).ready(function() {
  $("#calendar").fullCalendar({
    header: {
      right: "prev,next"
    },
    slotDuration: "00:05:00",
    slotLabelInterval: "00:15:00",
    contentHeight: "auto",
    defaultView: "agendaWeek",
    eventDurationEditable: false,
    allDaySlot: false,
    eventLimit: true,
    events: [{
      title: "Test Entry",
      start: "2017-12-18T01:00:00",
      end: "2017-12-18T02:00:00"
    }]
  });
});

@import url('https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.print.css');
#backdrop {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
  background-color: rgb(0, 0, 0);
}

#calendar {
  width: 800px;
  position: absolute;
  z-index: 1;
}

.fc td,
.fc th {
  background-color: rgba(0, 0, 0, .8) !important;
  border: 1px solid rgba(0, 0, 0, .8) !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.min.js"></script>
<div id="backdrop">
</div>
<div id="calendar">
</div>

以上是关于FullCalendar出现在具有更高z-index的背景幕后的主要内容，如果未能解决你的问题，请参考以下文章

如何传递具有多个标题的php数组并开始到fullCalendar 3

光标在具有更高 z-index 的重叠 div 上可见

不需要的字符串与fullcalendar中的所有事件标题一起出现

在FullCalendar上启用时区

如何在FullCalendar v2.1.1中指定自定义日期范围？

fullcalendar使用