jw-calendar: Anpassungsprobleme

Du musst dein html-Template für den jw_calender anpassen.

Wenn du willst kannst du hier mal reinschauen:

<!-- ###MONTH_VIEW### begin -->
		<!--<div class="title">###TIME_INFO###</div>
			<div class="selector">###CATEGORYTITLE###</div>-->
			<table class="cTable-table">
			<tr>
			<th class="cTable-th" style="text-align:center;">###TIME_INFO###
			</th>
			</tr>
			<tr>
			<td class="cTable-td">
			<div class="jwcalendar_month">

          			<!-- ###GO_LAST_YEAR### begin  -->
<div class="last_year"><img src="fileadmin/index/pic/nav_pfeil_rot_prev.gif" style="vertical-align:middle;" /> ###DATA###</div>

          	 		<!-- ###GO_LAST_YEAR### end  -->
      			
	      			
	      			
	      			<!-- ###GO_NEXT_YEAR### begin  -->
<div class="next_year">###DATA### <img src="fileadmin/index/pic/nav_pfeil_rot.gif" style="vertical-align:middle;" /></div>
	          		<!-- ###GO_NEXT_YEAR### end  -->

		<div class="navi">
    		    <table class="months" cellspacing="2">
	       			<!-- ###MONTH_NAVI### begin -->
	       			<!-- ###MONTH_ROW### begin -->
	       	<tr>
	      			<!-- ###MONTHS### begin  -->
	           		<!-- ###CURRENT_MONTH### begin  -->
	       			<td class="current_month">###DATA###</td>
	       			<!-- ###CURRENT_MONTH### end  -->
	       			<!-- ###OTHER_MONTH### begin  -->
	      			<td class="other_month">###DATA###</td>
	       			<!-- ###OTHER_MONTH### end  -->
	       			<!-- ###MONTHS### end  -->
	       	</tr>
	          		<!-- ###MONTH_ROW### end -->
	       			<!-- ###MONTH_NAVI### end -->
	   				</table>
	       	
   		</div>
		<div class="days_view">
	        <!-- ###CALENDAR_TABLE### begin -->
	          	<table class="days">
	            	<!-- ###TABLE### begin  -->
	            	<!-- ###DAYNAMES### begin  -->
	            	<tr>
				<!-- ###CORNER### begin  -->
				<td class="dayname">KW</td>
				<!-- ###CORNER### end  -->
				<!-- ###DAYNAME### begin  -->
	              		<td class="dayname">###DATA###</td>
	              		<!-- ###DAYNAME### end  -->

	            	</tr>
	            	<!-- ###DAYNAMES### end  -->
	            	<!-- ###WEEKS### begin  -->
	            	<tr>
	              		<td class="week">&nbsp;</td>
	              		<!-- ###WEEK### begin  -->
                		<td class="week">###DATA###</td>
	              		<!-- ###WEEK### end  -->
	            	</tr>
	            	<!-- ###WEEKS### end  -->
	            	<!-- ###WEEKDAYS### begin  -->
	            	<tr>
	              		<!-- ###WEEK### begin  -->
	                		<td class="week">###DATA###</td>
	              		<!-- ###WEEK### end  -->
				<!-- ###DAYNAME### begin  -->
	              			<td class="dayname">###DATA###</td>
				<!-- ###DAYNAME### end  -->
	              		<!-- ###DAYS### begin  -->
	                	<!-- ###DAY_INSIDE_MONTH### begin  -->
	                	<td class="inside"###COLOR###>###DATA###</td>
	                	<!-- ###DAY_INSIDE_MONTH### end  -->
	                	<!-- ###DAY_OUTSIDE_MONTH### begin -->
	                	
	                	<td class="outside"###COLOR###>###DATA###</td>
	                	<!-- ###DAY_OUTSIDE_MONTH### end  -->
	                	<!-- ###TODAY### begin  -->
	                	<td class="today"###COLOR###>###DATA###</td>
	                	<!-- ###TODAY### end  -->
	              		<!-- ###DAYS### end  -->
	            	</tr>
	            	<!-- ###WEEKDAYS### end  -->
	            	<!-- ###WEEKEND### begin  -->
	            	<tr>
	              		<!-- ###WEEK### begin  -->
	                		<td class="week">###DATA###</td>
	              		<!-- ###WEEK### end  -->
				<!-- ###DAYNAME### begin  -->
	              			<td class="dayname">###DATA###</td>
				<!-- ###DAYNAME### end  -->
	              		<!-- ###DAYS### begin  -->
	                	<!-- ###DAY_INSIDE_MONTH### begin  -->
	                	<td class="inside_weekend"###COLOR###>###DATA###</td>
	                	<!-- ###DAY_INSIDE_MONTH### end  -->
	                	<!-- ###DAY_OUTSIDE_MONTH### begin  -->
	                	<td class="outside_weekend"###COLOR###>###DATA###</td>
	                	<!-- ###DAY_OUTSIDE_MONTH### end  -->
	                	<!-- ###TODAY### begin  -->
	                	<td class="today_weekend"###COLOR###>###DATA###</td>
	                	<!-- ###TODAY### end  -->
	              		<!-- ###DAYS### end  -->
	            	</tr>
	            	<!-- ###WEEKEND### end  -->
	        	<!-- ###TABLE### end  -->
			</table>
	        <!-- ###CALENDAR_TABLE### end -->
	       </div>
	<!-- ###SUBMIT_EVENT### begin -->
      		<!-- ###CUT_submitEvent### begin  -->
			<div class="submit">###submitEvent###</div>
		<!-- ###CUT_submitEvent### end  -->
      		<!-- ###CUT_submitEvent_no### begin  -->
  			<div class="submit">&nbsp;</div>
      		<!-- ###CUT_submitEvent_no### end  -->
	<!-- ###SUBMIT_EVENT### end -->
				</div>
		</td>
		</tr>
		</table>
<!-- ###MONTH_VIEW### end -->

Die wichtigsten Classes dazu sollten die sein:

table.cTable-table { border:1px solid #BCBEC0; border-collapse:collapse; clear:both; }
td.cTable-td, th.cTable-th { border:1px solid #BCBEC0; border-collapse:collapse; padding:5px; font-size:11px; color:#545353; }
th.cTable-th { background-color:#BF2236; color:#FFF; padding:5px; text-align:left; font-size:13px; }

Alle anderen Classen kannst du selbst anpassen...

Was bei rauskommt:
Bild: kftz.leitstelle-paderborn.de/…/screen.jpg

Hallo,

erst mal vielen Dank.
Kommt der unten stehende Scriptauszugt aus der jw_calendar.tmpl Datei?
Diese habe ich mit folgendem Eintrag in die Constants gestern schon versucht zu verändern:

###Kalender Template
#plugin.tx_jwcalendar_pi1 {
#templateFile = fileadmin/familienbuendnis/kalender/jw_calendar.tmpl
#}

Mit dem mäßigen Erfolg, der Kalender verschwand von meiner Seite - ich kenne auch keine Dokumente mit der .tmpl Endung.
Sprich ich weiß nicht, wie ich diese Datei einbinden kann und wie diese tatsächlich heissen muss!
Und wo muss ich dann die Classes einfügen? In's CSS: jw_calendar.css?

Freu mich auf Antwort, um die Probleme des Unwissenden in den Griff zu bekommen!
Viele Grüße
Ossi

Also erstmal hast du die Zeilen ja mit der Raute alle auskommentiert... Dann kann auch nichts angezeigt werden.

Das Template aus deinem fileadmin bindest du in den constants ein:

plugin {
	tx_jwcalendar_pi1 {
		templateFile = fileadmin/familienbuendnis/kalender/jw_calendar.tmpl
	}
}

Die Datei muss dann natürlich auch in dem Ordner existieren...

Die CSS-Anweisungen schiebst du einfach in dein CSS-File mit rein.

Die CSS-Anweisungen der Extension kannst du mittels

plugin {
	tx_jwcalendar_pi1 {
		_CSS_DEFAULT_STYLE (
...
		)
	}
}

Einfach wie gehabt überschreiben, oder mit

plugin {
	tx_jwcalendar_pi1 {
		_CSS_DEFAULT_STYLE >
	}
}

ganz löschen und das gesamte CSS in eine externe Datei auslagern.

Die kannst du dann in deinem Page-Objekt zum Beispiel mittels

page = PAGE
page {
...
	includeCSS {
		file2 = fileadmin/dein_Pfad/calendar.css
		file2.media = screen
	}
...
}

einbinden.

Ansonsten wirst du für die Bearbeitung des Templates nicht darum herum kommen, deine Nase son bischen in HTML zu stecken ;-)

Super - Danke,

die CSS Datei habe ich schon in eine externe Datei ausgelagert und am Layout experimentiert.
Dank deiner Hilfe wird mir hoffentlich auch der Rest gelingen!

Eines ist mir noch nicht klar:
Wie bearbeite ich die templ. Datei?
Mit meinem Drewamweaver kann ich sie nicht öffnen!?

Viele Grüße
Ossi

Ich habe die Datei einfach mal in .html umbenannt und bearbeitet und dann wieder rückumbenannt - funktioniert, wenn auch mit extrem kryptischen Ergebnisen!
Siehe:
http://p17169.typo3server.info/720.0.html?&tx_jwcalendar_pi1[uid]=1611&tx_jwcalendar_pi1[time]=1197130680&tx_jwcalendar_pi1[view]=MONTH&cHash=a00df6a1b3

Ich habe mal dein html eingebunden und auch dein CSS - warum diese vielen Zahlen?

Vielleicht noch einen Tip🙂

Viele Grüße
Ossi

Also, wenns unter fieladmin liegt, dann kannst du doch das einfach so bearbeiten... Einfach auf das Icon davor klicken und "bearbeiten" auswählen.
Ansonsten natürlich per FTP und dann brauchst du einen vernünftigen Texteditor. z.B. Notepad++

Ansonsten brauchst du dafür die Dateiendung nicht ändern... lass das einfach als .templ.

Ich habe mal dein html eingebunden und auch dein CSS - warum diese vielen Zahlen?

Welche Zahlen?

Hast du etwa die Zeilennummern mitkopiert?

Haha, das ist mir aber nun doch peinlich, dass ich die Zeilennummern mit kopiere 🙂

Klar, es waren die Zeilennummern - schaut schon ganz gut aus, aber wie ändere ich nun die Größe auf z.B. 140px Breite, so dass der große Kalender auch bei 400px bleibt?

Danke nochmal für die geduldige Unterstützung
Viele Grüße
Ossi

table.cTable-table da gehört die Breite rein...
Das ist eigentlich so gestrickt, dass du gar keine Breite brauchst, da der Kalender so groß ist wie der Container in dem er sich befindet. Ich habe allerdings bei 140px Breite so meine Zweifel ob das funktionieren wird... Da wirst du sicher auch diverse Schriftgrößen anpassen müssen (kleiner machen).

Ob sich das auf weitere Kalenderansichten auswirkt, weiß ich nicht, da ich lediglich die kleine Ansicht verwende... Gibts denn da eine große und eine kleine Ansicht?

Den Kalender wirst du mit den Definitionen so nie auf 140px Breite bekommen... da müsstetst du diverse paddings, margins und Schriftgrößen anpassen.

Sorry, dass ich lange nichts von mir hören ließ🙂. Musste meinen Hund versorgen!

Okay,

dann muss ich mein Layout oder mein Seitenkonzept etwas ändern!

Magst Du noch einmal einen Blick darauf werfen - ich meinte mit der großen Ansicht die Monatsdarstellung mit den sichtbaren Terminen -
sprich wenn ich die Breite ändere,dann verändere ich die'große Ansicht', aber nicht die kleine Darstellung in meinem rechten Container.
Kann ich die beiden Ansichten einzeln verkleinern oder verändern.

Noch ein ###submitEvent### hat sich im Kalenderfooter eingeschlichen?

http://p17169.typo3server.info/index.php?id=720

Dankbare Grüße
Ossi

Ich noch einmal,

das ###submitEvent### Problem konnte ich beheben!

Bleibt noch die Größe und die falsche Darstellung der Jahreszahlen ganz oben - ich habe da erst mal zwei willkürliche Bilder eingebunden (zum Testen).

Gibt es den Kalender von Dir eigentlich auf einer Seite zu bewundern?

Bis denn (hoffentlich)
Ossi

Und noch ein letztes mal:

Die Größe habe ich durch langwieriges Austesten des CSS hinbekommen - was jetzt noch 'unschön' ist, ist die Jahresauswahl ganz oben - da komm ich leider nicht mehr mit Austesten hin!

Ich hör jetzt auf und teste morgen weiter...

Viele Grüße
Ossi Gebhardt