iao_team/resources/views/livewire/calendar.blade.php

<div class="col card--ui" id="card--dashboard">


    <section id="resume-table">
        
        <div class="compare--chart_wrapper d-none"></div>

        <div id='calendar'></div>

    </section>

    <a href="#" data-bs-toggle="modal" data-bs-target="#calendarModal" class="openModal"></a>

    <div  wire:ignore.self class="modal" id="calendarModal" tabindex="-1" aria-labelledby="calendarModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="calendarModalLabel">Dettaglio</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <label for="course_subscription_id" class="form-label">Ora inizio</label>
                            <h3 class="time">ORA</h3>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label date">Martdì aaa</label>
                            <h3 class="title">Padel</h3>
                        </div>
                    </div>                    
                </div>
                <div class="modal-footer mt-2">
                    <button class="btn--ui lightGrey" >Annulla Lezione</a>
                    <button type="button" class="btn--ui btn-primary" onclick="goPresence()">Presenze</button>
                </div>
            </div>
        </div>
    </div>

</div>

@push('scripts')
    
    <script src="/assets/js/fullcalendar.js"></script>
    <script src="/assets/js/fullcalendar_locales.js"></script>
@endpush

@push('scripts')
    <script>

        var currentCalendar = 0;
        var params = '';

        function goPresence()
        {
            document.location.href = '/presences' + params;
        }

        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'timeGridWeek',
                headerToolbar: {
                    left: 'prevYear,prev,next,nextYear today',
                    center: 'title',
                            right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'

                },
                eventClick: function(info) {
                    var eventDate = new Date(info.event.start); 
                    var datestring = eventDate.getFullYear() + "-" + pad(eventDate.getMonth()+1, 2) + "-" + pad(eventDate.getDate(), 2) + " " + pad(eventDate.getHours(), 2) + ":" + pad(eventDate.getMinutes(), 2) + ":00";
                    var title = info.event.title;
                    $(".title").html(title);
                    $(".time").html(pad(eventDate.getHours(), 2) + ":" + pad(eventDate.getMinutes(), 2));
                    $(".date").html(eventDate.toLocaleDateString('it-IT', { weekday: 'long' }) + " " + pad(eventDate.getDate(), 2) + " " + eventDate.toLocaleDateString('it-IT', { month: 'long' }));
                    currentCalendar = info.event.id;
                    params = '?calendarId=' + info.event.id;// + "&date=" + datestring; 
                    $('.openModal').trigger('click');
                },
                locale: 'it',
                events: @json($records),
            });
            calendar.render();
        });

        $(document).ready(function() {
            
        } );

        Livewire.on('load-data-table', () => {
            
        });

        function pad(num, size) {
            num = num.toString();
            while (num.length < size) num = "0" + num;
            return num;
        }

        
    </script>
@endpush