fullcalendar.js 在悬停时扩展事件以显示完整内容答案

【问题标题】：fullcalendar.js extend event on hover to show full contentfullcalendar.js 在悬停时扩展事件以显示完整内容
【发布时间】：2021-02-19 00:13:12
【问题描述】：

我正在使用全日历 1.x。

在日历中，一些事件的标题很长，不完全可见。我想要完成的是将事件扩展（悬停，稍有延迟）到下一列，以显示 .fc-content 的全部内容。

我不确定我是否清楚地描述了它，但这里有一个模拟效果的工作演示，我想得到。（在模拟中我动态添加 colspan，只是为了展示我希望事件在悬停时的样子）。

这是脚本：

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.3/fullcalendar.min.js"></script>
  <script src="script.js"></script>
  <script>
    $(document).ready(function() {
      $('#calendar').fullCalendar({
        header: {
          left: 'prev,next today',
          center: 'title',
          right: 'month,basicWeek,basicDay'
        },
        firstDay: 1,
        allDaySlot: false,
        timeFormat: 'H:mm',
        axisFormat: 'H:mm',
        height: 650,
        defaultDate: '2016-05-12',
        editable: true,
        displayEventEnd: {
          month: true
        },
        eventLimit: true, // allow "more" link when too many events
        events: [{
          title: 'All Day Event',
          start: '2016-05-01'
        }, {
          title: 'Long Event',
          start: '2016-05-07',
          end: '2016-05-10'
        }, {
          id: 999,
          title: 'Repeating Event',
          start: '2016-05-09T16:00:00'
        }, {
          id: 999,
          title: 'Repeating Event',
          start: '2016-05-16T16:00:00'
        }, {
          title: 'Conference',
          start: '2016-05-11',
          end: '2016-05-13'
        }, {
          title: 'Meeting',
          start: '2016-05-12T10:30:00',
          end: '2016-05-12T12:30:00'
        }, {
          title: 'Lunch',
          start: '2016-05-12T12:00:00'
        }, {
          title: 'Meeting',
          start: '2016-05-12T14:30:00',
          start: '2016-05-12T18:30:00'
        }, {
          title: 'Happy Hour',
          start: '2016-05-12T17:30:00'
        }, {
          title: 'Dinner',
          start: '2016-05-12T20:00:00'
        }, {
          title: 'Birthday Party',
          start: '2016-05-13T07:00:00'
        }, {
          title: 'Click for Google',
          url: 'http://google.com/',
          start: '2016-05-28'
        }]
      });

      $('.fc-title').hover(function() {
        $(this).parent().parent().parent().attr('colSpan', 2);
      });

    });
  </script>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.3/fullcalendar.min.css" />
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <h1>Hello Plunker!</h1>
  <div id="calendar"></div>
</body>

</html>

感谢提示！

【问题讨论】：

标签： css fullcalendar

【解决方案1】：

我不太确定您正在寻找的效果，但也许这样的事情可能会对您有所帮助：

.fc-event-hover {
  position: relative !important;
  height: 17px;
}
.fc-event-hover .fc-content {
  position: absolute !important;
  top: -1px;
  left: 0;
  background: red;
  z-index: 99999;
  width: auto;
  overflow: visible !important;
  background-color: #3a87ad;
  padding: 1px;
  border-radius: 2px;
}
.fc-content-skeleton tr td:last-child .fc-event-hover .fc-content {
  left: auto;
  right: 0;
}

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.3/fullcalendar.min.js"></script>
  <script src="script.js"></script>
  <script>
    $(document).ready(function() {
      $('#calendar').fullCalendar({
        header: {
          left: 'prev,next today',
          center: 'title',
          right: 'month,basicWeek,basicDay'
        },
        firstDay: 1,
        allDaySlot: false,
        timeFormat: 'H:mm',
        axisFormat: 'H:mm',
        height: 650,
        defaultDate: '2016-05-12',
        editable: true,
        displayEventEnd: {
          month: true
        },
        eventLimit: true, // allow "more" link when too many events
        events: [{
          title: 'All Day EventAll Day Event',
          start: '2016-05-01'
        }, {
          title: 'Long Event',
          start: '2016-05-07',
          end: '2016-05-10'
        }, {
          id: 999,
          title: 'Repeating Event',
          start: '2016-05-09T16:00:00'
        }, {
          id: 999,
          title: 'Repeating Event',
          start: '2016-05-16T16:00:00'
        }, {
          title: 'Conference',
          start: '2016-05-11',
          end: '2016-05-13'
        }, {
          title: 'Meeting',
          start: '2016-05-12T10:30:00',
          end: '2016-05-12T12:30:00'
        }, {
          title: 'Lunch',
          start: '2016-05-12T12:00:00'
        }, {
          title: 'Meeting',
          start: '2016-05-12T14:30:00',
          start: '2016-05-12T18:30:00'
        }, {
          title: 'Happy Hour',
          start: '2016-05-12T17:30:00'
        }, {
          title: 'Dinner',
          start: '2016-05-12T20:00:00'
        }, {
          title: 'Birthday Party',
          start: '2016-05-13T07:00:00'
        }, {
          title: 'Click for Google',
          url: 'http://google.com/',
          start: '2016-05-28'
        }]
      });

      $('.fc-event').mouseenter(function() {
        $(this).addClass('fc-event-hover');
      });
      $('.fc-event').mouseleave(function() {
        $(this).removeClass('fc-event-hover');
      });

    });
  </script>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.3/fullcalendar.min.css" />
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <h1>Hello Plunker!</h1>
  <div id="calendar"></div>
</body>

</html>

【讨论】：

是的，这就是我要找的！还有更多的事情：如果你将鼠标悬停在 Sunday' 事件上，它不会展开，是否可以向左展开？
完成了，你只需要开始练习 JS 和 CSS 的正确组合，现在你可以用简单的 CSS 解决很多此类问题。

【解决方案2】：

                eventMouseover: function(event, jsEvent, view) {
                    var myTarget = $(jsEvent.target);

                    if (!myTarget.hasClass('fc-event')) {
                        myTarget = myTarget.closest('.fc-event');
                    }
                    myTarget.css("display","inline-table");
                },
                eventMouseout: function(event, jsEvent, view) {
                    var myTarget = $(jsEvent.target);

                    if (!myTarget.hasClass('fc-event')) {
                        myTarget = myTarget.closest('.fc-event');
                    }
                    myTarget.css("display","initial");
                }

这有点小技巧，但是当我遇到同样的问题时，它实现了我所需要的。

【讨论】：

【解决方案3】：

我的代码使用 timegrid 和 fullcalendar v4 在他的列上显示整个事件

eventMouseEnter: function( mouseLeaveInfo ) {
    var myTarget = $(mouseLeaveInfo.el);
    if (!myTarget.hasClass('fc-event')) {
        myTarget = myTarget.closest('.fc-event');
    }
    //myTarget.css("display","inline-table");

    var oldch = myTarget.height();
    myTarget.data("myheight", oldch);
    var innerelem = myTarget.find(".fc-content").first();
    innerelem.css('max-height', 'none');
    innerelem.css('white-space', 'break-spaces');
    var ih = innerelem.height();
    if(oldch<ih){
        myTarget.css('height', ih+'px');
    }
},
eventMouseLeave: function( mouseLeaveInfo ){
    var myTarget = $(mouseLeaveInfo.el);

    if (!myTarget.hasClass('fc-event')) {
        myTarget = myTarget.closest('.fc-event');
    }
    //myTarget.css("display","block");

    var oldch = myTarget.data("myheight");
    var innerelem = myTarget.find(".fc-content").first();
    myTarget.css('height', oldch+'px');
    innerelem.css('white-space', 'nowrap');
    innerelem.css('max-height', '100%');
},

【讨论】：