Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 13 additions & 7 deletions DOCUMENTATION.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
Table Of Contents:

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

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).

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.
The default collection for your events is `events`, if you use a different one, update it in the addon settings.

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:
```
Expand Down Expand Up @@ -74,13 +73,15 @@ days:

**Common Parameters**

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}`
All of the above (except Download Link) have :
* `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}`
* `timezone` - all occurrences will be shifted to this timezone

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

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

Output:

A collection of dates, each one containing either `no_results` or `occurrences`, which list all the event occurrences on that particular date.
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:
* `spanning` - Boolean - `true` if occurrence spans multiple days
* `spanning_start` - Boolean - `true` if `spanning` and this is the first one in a span
* `spanning_end` - Boolean - `true` if `spanning` and this is the last one in a span

Those can be used to style/handle occurrences that span days.

*Example*:

Expand Down
31 changes: 0 additions & 31 deletions UPGRADING.md

This file was deleted.

141 changes: 78 additions & 63 deletions calendar.html
Original file line number Diff line number Diff line change
@@ -1,65 +1,80 @@
<!-- !BODY CONTENT > {{ type }} -->
<section class="full-calendar {{ type }}">
<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">
<div class="day">Sun</div>
<div class="day">Mon</div>
<div class="day">Tue</div>
<div class="day">Wed</div>
<div class="day">Thu</div>
<div class="day">Fri</div>
<div class="day">Sat</div>
</div>
<div class="dates">
{{ events:calendar collection="events" :year="get.year" :month="get.month" scope="outer" }}
{{ 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>
{{ unless no_results }}
<ul class="events list-unstyled">
{{ dates scope="event" }}
<li class="event-item {{ highlights }}" title="{{ title }}">
{{ if external_event }}<a href="{{ external_event_link }}">{{ elseif event:body_content }}<a href="{{ permalink }}?date={{ outer:date format="Y-m-d" }}">{{ /if }}
<div class="d-flex justify-content-between">
<span class="event-title">{{ title }}</span>
{{ if !all_day }}
<span class="event-time">{{ start_time format="g:i" }}&nbsp;{{ start_time format="A" }}</span>{{ /if }}
</div>
{{ if event:body_content }}</a>{{ /if }}
</li>
{{ /dates }}
</ul>
{{ /unless }}
</div>
{{ if date | is_end_of_week }}</div>{{ /if }}
{{ /events:calendar }}
</div>
</div>
<div class="calendar-day-holder">
<div class="events dark">
<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"} /}}

</div>
<div class="events">

</div>
</div>
</div>

</div>
{{ 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>
Loading