Skip to content

Instantly share code, notes, and snippets.

@jokumer

jokumer/Example FLUID partial for date variants.md

Last active March 16, 2020 21:05
Show Gist options
  • Save jokumer/e138754b272324711d6002b9bfea4fce to your computer and use it in GitHub Desktop.
Save jokumer/e138754b272324711d6002b9bfea4fce to your computer and use it in GitHub Desktop.
Download ZIP
TYPO3 - Date format for tx_news and tx_eventnews
Raw
Example FLUID partial for date variants.md

Example FLUID partial for date variants

Using TYPO3 CMS extension news with eventnews there can be a lot of different variants of date views:

  • a day
  • a day with starttime to endtime
  • from first day to last day (full day)
  • from first day to last day with starttime to endtime (each day)
  • from first day with starttime to last day with endtime
  • ...

Solve such formats in different FLUID templates, by just render a partial, which already includes all use cases. (See NewsDate.html)

To define date formats for different languages, you can use translations, which can be defined via TypoScript. (See setup.typoscript)

Raw
NewsDate.html
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:if condition="{newsItem.isEvent}">
<f:then>
<f:comment><!-- Event --></f:comment>
<f:if condition="{newsItem.datetime}">
<f:if condition="{newsItem.fullDay}">
<f:then>
<f:comment><!-- Full day --></f:comment>
<f:if condition="{newsItem.eventEnd}">
<f:then>
<f:comment><!-- With end --></f:comment>
<f:if condition="{f:format.date(date:newsItem.datetime, format:'%Y-%m-%d')} == {f:format.date(date:newsItem.eventEnd, format:'%Y-%m-%d')}">
<f:then>
<f:comment><!-- Same day --></f:comment>
<f:translate key="date_prefix" />:
<f:render section="FullOneDay" arguments="{start: newsItem.datetime, end: newsItem.eventEnd}" />
</f:then>
<f:else>
<f:comment><!-- Not same day --></f:comment>
<f:translate key="date_prefix" />:
<f:render section="FullMultipleDays" arguments="{start: newsItem.datetime, end: newsItem.eventEnd}" />
</f:else>
</f:if>
</f:then>
<f:else>
<f:comment><!-- Without end --></f:comment>
<f:translate key="date_prefix" />:
<f:render section="FullOneDay" arguments="{start: newsItem.datetime}" />
</f:else>
</f:if>
</f:then>
<f:else>
<f:comment><!-- Not full day --></f:comment>
<f:if condition="{newsItem.eventEnd}">
<f:then>
<f:comment><!-- With end --></f:comment>
<f:if condition="{f:format.date(date:newsItem.datetime, format:'%Y-%m-%d')} == {f:format.date(date:newsItem.eventEnd, format:'%Y-%m-%d')}">
<f:then>
<f:comment><!-- Same day --></f:comment>
<f:translate key="date_prefix" />:
<f:render section="OneDay" arguments="{start: newsItem.datetime, end: newsItem.eventEnd}" />
</f:then>
<f:else>
<f:comment><!-- Not same day --></f:comment>
<f:translate key="date_prefix" />:
<f:render section="MultipleDays" arguments="{start: newsItem.datetime, end: newsItem.eventEnd}" />
</f:else>
</f:if>
</f:then>
<f:else>
<f:comment><!-- Without end --></f:comment>
<f:translate key="date_prefix" />:
<f:render section="OneDay" arguments="{start: newsItem.datetime}" />
</f:else>
</f:if>
</f:else>
</f:if>
</f:if>
</f:then>
<f:else>
<f:comment><!-- Normal news (no event) --></f:comment>
<f:if condition="{newsItem.datetime}">
<f:render section="Day" arguments="{day: newsItem.datetime}" />
</f:if>
</f:else>
</f:if>
<f:section name="Day">
<f:comment><!-- 31/12-2000 --></f:comment>
<time itemprop="datePublished"
datetime="{f:format.date(date:day, format:'{f:translate(key:\'FormatDate\', default:\'%Y-%m-%d\')}')}">
<f:format.date format="{f:translate(key:'FormatDate', default:'%d/%m - %Y')}">{day}</f:format.date>
</time>
</f:section>
<f:section name="FullOneDay">
<f:comment><!-- 31/12-2000 (full day) --></f:comment>
<time itemprop="startDate"
datetime="{f:format.date(date:start, format:'{f:translate(key:\'FormatDateMicrodata\', default:\'%Y-%m-%d\')}')}">
<f:format.date format="{f:translate(key:'FormatDate', default:'%d/%m - %Y')}">{start}</f:format.date>
</time>
<f:translate key="FormatDateEventFullDayAppendix" />
</f:section>
<f:section name="FullMultipleDays">
<f:comment><!-- 30/12-2000 (full day) --></f:comment>
<f:comment><!-- 30/12-2000 to 31/12-2000 (full day) --></f:comment>
<time itemprop="startDate"
datetime="{f:format.date(date:start, format:'{f:translate(key:\'FormatDateMicrodata\', default:\'%Y-%m-%d\')}')}">
<f:format.date format="{f:translate(key:'FormatDate', default:'%d/%m - %Y')}">{start}</f:format.date>
</time>
<f:if condition="{end}">
<f:translate key="to_date" />
<time itemprop="endDate"
datetime="{f:format.date(date:end, format:'{f:translate(key:\'FormatDateMicrodata\', default:\'%Y-%m-%d\')}')}">
<f:format.date format="{f:translate(key:'FormatDate', default:'%d/%m - %Y')}">{end}</f:format.date>
</time>
</f:if>
<f:translate key="FormatDateEventFullDayAppendix" />
</f:section>
<f:section name="OneDay">
<f:comment><!-- 31/12-2000 from 10:00 --></f:comment>
<f:comment><!-- 31/12-2000 from 10:00 to 18:00 --></f:comment>
<time itemprop="startDate"
datetime="{f:format.date(date:start, format:'{f:translate(key:\'FormatDateMicrodata\', default:\'%Y-%m-%d\')}')}">
<f:format.date format="{f:translate(key:'FormatDate', default:'%d/%m-%Y')}">{start}</f:format.date>
</time>
<f:translate key="from_date" />
<time itemprop="startTime"
datetime="{f:format.date(date:start, format:'{f:translate(key:\'FormatTimeMicrodata\', default:\'%H:%M\')}')}">
<f:format.date format="{f:translate(key:'FormatTime', default:'%H:%M')}">{start}</f:format.date>
</time>
<f:if condition="{end}">
<f:translate key="to_date" />
<time itemprop="endDate"
datetime="{f:format.date(date:end, format:'{f:translate(key:\'FormatDateTimeMicrodata\', default:\'%Y-%m-%d %H:%M\')}')}">
<f:format.date format="{f:translate(key:'FormatTime', default:'%H:%M')}">{end}</f:format.date>
</time>
</f:if>
</f:section>
<f:section name="MultipleDays">
<f:comment><!-- 30/12-2000 --></f:comment>
<f:comment><!-- 30/12-2000 to 31/12-2000 from 10:00 to 18:00 --></f:comment>
<time itemprop="startDate"
datetime="{f:format.date(date:start, format:'{f:translate(key:\'FormatDateMicrodata\', default:\'%Y-%m-%d\')}')}">
<f:format.date format="{f:translate(key:'FormatDate', default:'%d/%m-%Y')}">{start}</f:format.date>
</time>
<f:if condition="{end}">
<f:translate key="to_date" />
<time itemprop="endDate"
datetime="{f:format.date(date:end, format:'{f:translate(key:\'FormatDateMicrodata\', default:\'%Y-%m-%d\')}')}">
<f:format.date format="{f:translate(key:'FormatDate', default:'%d/%m-%Y')}">{end}</f:format.date>
</time>
<f:translate key="from_date" />
<time itemprop="startTime"
datetime="{f:format.date(date:start, format:'{f:translate(key:\'FormatTimeMicrodata\', default:\'%H:%M\')}')}">
<f:format.date format="{f:translate(key:'FormatTime', default:'%H:%M')}">{start}</f:format.date>
</time>
<f:translate key="to_date" />
<time itemprop="endTime"
datetime="{f:format.date(date:end, format:'{f:translate(key:\'FormatTimeMicrodata\', default:\'%H:%M\')}')}">
<f:format.date format="{f:translate(key:'FormatTime', default:'%H:%M')}">{end}</f:format.date>
</time>
</f:if>
</f:section>
</html>
Raw
setup.typoscript
plugin.tx_news._LOCAL_LANG {
default {
FormatDate = %dth %b %Y
FormatDateMicrodata = %Y-%d-%m
FormatDateTime = %dth %b %Y %H:%M
FormatDateTimeMicrodata = %Y-%d-%m %H:%M
FormatTime = %H:%M
FormatTimeMicrodata = %H:%M
FormatDateEventFullDayAppendix = (full day)
from_date = from
to_date = to
}
da {
FormatDate = %d/%m - %Y
FormatDateTime = %d/%m - %Y %H:%M
FormatDateEventFullDayAppendix = (hele dagen)
from_date = fra
to_date = til
}
de {
FormatDate = %d.%m.%Y
FormatDateTime = %d.%m.%Y %H:%M
FormatDateEventFullDayAppendix = (ganztägig)
from_date = von
to_date = bis
}
fr {
FormatDate = %d/%m/%Y
FormatDateTime = %d/%m/%Y %H:%M
FormatDateEventFullDayAppendix = (à plein temps)
from_date = de
to_date = à
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment