javascriptjqueryfullcalendarfullcalendar-3

Multiple event issue on same date in full calendar


code:

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

enter image description here

In this code I have create an event calendar using fullcalendar js which is working fine but the problem is if I add multiple event on same date then it show so long. I want to show minimum and something lime view more event show how can I do this? Please help me.

Thank You


Solution

  • Fullcalendar.js provides methods to limit number of events to display, use the following methods to control the events limit:

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

    Change your code to the following:

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

    Check the live example

    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>