This bolt.cm extension makes easier to display OpenAgenda events on your website (OpenAgenda: Get an efficient public calendar now).
Extension uses also CalendR PHP lib, to manage calendar view and load json OpenAgenda events on it.
- Bolt 3.x installation
- One or several agendas on OpenAgenda - Help
- Login to your Bolt installation
- Go to "View/Install Extensions" (Hover over "Extras" menu item)
- Type
OpenAgendainto the input field - Click on the extension name
- Click on "Browse Versions"
- Click on "Install This Version" on the latest stable version
agendas:
- alias: test1 # Any alias you want, to identify your OpenAgenda instance on Bolt
id: 123456 # Your OpenAgenda Id
CalendR lib enables to manage a calendar and the containing events.
It comes with a Silex provider and Twig Extension.
To get events from your OpenAgenda, specify your agenda_id on calendr_events` call.
{% set year = calendr_year(requestYear) %}
{% set events = calendr_events(year, {'agenda_id': 16163963}) %}
My agenda page looks like:
{% set currentYear = now|date('Y') %}
{% set requestYear = (app.request.get('agendayear')|default(currentYear)) %}
{% set aWeek = calendr_week(2017, 01) %}
{% set year = calendr_year(requestYear) %}
{% set events = calendr_events(year, {'agenda_id': 16163963}) %}
<div class="calendar">
{% for month in year %}
<div class="row">
<h3 class="calendar__month"><span>{{ month|localedatetime('%B') }} {{ month.format('Y') }}</span></h3>
<div class="columns large-4">
<table class="calendar">
<thead>
<tr>
{% for aDay in aWeek %}
<th>{{ aDay|localedatetime('%a')|first }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for week in month %}
<tr>
{% for day in week %}
<td class="
{% if not month.includes(day) %}calendar__day--outofmonth{% endif %}
{% if day.isCurrent %}calendar__day--current{% endif %}
{% if events.find(day)|length > 0 %}calendar__day--withevents{% endif %}">
{{ day.getBegin|localedatetime('%d') }}
</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="columns large-8">
<ul class="list--alt">
{% for event in events.find(month) %}
<li class="list__item--event">
<h4><a href="{{ path('agendaevent', {'agendaalias': 'test1', 'eventuid': event.getJSON.uid, 'eventslug': event.getJSON.slug }) }}">{{ event.getJSON.title.fr }}</a></h4> {% if event.getJSON.category|length > 0 %}<span class="label radius category">{{ event.getJSON.category.label }}</span>{% endif %}
<div>
<span class="date">{{ event.begin|localedatetime('%A %d/%m at %H:%M') }}</span>{% if event.getJSON.description.fr is not empty %}<span class="description"> - {{ event.getJSON.description.fr }}</span>{% endif %}
</div>
</li>
{% else %}
<li><p>No future events currently scheduled.</p></li>
{% endfor %}
</ul>
</div>
</div>
{% endfor %}
</div>
If you want to display the next events of test1 agenda, use oa_nextEvents
twig function. It returns an array of events.
All OpenAgenda data could be retrieve with getJSON method.
<ul>
{% for event in oa_nextEvents('test1')|slice(0, 5) %}
<li><span class="date">{{ event.begin|localedatetime('%d/%m') }}</span> <a href="{{ path('agendaevent', {'agendaalias': 'zdt', 'eventuid': event.getJSON.uid, 'eventslug': event.getJSON.slug }) }}">{{ event.getJSON.title.fr }}</a></li>
{% else %}
<li>No future events currently scheduled.</li>
{% endfor %}
</ul>
If you want to display a particular event of test1 agenda, use oa_event
twig function. It returns an event.
{% set oaevent = oa_event(app.request.get('agendaalias'), app.request.get('eventuid')) %}
{% if oaevent is not empty %}
{% set event = oaevent.getJSON %}
<section>
<header><p><a href="{{ path('agenda') }}" class="button tiny">Back to agenda</a></p></header>
{% if event.image is not empty %}
<img src="{{ event.image }}" alt="" />
{% endif %}
<h1>{{ event.title.fr }}</h1>
{% if event.description.fr is not empty %}
<p class="head">{{ event.description.fr }}</p>
{% endif %}
{% if event.category|length > 0 %}<p><span class="label radius">{{ event.category.label }}</span></p>{% endif %}
{% if event.timings[0] is defined and event.timings[0].start is not empty %}
<p><strong>Timing :</strong> {{ event.timings[0].start|localedatetime('%A %e %B %Y') }}
{% set event_dtStart = event.timings[0].start|localedatetime('%y%m%d') %}
{% if event.timings[0].end is not empty %}
{% set event_dtEnd = event.timings[0].end|localedatetime('%y%m%d') %}
{% if event_dtStart == event_dtEnd %}
from {{ event.timings[0].start|localedatetime('%H:%M') }} to {{ event.timings[0].end|localedatetime('%H:%M') }}
{% else %}
at {{ event.timings[0].start|localedatetime('%H:%M') }} to {{ event.timings[0].start|localedatetime('%A %e %B %Y à %H:%M') }}
{% endif %}
{% else %}
at {{ event.timings[0].start|localedatetime('%H:%m') }}
{% endif %}
</p>
{% endif %}
{% if event.html.fr is not empty %}
<div>
{{ event.html.fr|raw }}
</div>
{% endif %}
{% if event.location is defined and event.location.name is not empty %}
<p><strong>Location :</strong> {{ event.location.name }}{% if event.location.address is not empty %}, {{ event.location.address }}{% endif %}{% if event.location.city is not empty %}, {{ event.location.postalCode }} {{ event.location.city }}{% endif %}</p>
{% endif %}
{% if event.location is defined and event.location.latitude is not empty %}
<div id="oa-event__map" style="height:200px; width:100%;"></div>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
<script>
var map = L.map('oa-event__map').setView([{{ event.location.latitude|replace({",": "."}) }}, {{ event.location.longitude|replace({",": "."}) }}], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.marker([{{ event.location.latitude|replace({",": "."}) }}, {{ event.location.longitude|replace({",": "."}) }}]).addTo(map)
</script>
{% endif %}
</section>
{% else %}
<div class="warning callout">
<p>This page did not match any events.</p>
</div>
{% endif %}
Your configuration could be accessed from twig template with:
{% set extension_config = app['bolt-openagenda.config'] %}
You can add some routes on Bolt to manage your agenda pages:
agendaevent:
path: /agenda/evenet/{agendaalias}/{eventuid}/{eventslug}
defaults:
_controller: controller.frontend:record
contenttypeslug: page
slug: agenda-event
requirements:
agendaalias: '[a-z0-9-_]+'
eventuid: '[0-9]+'
eventslug: '[a-z0-9-_]+'
agendayear:
path: /agenda/{agendayear}
defaults:
_controller: controller.frontend:record
contenttypeslug: page
slug: agenda
requirements:
agendayear: '20[1-2][0-9]'
agenda:
path: /agenda
defaults:
_controller: controller.frontend:record
contenttypeslug: page
slug: agenda
Extension icon is inspired by work of Rockicon on Noun Project
This Bolt extension is open-sourced software licensed under the MIT license