27-Oct-2020
.
Admin
Hello Friends,
Now let's see example of how to count event per day in fullcalendar using jquery. in this tutorial, we will get events on dayClick in fullcalendar. This tutorial will give fullcalendar count events per day. if you want to get count total event in a day in fullcalendar then you can use bellow example.
Here i will give full example of how to get count events per day in fullcalendar using jquery. So let's see the bellow example.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Fullcalendar Get Event Count Using Jquery Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.css" />
</head>
<style type="text/css">
#calendar {
width:60%;
margin: 20px auto;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div id="calendar"></div>
</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/momentjs/2.14.1/moment-with-locales.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultDate: '2020-10-12',
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2020-10-01',
color: 'red',
textColor: 'white',
},
{
title: 'Long Event',
start: '2020-10-03',
color: 'red',
textColor: 'white',
},
{
id: 999,
title: 'Repeating Event',
start: '2020-10-04',
color: 'red',
textColor: 'white',
},
{
id: 999,
title: 'Repeating Event',
start: '2020-10-10',
color: 'red',
textColor: 'white',
},
{
id: 101,
title: 'Second Repeating Event',
start: '2020-10-10',
color: 'red',
textColor: 'white',
},
{
id: 101,
title: 'Third Repeating Event',
start: '2020-10-10',
color: 'red',
textColor: 'white',
},
{
title: 'Conference',
start: '2020-10-01',
color: 'red',
textColor: 'white',
},
{
title: 'Meeting',
start: '2018-03-12'
},
{
title: 'Lunch',
start: '2018-03-12'
},
{
title: 'Meeting',
start: '2018-03-12'
},
{
title: 'Happy Hour',
start: '2018-03-12'
},
{
title: 'Dinner',
start: '2018-03-12'
},
{
title: 'Birthday Party',
start: '2018-03-13'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2018-03-28'
}
],
dayClick: function(date, allDay, jsEvent, view) {
var eventsCount = 0;
var date = date.format('YYYY-MM-DD');
$('#calendar').fullCalendar('clientEvents', function(event) {
var start = moment(event.start).format("YYYY-MM-DD");
var end = moment(event.end).format("YYYY-MM-DD");
if(date == start)
{
eventsCount++;
}
});
alert(eventsCount);
}
});
});
</script>
</html>
I hope it will help you...
#Fullcalendar
