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> <!-- 2014 -->
<!-- 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.2014, 02.01.2014, 03.01.2014.. -->
</div>
</dmc:renderAsDayCalendars>
</div>
</dmc:renderAsWeekCalendars>
</div>
</dmc:renderAsMonthCalendars>
</div>
The generated HTML Code will be:
<div class="yearItem">
2014
<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.2014</div>
<div class="dayItem">02.01.2014</div>
<div class="dayItem">......</div>
...
</div>
<div class="weekItem">
<div class="dayItem">06.01.2014</div>
...
</div>
...
</div>
<div class="monthItem">
February
<div class="weekItem">
...
<div class="dayItem">02.02.2014</div>
<div class="dayItem">03.02.2014</div>
...
</div>
<div class="weekItem">
<div class="dayItem">06.01.2014</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 |
TYPO3\CMS\Extbase\Persistence\ObjectStorage<
DieMedialen\DmSimplecalendar\Domain\Model\Appointment
>
|
|
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 |
attachments |
TYPO3\CMS\Extbase\Persistence\ObjectStorage<
DieMedialen\DmSimplecalendar\Domain\Model\Attachment
>
|
|
categories |
TYPO3\CMS\Extbase\Persistence\ObjectStorage<
DieMedialen\DmSimplecalendar\Domain\Model\Category
>
|
|
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.attachments}
TYPO3\CMS\Extbase\Persistence\ObjectStorage<DieMedialen\DmSimplecalendar\Domain\Model\Attachment>
Properties |
Type |
Description |
title |
string |
|
file |
string |
just the saved files name,
not the full path |
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>
...