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

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
media DieMedialen\DmSimplecalendar\Domain\Model\Media Model with 2 FAL properties Unlimited attachments
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.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>

...