Calendar

Calendar

Year, Month and day

The calendar allows you to show an overview of events.

<div id="61efa165f3fca0.43071770" class="c-calendar c-calendar--secondary" eventsUrl="/assets/data/eventsDummyData.json" bookingUrl="" weekStart="Monday" size="large" color="secondary" js-toggle-class="ad" data-uid="61efa165f3fd8">   
    <div id="calendarContainer"></div>

    <!-- modal.blade.php -->
<div id="examplemodalid" class="c-modal__bg c-modal__bg__animation--scale-up" role="dialog" aria-modal="true" aria-labelledby="modal__label__examplemodalid">
    <div class="c-modal c-modal--is-modal c-modal--padding-3 c-modal--overlay-dark"  data-uid="61efa166001b8">

        
        <header class="c-modal__header">
                            <!-- typography.blade.php  -->
<h2 id="modal__label__examplemodalid" class="c-typography c-typography__variant--h2" data-uid="61efa16600313">
    
</h2>            
            <button id="61efa166003643.86127806" class="c-button c-modal__close c-button__basic c-button__basic--default c-button__icon-size--xl ripple ripple--before c-button--icon-only" href="" target="_top" data-close="" type="button" aria-pressed="false" data-uid="61efa16600373">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efa166003f7" class="c-icon c-icon--size-xl material-icons" translate="no" role="img" alt="" data-uid="61efa166003f2">
                    close
            </i>
        
                    
            
    </span>
</button>        </header>

        <section class="c-modal__content">

            
            
            
            <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 id="61efa166000de0.62847065" class="c-button postEventButton c-button__filled c-button__filled--secondary c-button--md ripple ripple--before" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="filled" aria-pressed="false" data-uid="61efa16600107">   
    <span class="c-button__label">
    
                    <span class="c-button__label-text">
                book
            </span>
        
                    
            
    </span>
</button>                    </div>      
                </div>
            </div>
            
        </div>

            
                    </section>

        
            </div>
</div>
    <div id="organizerContainer" class="u-display--none"></div>
</div>
@calendar(
    [
        'color' => 'secondary',
        'size' => 'large',
        'eventsUrl' => '/assets/data/eventsDummyData.json',
        'bookingUrl' => ''
    ]
)
@endcalendar

Blade component parameters

Key Default value Type Available values Description
componentElement div string - -
size large string - -
get string - -
set string - -
color default string - -
weekStart Monday string - -
id string - The DOM id of the component.
classList [] array - Array containing wrapping classes array
attributeList [] array - Array containing keys and values rendered as attributes
containerAware false boolean true/false Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component.
Settings location: /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Calendar/calendar.json