Calendar

<div class="c-calendar c-calendar--secondary" eventsUrl="/assets/data/eventsDummyData.json" bookingUrl="" weekStart="Monday" size="large" color="secondary" js-toggle-class="ad" id="673ed2d2529c88.08195439" data-uid="673ed2d2529da">   
    <div id="calendarContainer"></div>

        <!-- modal.blade.php -->
<dialog class="c-modal c-modal--is-modal c-modal--scale-up c-modal--padding-3 c-modal--overlay-dark" aria-modal="true" aria-labelledby="modal__label__examplemodalid" id="examplemodalid" data-uid="673ed2d25372d">

    <div class="c-modal__header">
                        <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-modal__heading c-typography__variant--h2" tabindex="1" id="modal__label__examplemodalid" data-uid="673ed2d25378d">
    
</h2>                        <button class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg c-button--icon-only" target="_top" data-close="" aria-label="close" type="button" data-uid="673ed2d2537cc">   
     <span class="c-button__label">         
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" aria-hidden="false" material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="673ed2d25389c">
                    </span>
            </span>
        
        
    </span> </button>    </div>

    <section class="c-modal__content" tabindex="2">

        
        
        <div class="c-calendar__event-list" js-toggle-item="1" js-toggle-class="">

            <div class="grid">

                <div class="grid-sm-6 grid-md-6">
                    <div class="booked">
                        <h2>Booked</h2>
                        <div class="booked__list"></div>
                    </div>        
                </div>
            
                <div class="grid-sm-6 grid-md-6">
                    <div class="available">
                        <h2>Available</h2>
                        <div class="available__list"></div>
                            <button class="c-button postEventButton c-button__filled c-button__filled--secondary c-button--md" target="_top" type="filled" aria-label="book" data-uid="673ed2d2536c9">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                book
            </span>
        
    </span> </button>                    </div>      
                </div>
            </div>
            
        </div>

        
            </section>

    
    </dialog>
    <div id="organizerContainer" class="u-display--none"></div>
</div>

@calendar(
    [
        'color' => 'secondary',
        'size' => 'large',
        'eventsUrl' => '/assets/data/eventsDummyData.json',
        'bookingUrl' => ''
    ]
)
@endcalendar