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

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>


 /* 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:

CALCalender BaseEventlistJqueryTypo3typoscript

One Reply to “TYPO3 – CAL – Timeline | Today – +6 Monate dynamisch”

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.

   	jQuery("dt.link").hover(function(){
   		if(!jQuery(this).next().hasClass("active")) {
   			jQuery("dt.active").fadeOut().removeClass("active");	
   			jQuery(this).next().fadeIn().addClass("active");
   		} 
   		return false;
   	});
   	jQuery("dt.link:first").next().delay(900).fadeIn("slow").addClass("active");
   

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.