FullCalendar Count Events Per Day

General · 27-Oct-2020

Development teams using “FullCalendar Count Events Per Day” in client or internal work can use the related planning guide to document project effort and hand-offs, then assess the record against delivered functionality, tests and agreed outcomes.

Validate current syntax, security guidance and supported versions through GitHub before using the example in production.

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