CGCalendar Templates-Stylesheets

Für Fragen und Diskussionen zum Layout und Design, Templates und Stylesheets sowie Themes
Post Reply
NaN

Re: CGCalendar Templates-Stylesheets

Post by NaN »

Danke für die Vorstellung.

Na dann will ich auch mal mitmachen ;D
Bin gerade dabei jQuery FullCalendar von Adam Shaw mit CGCalendar umzusetzen.

Einfach runterladen, die Scripte und Stylesheets auf den Server laden und ins Template einbinden.
Als Template folgendes Listentemplate verwenden:

Code: Select all


{literal}




	$(document).ready(function() {
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();
		$('#calendar').fullCalendar({
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek'
			},
			titleFormat: {
				day: 'dddd, d. MMM yyyy'
			},
			columnFormat: {
				month: 'ddd',
				week: 'ddd, d.M.',
				day: 'dddd d. MMMM'
			},
			viewDisplay: function(view) {
				if(view.name == 'agendaWeek') {
					$('#calendar').fullCalendar('option', 'contentHeight', 700);
				}
				else {
					$('#calendar').fullCalendar('option', 'contentHeight', '');
				}
			},
			timeFormat: 'H:mm',
			axisFormat: 'H:mm',
			monthNames: ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'],
			monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'],
			dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
			dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'],
			buttonText: {
				today: 'Heute',
				month: 'Monat',
				week: 'Woche',
				day: 'Tag'
			},
			firstDay: 1,
			allDaySlot: false,
			editable: false,
			firstHour: 8,
			minTime: 8,
			maxTime: 22,
			events: [
{/literal}
{foreach from=$events key=key item=event name=events}
	{literal}{{/literal}
				title: '{$event.event_title}',
				url: '{$event.url}',
				allDay: false,
				start: new Date({$event.event_date_start|date_format:"%Y"},{math equation="x - y" x=$event.event_date_start|date_format:"%m" y=1},{$event.event_date_start|date_format:"%d, %k,%M" y=1}){if $event.event_date_start != $event.event_date_end && $event.event_date_end > 0},
				end: new Date({$event.event_date_start|date_format:"%Y"},{math equation="x - y" x=$event.event_date_start|date_format:"%m" y=1},{$event.event_date_start|date_format:"%d, %k,%M" y=1}){/if}
	{literal}}{/literal}{if !$smarty.foreach.events.last},{/if}
{/foreach}
{literal}
			]
		});
	});

{/literal}


Den Kalender dann wie folgt aufrufen:

Code: Select all


{cms_module module="CGCalendar" display="yearlist" listtemplate="[Name des Listentemplates]"}

Das war's eigentlich schon.
Die Idee ist aber noch nicht ganz ausgereift, da man hier immer alle Termine des gesamten Jahres laden muss. Ich bin noch nicht so tief in die Funktionen des Fullcalendars eingestiegen, aber man könnte die Events auch dynamisch laden. Das wird aber alles um einiges komplizierter.
Für den Anfang sollte das reichen ;)

(Kann es leider noch nicht in Aktion zeigen, aber sobald die Seite offiziell online ist, stelle ich den Link hier rein)
Last edited by NaN on Fri Dec 10, 2010 5:18 pm, edited 1 time in total.
Post Reply

Return to “Layout und Design”