statamic-events/calendar.html at main · transformstudios/statamic-events · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<section
    class="full-calendar {{ type }}"
    x-data="{
        highlightSpanningEvents(event) {
            let eventId = event.target.getAttribute('data-event-id');
            let entries = document.querySelectorAll(`[data-event-id='${eventId}']`);
            entries.forEach(entry => entry.classList.add('hover'));
        },
        unhighlightSpanningEvents(event) {
            let eventId = event.target.getAttribute('data-event-id');
            let entries = document.querySelectorAll(`[data-event-id='${eventId}']`);
            entries.forEach(entry => entry.classList.remove('hover'));
        }
    }"
>
    <div class="container">
        <div class="row">
            <div class="text-center col-12">
                <p class="mb-2 tap-note text-primary d-block d-md-none"><i class="mr-1 fad fa-circle"></i> Tap on a day to see the event(s)</p>
                <div class="nav">
                    <a href="{{ permalink }}?year={{ now_or_param modify="-1 month" format="Y" }}&month={{ now_or_param modify="-1 month" format="F" lower="true" }}">
                        <i class="fas fa-angle-left"></i>&nbsp;{{ now_or_param modify="-1 month" format="M" }}
                    </a>
                    <h2><strong>{{ now_or_param format="M" }}</strong> {{ now_or_param format="Y" }}</h2>
                    <a href="{{ permalink }}?year={{ now_or_param modify="+1 month" format="Y" }}&month={{ now_or_param modify="+1 month" format="F" lower="true" }}">{{ now_or_param modify="+1 month" format="M" }}&nbsp;<i class="fas fa-angle-right"></i></a>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row">
            <div class="calendar full-view">
                <div class="days">
                    {{ events:days_of_week }}
                        <div class="day">{{ medium }}</div>
                    {{ /events:days_of_week }}
                </div>
                <div class="dates">
                    {{ days = {events:calendar collection="events" :year="get.year" :month="get.month"} /}}

                    {{ days scope="day" }}
                        {{ if date | is_start_of_week }}<div class="week-row">{{ /if }}
                            <div class="day-cell {{ if date | is_today }}today{{ /if }} {{ if date | is_weekend }}weekend{{ /if }} {{ unless date | in_month }}not-month{{ /unless }}">
                                <div class="day-number">{{ date format="d" }}</div>
                                {{ if occurrences }}
                                    <ul class="events list-unstyled">
                                        {{ occurrences scope="event" }}
                                            <li class="event-item {{ highlights }} {{ spanning ? 'spanning' : 'non-spanning' }} {{ spanning_start ?= 'spanning-start' }} {{ spanning_end ?= 'spanning-end' }}" title="{{ title }}" >
                                                <a
                                                    href="{{ permalink }}?date={{ event:start | format("Y-m-d") }}"
                                                    {{ if spanning }}data-event-id="{{ id }}" @mouseenter="highlightSpanningEvents" @mouseleave="unhighlightSpanningEvents"{{ /if }}
                                                >
                                                <div class="d-flex justify-content-between">
                                                    {{ if !hide_event_time }}
                                                        {{ _timeFormat = start:get("minute") ? "g:i" : "g" /}}
                                                        {{ if spanning }}
                                                            {{ if spanning_start }}
                                                                <span class="event-time">Starts at {{ start | format(_timeFormat) }}&nbsp;{{ start | format("A") }}</span>
                                                            {{ /if }}
                                                            {{ if spanning_end }}
                                                                <span class="event-time">Ends at {{ end | format(_timeFormat) }}&nbsp;{{ end | format("A") }}</span>
                                                            {{ /if }}
                                                        {{ elseif !all_day }}
                                                            <span class="event-time">{{ start | format(_timeFormat) }}&nbsp;{{ start | format("A") }}</span>
                                                        {{ /if }}
                                                    {{ /if }}
                                                </div>
                                                </a>
                                            </li>
                                        {{ /occurrences }}
                                    </ul>
                                {{ /if }}
                            </div>
                        {{ if date | is_end_of_week }}</div>{{ /if }}
                    {{ /days }}
                </div>
            </div>
        </div>
    </div>
</section>