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

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 创建了一个事件日历，该日历工作正常，但问题是如果我在同一日期添加多个事件，那么它会显示很长时间。我想显示最低限度和一些石灰view more event显示我该怎么做？请帮我。

谢谢

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

检查现场示例

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