Skip to content

Commit c7ce852

Browse files
edalzelledalzell
authored
Update docs (#151)
1 parent f4be544 commit c7ce852

3 files changed

Lines changed: 91 additions & 101 deletions

File tree

‎DOCUMENTATION.md‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
Table Of Contents:
22

3-
* [Upgrading](https://github.com/transformstudios/statamic-events/blob/master/UPGRADING.md)
43
* [Configuration](#configuration)
54
* [Fieldset](#fieldset)
65
* [Fields](#fields)
@@ -10,7 +9,7 @@ Table Of Contents:
109

1110
If you'd like to have a different event timezone default than the app default (usually UTC), update it via the CP. This is used on individual events that do not have a timezone set (see Fieldset below).
1211

13-
The default collection for your events is `events`, if you use a different one, publish the config file and then update it via the CP.
12+
The default collection for your events is `events`, if you use a different one, update it in the addon settings.
1413

1514
For the ICS downloads, it will use `address`, `coordinates`, and `description` fields if they exist. If your field is named something else, use a [Computed Value](https://statamic.dev/computed-values). `coordinates` must be a keyed array:
1615
```
@@ -74,13 +73,15 @@ days:
7473

7574
**Common Parameters**
7675

77-
All of the above (except Download Link) have a `site` parameter you can pass the handle of the site to get the events from. It defaults to your default site. **Note**: if you use Livewire you may need to set this from Antlers, using `{site:handle}`
76+
All of the above (except Download Link) have :
77+
* `site` - handle of the site to get the events from. It defaults to your default site. **Note**: if you use Livewire you may need to set this from Antlers, using `{site:handle}`
78+
* `timezone` - all occurrences will be shifted to this timezone
7879

7980
**Additional Variables** (normal entry data is available)
8081

81-
* `start` - Carbon date/time of the occurrence start
82-
* `end` - Carbon date/time of the occurrence end. Note if it's an all date event this will be set to 11:59:59pm
83-
* `has_end_time` - Boolean that indicates if this occurrence has a set end time. In All Day events, this is `false`
82+
* `start` - Carbon date/time - occurrence start
83+
* `end` - Carbon date/time - occurrence end. Note if it's an all date event this will be set to 11:59:59pm
84+
* `has_end_time` - Boolean - `true` if occurrence has a set end time. In All Day events, this is `false`
8485
* when it is a multi-day event, there is also an array of `days` that contains:
8586
* `start`
8687
* `end`
@@ -155,7 +156,12 @@ Parameters:
155156

156157
Output:
157158

158-
A collection of dates, each one containing either `no_results` or `occurrences`, which list all the event occurrences on that particular date.
159+
A collection of dates, each one containing either `no_results` or `occurrences`, which list all the event occurrences on that particular date. In each occurence, in addition to the usual variables there are:
160+
* `spanning` - Boolean - `true` if occurrence spans multiple days
161+
* `spanning_start` - Boolean - `true` if `spanning` and this is the first one in a span
162+
* `spanning_end` - Boolean - `true` if `spanning` and this is the last one in a span
163+
164+
Those can be used to style/handle occurrences that span days.
159165

160166
*Example*:
161167

‎UPGRADING.md‎

Lines changed: 0 additions & 31 deletions
This file was deleted.

‎calendar.html‎

Lines changed: 78 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,80 @@
1-
<!-- !BODY CONTENT > {{ type }} -->
2-
<section class="full-calendar {{ type }}">
3-
<div class="container">
4-
<div class="row">
5-
<div class="text-center col-12">
6-
<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>
7-
<div class="nav">
8-
<a href="{{ permalink }}?year={{ now_or_param modify="-1 month" format="Y" }}&month={{ now_or_param modify="-1 month" format="F" lower="true" }}">
9-
<i class="fas fa-angle-left"></i>&nbsp;{{ now_or_param modify="-1 month" format="M" }}
10-
</a>
11-
<h2><strong>{{ now_or_param format="M" }}</strong> {{ now_or_param format="Y" }}</h2>
12-
<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>
13-
</div>
14-
</div>
15-
</div>
16-
</div>
17-
<div class="container-fluid">
18-
<div class="row">
19-
<div class="calendar full-view">
20-
<div class="days">
21-
<div class="day">Sun</div>
22-
<div class="day">Mon</div>
23-
<div class="day">Tue</div>
24-
<div class="day">Wed</div>
25-
<div class="day">Thu</div>
26-
<div class="day">Fri</div>
27-
<div class="day">Sat</div>
28-
</div>
29-
<div class="dates">
30-
{{ events:calendar collection="events" :year="get.year" :month="get.month" scope="outer" }}
31-
{{ if date | is_start_of_week }}<div class="week-row">{{ /if }}
32-
<div class="day-cell{{ if date | is_today }} today{{ /if }}{{ if date | is_weekend }} weekend{{ /if }}{{ unless date | in_month }} not-month{{ /unless }}">
33-
<div class="day-number">{{ date format="d" }}</div>
34-
{{ unless no_results }}
35-
<ul class="events list-unstyled">
36-
{{ dates scope="event" }}
37-
<li class="event-item {{ highlights }}" title="{{ title }}">
38-
{{ if external_event }}<a href="{{ external_event_link }}">{{ elseif event:body_content }}<a href="{{ permalink }}?date={{ outer:date format="Y-m-d" }}">{{ /if }}
39-
<div class="d-flex justify-content-between">
40-
<span class="event-title">{{ title }}</span>
41-
{{ if !all_day }}
42-
<span class="event-time">{{ start_time format="g:i" }}&nbsp;{{ start_time format="A" }}</span>{{ /if }}
43-
</div>
44-
{{ if event:body_content }}</a>{{ /if }}
45-
</li>
46-
{{ /dates }}
47-
</ul>
48-
{{ /unless }}
49-
</div>
50-
{{ if date | is_end_of_week }}</div>{{ /if }}
51-
{{ /events:calendar }}
52-
</div>
53-
</div>
54-
<div class="calendar-day-holder">
55-
<div class="events dark">
1+
<section
2+
class="full-calendar {{ type }}"
3+
x-data="{
4+
highlightSpanningEvents(event) {
5+
let eventId = event.target.getAttribute('data-event-id');
6+
let entries = document.querySelectorAll(`[data-event-id='${eventId}']`);
7+
entries.forEach(entry => entry.classList.add('hover'));
8+
},
9+
unhighlightSpanningEvents(event) {
10+
let eventId = event.target.getAttribute('data-event-id');
11+
let entries = document.querySelectorAll(`[data-event-id='${eventId}']`);
12+
entries.forEach(entry => entry.classList.remove('hover'));
13+
}
14+
}"
15+
>
16+
<div class="container">
17+
<div class="row">
18+
<div class="text-center col-12">
19+
<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>
20+
<div class="nav">
21+
<a href="{{ permalink }}?year={{ now_or_param modify="-1 month" format="Y" }}&month={{ now_or_param modify="-1 month" format="F" lower="true" }}">
22+
<i class="fas fa-angle-left"></i>&nbsp;{{ now_or_param modify="-1 month" format="M" }}
23+
</a>
24+
<h2><strong>{{ now_or_param format="M" }}</strong> {{ now_or_param format="Y" }}</h2>
25+
<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>
26+
</div>
27+
</div>
28+
</div>
29+
</div>
30+
<div class="container-fluid">
31+
<div class="row">
32+
<div class="calendar full-view">
33+
<div class="days">
34+
{{ events:days_of_week }}
35+
<div class="day">{{ medium }}</div>
36+
{{ /events:days_of_week }}
37+
</div>
38+
<div class="dates">
39+
{{ days = {events:calendar collection="events" :year="get.year" :month="get.month"} /}}
5640

57-
</div>
58-
<div class="events">
59-
60-
</div>
61-
</div>
62-
</div>
63-
64-
</div>
41+
{{ days scope="day" }}
42+
{{ if date | is_start_of_week }}<div class="week-row">{{ /if }}
43+
<div class="day-cell {{ if date | is_today }}today{{ /if }} {{ if date | is_weekend }}weekend{{ /if }} {{ unless date | in_month }}not-month{{ /unless }}">
44+
<div class="day-number">{{ date format="d" }}</div>
45+
{{ if occurrences }}
46+
<ul class="events list-unstyled">
47+
{{ occurrences scope="event" }}
48+
<li class="event-item {{ highlights }} {{ spanning ? 'spanning' : 'non-spanning' }} {{ spanning_start ?= 'spanning-start' }} {{ spanning_end ?= 'spanning-end' }}" title="{{ title }}" >
49+
<a
50+
href="{{ permalink }}?date={{ event:start | format("Y-m-d") }}"
51+
{{ if spanning }}data-event-id="{{ id }}" @mouseenter="highlightSpanningEvents" @mouseleave="unhighlightSpanningEvents"{{ /if }}
52+
>
53+
<div class="d-flex justify-content-between">
54+
{{ if !hide_event_time }}
55+
{{ _timeFormat = start:get("minute") ? "g:i" : "g" /}}
56+
{{ if spanning }}
57+
{{ if spanning_start }}
58+
<span class="event-time">Starts at {{ start | format(_timeFormat) }}&nbsp;{{ start | format("A") }}</span>
59+
{{ /if }}
60+
{{ if spanning_end }}
61+
<span class="event-time">Ends at {{ end | format(_timeFormat) }}&nbsp;{{ end | format("A") }}</span>
62+
{{ /if }}
63+
{{ elseif !all_day }}
64+
<span class="event-time">{{ start | format(_timeFormat) }}&nbsp;{{ start | format("A") }}</span>
65+
{{ /if }}
66+
{{ /if }}
67+
</div>
68+
</a>
69+
</li>
70+
{{ /occurrences }}
71+
</ul>
72+
{{ /if }}
73+
</div>
74+
{{ if date | is_end_of_week }}</div>{{ /if }}
75+
{{ /days }}
76+
</div>
77+
</div>
78+
</div>
79+
</div>
6580
</section>

0 commit comments

Comments
 (0)