Wie versprochen, zeige ich euch hier eine Timeline, die ich mit mit Calender Base erstellt habe.
Ich habe mir viele Gedanken darüber gemacht, wie man das ausschließlich mit Typoscript und ein bisschen jQuery machen kann. Allerdings ist die Geschichte mit dem Calender Base doch etwas komplexer als vielleicht anfangs gedacht. Doch mit etwas Zeit und Ehrgeiz ist auch das eine Hürde, die man nehmen kann ohne komplett zu verzweifeln.
Der Aufbau für dieses kleine Modul besteht aus TypoScript, jQuery und CSS.
Genutzt werden zudem die Extensions: cal (Calender Base) und tscobj* (Content Element From TypoScript)
*optional oder direkt mit TemplaVoila oder in einen Marker.
Der TypoScript-Aufbau:
/* Aufbau der CAL’s (6x) + jeweils den Monat
// zum individuellen bearbeiten für jeden CAL
************************************/
lib.month1 < plugin.tx_cal_controller
lib.month1 {
view {
useGetdate = 1
useCustomEndtime = 1
allowedViews = list
list.starttime = today
#list.starttime = cal:monthstart
list.endtime = cal:monthend
event.eventViewPid = 75
}
}
lib.month2 < plugin.tx_cal_controller
lib.month2 {
view {
useGetdate = 1
useCustomEndtime = 1
allowedViews = list
list.starttime = cal:monthstart +1 month
list.endtime = cal:monthend +1 month
event.eventViewPid = 75
}
}
lib.month3 < plugin.tx_cal_controller
lib.month3 {
view {
useGetdate = 1
useCustomEndtime = 1
allowedViews = list
list.starttime = cal:monthstart +2 month
list.endtime = cal:monthend +2 month
event.eventViewPid = 75
}
}
lib.month4 < plugin.tx_cal_controller
lib.month4 {
view {
useGetdate = 1
useCustomEndtime = 1
allowedViews = list
list.starttime = cal:monthstart +3 month
list.endtime = cal:monthend +3 month
event.eventViewPid = 75
}
}
lib.month5 < plugin.tx_cal_controller
lib.month5 {
view {
useGetdate = 1
useCustomEndtime = 1
allowedViews = list
list.starttime = cal:monthstart +4 month
list.endtime = cal:monthend +4 month
event.eventViewPid = 75
}
}
lib.month6 < plugin.tx_cal_controller
lib.month6 {
view {
useGetdate = 1
useCustomEndtime = 1
allowedViews = list
list.starttime = cal:monthstart +5 month
list.endtime = cal:monthend +5 month
event.eventViewPid = 75
}
}
/* Generierung der Timeline mit Wraps
// Es kann auch anders aufgebaut werden, jedoch
// sollten die Class-Names beibehalten werden.
************************************/
lib.eventList = COA
lib.eventList {
10 = TEXT
10 {
wrap =
}
11 = COA
11.1< lib.month1
11.wrap =
|
21 = COA |
21.1
kleine Anpassung dazu noch.
So wird beim Hover des Textes nichts direkt ausgeblendet, sondern erst wenn man den nächsten Punkt anklickt.
Dazu in der letzten Zeile noch, dass sich das erste Objekt auch direkt einblendet.