Get started with fullcalendar CDN

MIT licensed

FullCalendar is a popular open-source library for displaying and managing calendar events.

Tags:
  • calendar
  • event
  • full-sized
  • jquery-plugin

Stable version

Copied!

How to start using fullcalendar CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with fullcalendar CDN - cdnhub.io</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/main.min.css">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/main.min.js"></script>
</head>
<body>
    <div id="calendar"></div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const calendarEl = document.getElementById('calendar');
            const calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                selectable: true,
                editable: true,
                events: [
                    { title: 'All-day event', start: '2022-01-01' },
                    { title: 'Long event', start: '2022-01-07', end: '2022-01-10' },
                    { title: 'Repeating event', start: '2022-01-09T16:00:00' },
                    { title: 'Time event', start: '2022-01-11T10:30:00', end: '2022-01-11T12:30:00' },
                ],
            });
            calendar.render();
        });
    </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!

All versions