Fullcalendar Get Event By Id Example

General · 26-Oct-2020

Hi Guys,

In this blog, I would like to share with you how to get event by id in fullcalendar using jquery. We will show get event by id in fullcalendar. I will learn you how to get event id using jquery in fullcalendar example.

Here i will give you full example for how to get event id using jquery in fullcalendar.

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Fullcalendar Get Event By Id 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://cdn.jsdelivr.net/npm/[email protected]/main.min.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://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/main.min.js"></script>
<script src="https://fullcalendar.io/assets/demo-to-codepen.js"></script>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
        eventClick: function(info) {
        var eventObj = info.event;
            if (eventObj.id) {
                alert('Clicked Event Id = ' + eventObj.id);
                console.log('Clicked Event Id = ' + eventObj.id);
            }
        },
        events: [
            {
                id:  1,
                title: 'simple event',
                start: '2020-10-02'
            },
            {
                id:  2,
                title: 'New Event',
                start: '2020-10-03'
            },
            {
                id:  12,
                title: 'Coming Event',
                start: '2020-10-22'
            }
        ]
    });
    calendar.render();
});
</script>
</html>

It will help you...