Question

我正在使用fullcalendar 1.x.

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

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

这是脚本：

＆＃13;

<!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>

＆＃13;

感谢提示！

Answer 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>

Answer 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");
                }

这是一个小技巧，但是当我遇到相同的问题时，它达到了我所需要的。

Answer 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%');
},

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

3 个答案: