document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {

        plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list', 'googleCalendar' ],

        defaultView: 'dayGridMonth',

        header: {

            left: 'legend',
            center: 'title',
            right: 'legend'

        },

        locale:'uk',

        displayEventTime: true, // don't show the time column in list view

        //weekNumbers: true,
        navLinks: false, // can click day/week names to navigate views
        businessHours: true, // display business hours
        editable: false,
        eventLimit: true, // allow "more" link when too many events
        fixedWeekCount: false,
        showNonCurrentDates: false,

        //weekNumbers: true,
        //weekNumbersWithinDays: true,
        //weekNumberCalculation: 'ISO',

        // To make your own Google API key, follow the directions here:
        // http://fullcalendar.io/docs/google_calendar/
        googleCalendarApiKey: 'AIzaSyDMlT0t6_CJD01LzlpokWmY00ZX4pE1cVE',

        eventSources: [
            {
                events: events
            }
        ],

        /*eventClick: function() {
                window.open("/main/calendar/","_self");
                return false;
        },*/

        eventClick: function(arg) {

            arg.el.style.backgroundColor = '#607d8b';

            if (arg.event.url) {
                window.open(arg.event.url, 'google-calendar-event', 'width=700,height=600');

                arg.jsEvent.preventDefault(); // don't navigate in main tab
            }

            else {

                $.ajax({
                    url: "../../main/calendar",
                    type: "POST",
                    data: {eventid: arg.event.id},

                    success: function(response) {


                        $("#myModal .modal-body").html(response);
                        $("#myModal .modal-title p").html(arg.event.title);
                        $("#myModal .modal-startdate p").text(arg.event.startdate);
                        $("#myModal").modal("show");

                    }

                });

            }

        },

        /*      eventClick: function(arg) {
                // opens events in a popup window

                window.open(arg.event.url, 'google-calendar-event', 'width=700,height=600');

                arg.jsEvent.preventDefault(); // don't navigate in main tab
              },*/

        loading: function(bool) {
            document.getElementById('loading').style.display =
                bool ? 'block' : 'none';
        }

    });

    calendar.render();
    calendar.setOption('height', 480);
});