News TYPO3 (tt_news) can be used for multiple purposes. In this post we are used to represent events. In particular, we're going to see integration with the calendar Fullcalendar (jquery) directly using dates in the camps of the extension.
The use of a calendar within a portal could be very useful. The steps are the following:
1. Create a page for the return json to show events in the calendar
First step. let's create the json file to the calendar with the list of events and the information that we want to print. First of all we need to create a typoscript empty page
empty = PAGE
empty.typeNum = 0
empty.config.disableAllHeaderCode = 1
To use the start and end date of the events we used of the custom fields. Alternatively, they can be useddatetime and archive fields. With each change of page Fullcalendar makes an ajax call with the parameters in GET start and end.These parameters, which are used to define the time interval, will be used in the query in TypoScript. For use in the query, these parameters will be parsed through the feature markers to remove possible SQLInjection.
empty.10 = COA
empty.10{
20 = CONTENT
20.table = tx_news_domain_model_news
20.select{
selectFields = uid, title, datetime, archive
#XX is Event folder ID
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 detail page ID of event
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. Create a new page for the Calendar and install Fullcalendar jquery
In order to have information and files about fullcalendar click on the following link
$('#calendar').fullCalendar({
events: "path/jsonEvents"
});