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/core@4.0.1/main.min.css">
<script src="https://unpkg.com/@fullcalendar/core@4.0.1/main.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.0.1/main.min.css">
<script src="https://unpkg.com/@fullcalendar/daygrid@4.0.1/main.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/timegrid@4.0.1/main.min.css">
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/timegrid@4.0.1/main.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/rrule@4.0.1/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 every week (all day)',
                        allDay: true,
                        rrule: {
                            freq: 'weekly',
                            byweekday: null,
                            bymonthday:null,
                            dtstart: '2019-04-05',
                            until: '2021-04-05'
                        },
                    },
                ],
 });
 calendar.render();