DEPRECATION WARNING
This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.
Developer Corner¶
In the developer corner, you can learn the basics for templating with dm_simplecalendar
The Template System requires two main templates
Templates/Calendar/Show.html
For displaying calendar, mainly uses the variable
{viewCalendar}
Templates/Appointment/Show.html
For displaying appointment detail view, mainly uses the variable
{appointment}
How to build a calendar¶
Introduction¶
The Template Templates/Calendar/Show.html
just should redirect to the needed Partials
<f:layout name="Simplecalendar" />
<f:section name="main">
<f:flashMessages renderMode="div" />
<f:if condition="{viewCalendar.mode} == 'year'">
<f:then>
<f:render partial="Calendar/YearCalendar" arguments="{viewCalendar:viewCalendar}" />
</f:then>
</f:if>
<f:if condition="{viewCalendar.mode} == 'month'">
<f:then>
<f:render partial="Calendar/MonthCalendar" arguments="{viewCalendar:viewCalendar}" />
</f:then>
</f:if>
<f:if condition="{viewCalendar.mode} == 'week'">
<f:then>
<f:render partial="Calendar/WeekCalendar" arguments="{viewCalendar:viewCalendar}" />
</f:then>
</f:if>
<f:if condition="{viewCalendar.mode} == 'day'">
<f:then>
<f:render partial="Calendar/DayCalendar" arguments="{viewCalendar:viewCalendar}" />
</f:then>
</f:if>
</f:section>
Required ViewHelpers to build a calendar¶
Include {namespace dmc=DieMedialen\DmSimplecalendar\ViewHelpers}
on top of every template and partial to use the following ViewHelpers
<dmc:renderAsMonthCalendars viewCalendar="{viewCalendar}" as="monthCalendar"><!-- LOOP --></dmc:renderAsMonthCalendars>
<dmc:renderAsWeekCalendars viewCalendar="{viewCalendar}" as="weekCalendar"><!-- LOOP --></dmc:renderAsWeekCalendars>
<dmc:renderAsDayCalendars viewCalendar="{viewCalendar}" as="dayCalendar"><!-- LOOP --></dmc:renderAsDayCalendars>
Simple HTML Example to display a full year!¶
Lets say, you choose year as dispaly mode in plugin, the property {viewCalendar.mode}
will be "year".
<div class="yearItem">
<f:format.date format="Y">{viewCalendar.timestamp}</f:format.date> <!-- 2015 -->
<!-- Iterates 12 times, return every loop a monthCalendar -->
<dmc:renderAsMonthCalendars viewCalendar="{viewCalendar}" as="monthCalendar">
<div class="monthItem">
<f:format.date format="F">{viewCalendar.timestamp}</f:format.date> <!-- January, February, March.. -->
<!-- Iterates 4-5 times, return every loop a weekCalenar -->
<dmc:renderAsWeekCalendars viewCalendar="{monthCalendar}" as="weekCalendar">
<div class="weekItem">
<!-- Iterates 7 times, return every loop a dayCalenar -->
<dmc:renderAsDayCalendars viewCalendar="{weekCalendar}" as="dayCalendar">
<div class="dayItem">
<f:format.date format="d.m.Y H:m:s">{dayCalendar.timestamp}</f:format.date> <!-- 01.01.2015, 02.01.2015, 03.01.2015.. -->
</div>
</dmc:renderAsDayCalendars>
</div>
</dmc:renderAsWeekCalendars>
</div>
</dmc:renderAsMonthCalendars>
</div>
The generated HTML Code will be:
<div class="yearItem">
2015
<div class="monthItem">
January
<div class="weekItem">
<div class="dayItem">30.12.2013</div>
<div class="dayItem">31.12.2013</div>
<div class="dayItem">01.01.2015</div>
<div class="dayItem">02.01.2015</div>
<div class="dayItem">......</div>
...
</div>
<div class="weekItem">
<div class="dayItem">06.01.2015</div>
...
</div>
...
</div>
<div class="monthItem">
February
<div class="weekItem">
...
<div class="dayItem">02.02.2015</div>
<div class="dayItem">03.02.2015</div>
...
</div>
<div class="weekItem">
<div class="dayItem">06.01.2015</div>
...
</div>
...
...
</div>
</div>
You may ask, why the first days in January are "30.12.2013" and "31.12.2013". This comes, because we rendered the {monthCalendar}
to {weekCalendar}
and then to {dayCalendar}
. A week has always 7 days, so the pre-month days are shown. If you render the {monthCalendar}
directly to an {dayCalendar}
, there will be only {dayCalendar}
in loop, what are realy in the month!
Main Variables¶
{viewCalendar}
¶
DieMedialen\DmSimplecalendar\Domain\Model\ViewCalendar
Properties | Type | Description |
---|---|---|
timestamp | integer | timestamp of current calendar |
mode | string | year/month/week/day |
appointments |
|
|
previous | integer | timestamp of previous calendar of same mode |
next | integer | timestamp of next calendar of same mode |
uid | integer | |
pid | integer |
{appointment}
¶
DieMedialen\DmSimplecalendar\Domain\Model\Appointment
Properties | Type | Description |
---|---|---|
media | DieMedialen\DmSimplecalendar\Domain\Model\Media |
Model with 2 FAL properties Unlimited attachments |
categories |
|
|
location | string | Use for city, name of organisation or something |
description | string | The main description text |
shortdescription | string | A short teaser text |
startdate | DateTime | StartDate of appointment |
enddate | DateTime | EndDate of appointment |
title | string | The appointments title |
uid | integer | |
pid | integer |
{appointment.media}
¶
DieMedialen\DmSimplecalendar\Domain\Model\Media
Properties | Type | Description |
---|---|---|
files | string | FAL resources |
images | string | FAL resources |
uid | integer | |
pid | integer |
{appointment.categories}
¶
TYPO3\CMS\Extbase\Persistence\ObjectStorage<DieMedialen\DmSimplecalendar\Domain\Model\Category>
Properties | Type | Description |
---|---|---|
title | string | |
color | string | you can use strings or HEX code for coloring |
uid | integer | |
pid | integer |
Tutorials / Examples¶
To limit the displayed appointments, you can use the setting {settings.appointmentAmountLimit}
.
You can define this setting in each calendar-plugin in tab "Template" or you can define the setting in TypoScript-Setup:
plugin.tx_dmsimplecalendar {
settings {
appointmentAmountLimit = 3
}
}
...
<dmc:renderAsDayCalendars viewCalendar="{weekCalendar}" as="dayCalendar">
<f:if condition="{dayCalendar.appointments -> f:count()} > 0">
<f:then>
<f:for each="{dayCalendar.appointments}" as="appointment" iteration="appointmentIterator">
<f:if condition="{appointmentIterator.index} < {settings.appointmentAmountLimit}">
<f:link.action action="show" controller="Appointment" arguments="{appointment:appointment}">{appointment.title}</f:link.action>
</f:if>
</f:for>
<f:if condition="{dayCalendar.appointments -> f:count()} > {settings.appointmentAmountLimit}">
<f:link.action action="show" controller="Calendar" arguments="{viewTimestamp: dayCalendar.timestamp, viewMode: dayCalendar.mode}">...</f:link.action>
</f:if>
</f:then>
<f:else>
<p>{f:translate(key:'tx_dmsimplecalendar_view_appointment_none',default:'')}</p>
</f:else>
</f:if>
</dmc:renderAsDayCalendars>
...