TYPO3 – CAL – Timeline | Today – +6 Monate dynamisch

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

|

31 = COA
31.1

|

41 = COA
41.1

|

51 = COA
51.1

|

61 = COA
61.1

|

}

Somit haben wir die Grundlage geschaffen, sodass die 6 CAL-Module zusammen in einem DIV eingebaut werden.
Der Vorteil dabei ist, dass wir durch Typoscript diese Module jederzeit wieder bearbeiten können und damit auch nicht im BE 6 Module einbauen müssen.

Der jQuery-Aufbau:

jQuery.noConflict();
jQuery(document).ready(function(){


	/* Eventline mit Datum von
	// diesem Jahr + aktuelle Monate 
	*************************** */
	pos = 90;
	var today = new Date();
	var m = today.getMonth();
	var j = today.getFullYear();
	var events = jQuery('.eventline .event');
	var date = jQuery('.eventline .event .month-date');
	var monat = new Array("Jan","Feb","Mär","Apr","Mai","Jun","Jul","Aug","Sep","Okt","Nov","Dez");
	
	jQuery(".eventline dt").hide();
	jQuery(".eventline dt.link").show();
	
	
	jQuery(".eventline .event-date").html("<p>Events</p>" + "<p>" + j + "</p>");
	jQuery(".eventline .link").html('<a href="#"><img src="fileadmin/templates/img/btn_event.gif" /></a>');
	

	for (var i = 0, l = 6; i < l; i ++) {
		jQuery(events&#91;i&#93;).css({'left':pos+"px"});
		pos = pos+150;
		
		jQuery(date&#91;i&#93;).html("<p>" + monat[m] + "</p>");
		m++;
	};


	/* MouseOver Effekt für die Daten
	// ausblenden nach 900 MS.
	*************************** */
	jQuery("dt.link").hover(function(){
		if(!jQuery(this).next().hasClass("active")) {
			jQuery("dt.active").fadeOut().removeClass("active");	
			jQuery(this).next().fadeIn().delay("900").addClass("active");
		} else {
			jQuery("dt.active").fadeOut().removeClass("active");	
		}
		return false;
		});

		
	/* Auslesen der Punkte und
	// positionierung. 
	*************************** */
	var events = jQuery('.eventhandler');
	for (var e = 0; e < events.length; e++){
		var save = jQuery(events&#91;e&#93;).find(".date").html();
		var splitter = save.split(".");
		posLeft = splitter&#91;0&#93;*4;
		jQuery(events&#91;e&#93;).prev().css("left",posLeft+"px");
		jQuery(events&#91;e&#93;).css("left",posLeft+"px");
	}
	
});

&#91;/code&#93;

In dem jQuery Script lass ich durch die Datums bestimmung das Jahr und die aktuellen Monate bestimmen. Desweiteren erlaube ich mir, einen Hovereffekt mit einer Ausblendung von 900 MS zu verwenden. Ich geb' zu, das es noch nicht perfekt ist, aber ich arbeite noch daran ;) Tipps sind immer willkommen!

<strong><span style="color: #ff9900;">
</span></strong>

<span style="color: #ff9900;"><strong>Der CSS-Aufbau</strong>:</span>

[code lang="CSS"]
 /* Eventliste
 ***************** */
.eventline {display:block;position:relative;}
.eventline .event {position:absolute;top:10px;border-left:1px solid #a0a2a5;height:50px;padding-left:5px;width:400px;}
.eventline .event-date p{font-size:23px;color:#c20016;font-weight:700;margin:0px;}
.eventline dt.link {position:absolute;top:20px;}
.eventline dt.eventhandler {margin-left:3px;position:absolute;top:30px;background:url(../img/btn_eventbg.png) no-repeat left top transparent;padding:32px 10px 10px 10px;color:#fff;}
	dt.eventhandler .date {display:block;padding-bottom:5px;}
	dt.eventhandler .title {display:block;}
	dt.eventhandler .title a {color:#fff}
.eventline dd {display:none;}
.eventline .even {background-color:transparent;}

Im CSS Aufbau ist nichts Dramatisches zu bedenken. Ausgenommen, dass ich eine Grafik verwende, die bei meinen Events einen roten Punkt anzeigen. Zudem lasse ich eine Überlappung der Elemente zu, damit der Titel des Events nicht umbrochen wird. Wie das Aussehen soll, kann man jedoch natürlich selber bestimmen 😉

Der Template-Aufbau:

<!-- ###TEMPLATE_PHPICALENDAR_EVENT_LIST_ODD_ALLDAY### start -->
	<dt class="link"></dt>	
	<dt class="eventhandler">
		<span>
			<span class="date">###STARTDATE### ###ENDDATE### </span>
			<span class="title"><!-- ###EVENT_LINK### start-->###TITLE###<!-- ###EVENT_LINK### end--></span>
		</span>
	</dt>
	<dd>###DESCRIPTION###</dd>
<!-- ###TEMPLATE_PHPICALENDAR_EVENT_LIST_ODD_ALLDAY### end -->


<!-- ###TEMPLATE_PHPICALENDAR_EVENT_LIST_EVEN_ALLDAY### start -->
	<dt class="link"></dt>	
	<dt class="eventhandler even">
		<span>
			<span class="date">###STARTDATE### ###ENDDATE### </span>
			<span class="title"><!-- ###EVENT_LINK### start-->###TITLE###<!-- ###EVENT_LINK### end--></span>
		</span>
	</dt>
	<dd class="even">###DESCRIPTION###</dd>
<!-- ###TEMPLATE_PHPICALENDAR_EVENT_LIST_EVEN_ALLDAY### end -->

Da CAL ja ein eigenes Templates verwendet, hier meine Anpassung an diesem.

Screenshot: