Search code examples
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>