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

89 lines
2.9 KiB
PHP

@props([
'grid' => [],
'calendars' => [],
'events' => [],
'all_day_events' => [],
'has_all_day' => false,
'class' => '',
'slots' => [],
'timeformat' => '',
'hgroup' => [],
'active' => [],
'density' => '30',
'weekstart' => 0,
'now' => [],
'daytime_hours' => [],
'timezone' => 'UTC',
])
<section
@class(['calendar', $class, 'allday' => $has_all_day ?? false])
data-density="{{ $density['step'] }}"
data-weekstart="{{ $weekstart }}"
data-daytime-hours-enabled="{{ (int) ($daytime_hours['enabled'] ?? 0) }}"
style="
--now-row: {{ (int) $now['row'] }};
--now-offset: {{ $now['offset'] ?? 0 }};
--now-col-start: {{ (int) $now['col_start'] }};
--now-col-end: {{ (int) $now['col_end'] }};
--grid-rows: {{ $daytime_hours['rows'] ?? 96 }};
"
>
<hgroup>
@foreach ($hgroup as $h)
@php
$dayParams = [
'view' => 'day',
'date' => $h['date'],
'density' => $density['step'],
'daytime_hours' => (int) ($daytime_hours['enabled'] ?? 0),
];
@endphp
<div data-date="{{ $h['date'] }}" @class(['day-header', 'active' => $h['is_today'] ?? false])>
<span class="name">{{ $h['dow'] }}</span>
<a class="number"
href="{{ route('calendar.index', $dayParams) }}"
hx-get="{{ route('calendar.index', $dayParams) }}"
hx-target="#calendar"
hx-select="#calendar"
hx-swap="outerHTML"
hx-push-url="true"
hx-include="#calendar-toggles">
{{ $h['day'] }}
</a>
</div>
@endforeach
</hgroup>
@if($has_all_day)
<ol class="day" aria-label="{{ __('calendar.event.all_day_events') }}">
@foreach ($all_day_events as $event)
<x-calendar.time.day-event :event="$event" />
@endforeach
</ol>
@endif
<ol class="time" aria-label="{{ __('Times') }}">
@foreach ($slots as $slot)
<li>
<time datetime="{{ $slot['iso'] }}" data-slot-minutes="{{ $slot['minutes'] }}">{{ $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>
<div class="left">
<a href="{{ route('account.locale') }}" class="timezone">{{ $timezone }}</a>
</div>
<div class="right">
<x-calendar.time.daytime-hours view="week" :density="$density" :daytime_hours="$daytime_hours" />
<x-calendar.time.density view="week" :density="$density" :daytime_hours="$daytime_hours" />
</div>
</footer>
</section>