fullCalendar

by William Cunningham

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.print.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/gcal.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/locale/en-ca.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
<div id="unit1Calendar"></div>

JavaScript

$('#unit1Calendar').fullCalendar({
        googleCalendarApiKey: 'AIzaSyBYUt3J03M9oPtvTR6riJ5JHzrjhnpQMyI',
        header: {
            left: 'prev, next, today',
            center: 'title',
            right: 'listDay,listWeek,month'
        },

        // customize the button names,
        // otherwise they'd all just say "list"
        views: {
            listDay: {
                buttonText: 'list day'
            },
            listWeek: {
                buttonText: 'list week'
            }
        },

        defaultView: 'listWeek',
        navLinks: true,
        editable: true,
        eventLimit: true,
        contentHeight: 'auto',
        height: 'auto',

        events: {
            googleCalendarId: '[email protected]'
        }
    });