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