@extends('voyager::master')
@section('extra-css')
    <!--suppress VueDuplicateTag -->
    <link rel="stylesheet" href="{{asset('css/fullcalendar4.3.1.main.min.css')}}">
    <link rel="stylesheet" href="{{asset('css/fullcalendar.daygrid.4.3.1.min.css')}}">
    <link rel="stylesheet" href="{{asset('css/fullcalendar.timegrid.4.3.1.min.css')}}">
@stop

@section('content')
    <div id="calendar"></div>
@stop

@section('javascript')
    <script src="{{asset('js/fullcalendar.4.3.1.main.min.js')}}"></script>
    <script src="{{asset('js/fullcalendar.interaction.4.3.0.min.js')}}"></script>
    <script src="{{asset('js/fullcalendar.daygrid.4.3.0.min.js')}}"></script>
    <script src="{{asset('js/fullcalendar.timegrid.4.3.0.min.js')}}"></script>

    <script>
        const ALL_EVENTS = [];

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

            let calendar = new FullCalendar.Calendar(calendarEl, {
                plugins: ['interaction', 'dayGrid', 'timeGrid'],
                defaultView: 'dayGridMonth',
                locale: 'ro',
                height: 'auto',
                eventLimit: 2, // If you set a number it will hide the itens
                eventLimitText: "Potential overbooking a masinii",
                defaultDate: new Date(),
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek'
                },
                events:             });
            //set global
            let events = calendar.getEvents();
            for (let i = 0; i < events.length; i++) {
                ALL_EVENTS.push(events[i]);

            }

            calendar.render();
        });
    </script>
@stop