Le news di TYPO3 (tx_news) possono essere utilizzate per diversi scopi. In questo post vengono utilizzate per rappresentare gli eventi.
In particolare andremo a vedere l'integrazione con il calendario Fullcalendar sfruttando direttamente le date presenti nei campi dell'estensione.
L'utilizzo di un calendario all'interno di un portale potrebbe risultare molto utile.
Gli step sono i seguenti:
1. Creare un pagina per il ritorno json degli eventi da mostrare nel calendario
Per prima cosa andiamo a creare il file json per il calendario con la lista degli eventi e le informazioni che vogliamo stampare nel calendario. Innanzitutto va creata una pagina vuota in typoscript:
empty = PAGE
empty.typeNum = 0
empty.config.disableAllHeaderCode = 1
Per utilizzare la data inizio e di fine degli eventi sono stati utilizzati dei campi custom. In alternativa possono essere utilizzati datetime e archive.
Ad ogni cambio di pagina Fullcalendar fa una chiamata ajax con i parametri in GET start ed end. Questi parametri, che servono a definire l'intervallo temporale, saranno utilizzati nella query in TypoScript. Per utilizzarli nella query, questi parametri verranno parsati mediante la funzionalità markers in modo da rimuovere possibili SQLInjection.
empty.10 = COA
empty.10{
20 = CONTENT
20.table = tx_news_domain_model_news
20.select{
selectFields = uid, title, datetime, archive
#XX è l'ID della cartella eventi
pidInList = XX
#Questa è la parte del where originale utilizzata per l'intervallo temporale
#where = (publications_endtime > UNIX_TIMESTAMP(STR_TO_DATE('2015-12-27', '%Y-%m-%d')) AND publications_starttime < UNIX_TIMESTAMP(STR_TO_DATE('2016-02-07', '%Y-%m-%d')) )
#Gli apici sono stati rimossi, nell'utilizzo dei markers, perché questa funzione di base li aggiunge come prevenzione
where = (datetime > UNIX_TIMESTAMP(STR_TO_DATE(###start###, '%Y-%m-%d')) AND archive < UNIX_TIMESTAMP(STR_TO_DATE(###end###, '%Y-%m-%d')) )
orderBy = crdate ASC
markers {
start.data = GP:start
end.data = GP:end
}
}
20.renderObj = COA
20.renderObj{
//5 = TEXT
//5.data = debug:data
10 = TEXT
10.dataWrap = "id":{field:uid},"title":"
15 = TEXT
15.field = title
15.wrap = |
20 = TEXT
20.field = datetime
20.date = Y-m-d
20.wrap = ","start":"|",
25 = TEXT
25.date = Y-m-d
25.field = archive
25.wrap = "end":"|",
25.fieldRequired = archive
30 = TEXT
30.typolink.returnLast = url
#XX è la pagina di dettaglio dell'evento
30.typolink.parameter = XX
30.typolink.additionalParams.dataWrap =&tx_news_pi1[news]={field:uid}&tx_news_pi1[controller]=News&tx_news_pi1[action]=detail
30.rawUrlEncode = 1
30.htmlSpecialChars = 1
30.split{
token = /
cObjNum = 1
1.cObject = COA
1.cObject.10 = TEXT
1.cObject.10.current = 1
1.cObject.10.wrap = \/|
}
30.wrap = "url":"|"
}
20.renderObj.wrap = {|},
#substring viene utilizzato, in questo caso, per togliere la virgola dopo l'ultimo elemento
20.stdWrap.substring = 0,-1
}
empty.10.wrap = [|]
2. Creare una pagina per il calendario e installare Fullcalendar
Le istruzioni e i file sono presenti al seguente link
Come pagina per il ritorno degli eventi utilizzate quella appena creata:
$('#calendar').fullCalendar({
events: "path/jsonEvents"
});