kithkin/resources/views/components/calendar/four/four.blade.php

48 lines
1.3 KiB
PHP

@props([
'grid' => [],
'calendars' => [],
'events' => [],
'class' => '',
'slots' => [],
'timeformat' => '',
'hgroup' => [],
'active' => [],
'density' => '30',
'now' => [],
])
<section
class="calendar {{ $class }}" data-density="{{ $density['step'] }}"
style=
"--now-row: {{ (int) $now['row'] }};
--now-col-start: {{ (int) $now['col_start'] }};
--now-col-end: {{ (int) $now['col_end'] }};"
>
<hgroup>
@foreach ($hgroup as $h)
<div data-date="{{ $h['date'] }}" @class(['day-header', 'active' => $h['is_today'] ?? false])>
<span class="name">{{ $h['dow'] }}</span>
<a class="number" href="#">{{ $h['day'] }}</a>
</div>
@endforeach
</hgroup>
<ol class="time" aria-label="{{ __('Times') }}">
@foreach ($slots as $slot)
<li>
<time datetime="{{ $slot['iso'] }}">{{ $slot['label'] }}</time>
</li>
@endforeach
</ol>
<ol class="events" aria-label="{{ __('Events') }}">
@foreach ($events as $event)
<x-calendar.time.event :event="$event" />
@endforeach
@if ($now['show'])
<li class="now-indicator" aria-hidden="true"></li>
@endif
</ol>
<footer>
<x-calendar.time.density view="four" :density="$density" />
</footer>
</section>