Kalender Extension für TYPO3

Leider ist die berühmte cal Extension für TYPO3 9 nicht mehr nutzbar. Jedenfalls habe ich es nicht hinbekommen die Events auszugeben und Fluid Templates sind auch nicht vorhanden. Aber es gibt eine Alternative.

Verwendet wird diese: https://extensions.typo3.org/extension/sf_event_mgt.

Das funktioniert nach der Installation auf den ersten Blick wie gewünscht. Allerdings fehlt jegliches CSS. Ein Blick in die FAQ schafft Abhilfe:
https://docs.typo3.org/p/derhansen/sf_event_mgt/4.1/en-us/Faq/Index.html

page.includeCSS {
    events = EXT:sf_event_mgt/Resources/Public/Css/events_default.css
}

Die Extension sf_event_mgt in der Monatsansicht mit CSS Klassen für Kategorien verwenden

In meinem Fall wollte ich für unterschiedliche Veranstaltungen Kategorien verwenden und diese in der Monatsansicht farbig markieren – die Kategorie „rot“ sollte das Element mit der CSS Klasse „rot“ versehen. Das geht, wenn man das entsprechende Template leicht modifiziert.

Zunächst holt man sich die Datei (/typo3conf/ext/sf_event_mgt/Resources/Private/Partials/Event/CalendarDayItem.html) ins Sitepackage (und das oben erwähnte CSS gleich mit):

plugin.sf_event_mgt {
    view {
	partialRootPaths.10 = EXT:my_sitepackage/Resources/Private/Extensions/Sf_event_mgt/Partials/
    }
}
 
page.includeCSS {
    events = EXT:my_sitepackage/Resources/Resources/Public/Css/events_default.css
}

Sodann passt man diese Datei an, so dass der Titel der Kategorie als Klasse ausgegeben wird:

<li class="event-calendar__day event-calendar__day{f:format.date(date: day.timestamp, format: 'N')} {f:if(condition: day.isCurrentMonth, then: '', else: 'event-calendar__day-other-month')}{f:if(condition: day.events, then: ' has-events')}{f:if(condition: day.isCurrentDay, then: ' event-calendar__day-today')}">
    <f:if condition="{day.events}">
        <f:then>
            <div class="event-calendar__day-date">{day.day}</div>
            <f:for each="{day.events}" as="event">
                <f:for each="{event.category}" as="category" iteration="categoryIterator">
                    <div class="event-calendar__day-event {category.title}">
                        <f:link.action action="detail" arguments="{event : event}" pageUid="{settings.detailPid}">{event.title}</f:link.action>
                        <div class="event-calendar__day-event-time">
                            <f:if condition="{day.timestamp -> f:format.date(format: 'd.m.Y')} == {event.startdate -> f:format.date(format: 'd.m.Y')}">
                                <f:then>
                                    <f:format.date format="H:i">{event.startdate}</f:format.date>
                                </f:then>
                            </f:if>
                            <f:if condition="{event.enddate}">
                                <f:then>
                                    <f:if condition="{event.startdate -> f:format.date(format: 'd.m.Y')} == {event.enddate -> f:format.date(format: 'd.m.Y')}">
                                        <f:then>
                                            - <f:format.date format="H:i">{event.enddate}</f:format.date>
                                        </f:then>
                                    </f:if>
                                </f:then>
                            </f:if>
                        </div>
                    </div>
                </f:for>
            </f:for>
        </f:then>
        <f:else>
            <div class="event-calendar__day-date">{day.day}</div>
        </f:else>
    </f:if>
</li>

Der „Trick“ liegt hier:

...
<f:for each="{event.category}" as="category" iteration="categoryIterator">
    <div class="event-calendar__day-event {category.title}">
...
    </div>
</f:for>
...