FullCalendar V4 DEMO

by Bhavik Bamania

HTML

<script src="https://jakubroztocil.github.io/rrule/dist/es5/rrule.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.min.css">
<script src="https://unpkg.com/@fullcalendar/[email protected]/main.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.min.css">
<script src="https://unpkg.com/@fullcalendar/[email protected]/main.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.min.css">
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/[email protected]/main.min.js"></script>
<div id='calendar'></div>

JavaScript

var calendarEl = document.getElementById('calendar');
 var calendar = new FullCalendar.Calendar(calendarEl, {
  plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'rrule'],
                timeZone: 'UTC',
                defaultView: 'dayGridMonth',
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                },
                editable: true,
   events: [
                     {
                        title: 'event with everyday with range',
                        allDay: true,
                        rrule: {
                            freq: 'daily',
                            dtstart: '2019-04-02',
                            until: '2019-04-09'
                        },
                        duration: {days: 8}
                    },
                ],
 });
 calendar.render();