在 fullcalendar3 中查看悬停的完整内容

Posted 2023-02-19

【中文标题】在 fullcalendar3 中查看悬停的完整内容

【英文标题】：See the full content on hover over in fullcalendar3

【发布时间】：2022-01-13 01:23:42

【问题描述】：

我有以下fullcalendar我使用以下代码构造的

var todayDate = new Date();
$('#calendar').fullCalendar(
  defaultDate: todayDate,
  eventLimit: true, // allow "more" link when too many events
  events: [
    title: 'XX-XXXXX-X: YYYY,AAAAAA,BBBBB,CCCCCC,DDDDD,EEEEEE,FFFFFF,GGGGGG',
    start: '2021-10-06',
    color: 'yellow'
  ]
);

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>
<div class="ui container">
  <div class="ui grid">
    <div class="ui sixteen column">
      <div id="calendar"></div>
    </div>
  </div>
</div>

结果如下

但是您可以看到2021-10-06 中的内容太长了。 fullcalendar 中是否有任何选项可以让鼠标悬停在上面，可以看到全部内容？

【参考方案1】：

你可以这样试试：

    var todayDate = new Date();
    $('#calendar').fullCalendar(
        defaultDate: todayDate,
        eventLimit: true, // allow "more" link when too many events
        events: [
            title: 'XX-XXXXX-X: YYYY,AAAAAA,BBBBB,CCCCCC,DDDDD,EEEEEE,FFFFFF,GGGGGG',
            start: '2021-12-09',
            color: 'yellow',
            description: 'description for Long Event',
        ],
        eventMouseover: function(calEvent, jsEvent) 
            var tooltip = '<div class="tooltipevent" style="width:100px;height:100px;background:#ccc;position:absolute;z-index:10001;">' + calEvent.title + '</div>';
            var $tooltip = $(tooltip).appendTo('body');

            $(this).mouseover(function(e) 
                $(this).css('z-index', 10000);
                $tooltip.fadeIn('500');
                $tooltip.fadeTo('10', 1.9);
            ).mousemove(function(e) 
                $tooltip.css('top', e.pageY + 10);
                $tooltip.css('left', e.pageX + 20);
            );
        ,

        eventMouseout: function(calEvent, jsEvent) 
            $(this).css('z-index', 8);
            $('.tooltipevent').remove();
        ,
    );

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>

<script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script>
<script src='https://unpkg.com/tooltip.js/dist/umd/tooltip.min.js'></script>

<div class="ui container">
    <div class="ui grid">
        <div class="ui sixteen column">
            <div id="calendar"></div>
        </div>
    </div>
</div>