完整日历中同一日期的多个事件问题

Question

代码：

<script>
    $('#calendar').fullCalendar({
        events: <?php echo $datas; ?>,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        eventClick:  function(event, jsEvent, view) {
            $("#edit_delete").html(
                                '<a href="<?php echo base_url(); ?>timetable/edit_professor_classes/'+event.id+'" style="margin-right: 5px;"><i class="fa fa-edit btn btn-success"></i></a>'+'<a href="<?php echo base_url(); ?>timetable/delete_professor_classes/'+event.id+'"><i class="fa fa-trash btn btn-danger"></i></a>'
                            ),
            $('#modalTitle').html(event.title);
            $('#classes').html(event.classes);
            $('#semester').html(event.semester);
            $('#subject').html(event.subject);
            $('#startdate').html(event.dates);
            $('#timestart').html(event.times);
            $('#fullCalModal').modal('show');
        }
    });
</script>

在这段代码中，我使用 fullcalendar js 创建了一个事件日历，它工作正常，但问题是如果我在同一日期添加多个事件，那么它会显示很长时间。我想显示 minimum 和 something lime view more event show 我该怎么做？请帮助我。

谢谢

Answer 1

Fullcalendar.js提供了限制事件显示数量的方法，使用以下方法控制事件限制：

eventLimit: true, // allow "more" link when too many events
eventLimitText: "More", //sets the text for more events

将您的代码更改为以下内容：

<script>
$('#calendar').fullCalendar({
    events: <?php echo $datas; ?>,
    eventLimit: true, // allow "more" link when too many events
    eventLimitText: "More", //sets the text for more events
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    eventClick:  function(event, jsEvent, view) {
        $("#edit_delete").html(
                            '<a href="<?php echo base_url(); ?>timetable/edit_professor_classes/'+event.id+'" style="margin-right: 5px;"><i class="fa fa-edit btn btn-success"></i></a>'+'<a href="<?php echo base_url(); ?>timetable/delete_professor_classes/'+event.id+'"><i class="fa fa-trash btn btn-danger"></i></a>'
                        ),
        $('#modalTitle').html(event.title);
        $('#classes').html(event.classes);
        $('#semester').html(event.semester);
        $('#subject').html(event.subject);
        $('#startdate').html(event.dates);
        $('#timestart').html(event.times);
        $('#fullCalModal').modal('show');
    }
});

查看实例

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'dayGrid' ],
    timeZone: 'UTC',
    eventLimit: true, // allow "more" link when too many events
    eventLimitText:"More Events",
    events: 'https://fullcalendar.io/demo-events.json?overload-day'
  });

  calendar.render();
});

<!DOCTYPE html>
<html>
<head>
 <title>Example</title>
 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.css">
 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.css">
</head>
<body>
<div id="calendar"></div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.js"></script>
</body>
</html>

完整日历中同一日期的多个事件问题

Multiple event issue on same date in full calendar

javascript

jquery

fullcalendar

fullcalendar-3