.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt .. role:: underline :Created: 2006-03-27T10:28:39 :Changed: 2006-04-11T08:35:07 :Info 1: .. _EXT-Calendar: EXT : Calendar ============== Extension Key: **tc2lcal** Copyright 2006, Jonathan Couillard St-Pierre, This document is published under the Open Content License available from http://www.opencontent.org/opl.shtml The content of this document is related to TYPO3 a GNU/GPL CMS/Framework available from `www.typo3.com `_ .. _Table-of-Contents: Table of Contents ----------------- **Calendar for TYPO3 1** **Introduction 1** What does it do? 1 Screenshots 1 **Users manual 5** **Administration 5** Installation.......................................................... ...................................................................... ........................................5 Reference 9 **Known problems 14** **To-Do list 14** **Changelog 14** .. _Introduction: Introduction ^^^^^^^^^^^^ .. _What-does-it-do: What does it do? ^^^^^^^^^^^^^^^^ \- This calendar is based on a combination of most calendar found on the net. .. _img-1-Screenshot: |img-1| Screenshot ^^^^^^^^^^^^^^^^^^ MiniCalendar |img-2| year view |img-3| month view |img-4| week view .. _User-Manual: User Manual ^^^^^^^^^^^ **View Calendar** \- Jump : The jump fonction can bring you to any date in the calendar, for the manual bring your mouse on the information button. \- Year : Go to the year before or to the next year. All months, weeks and days are linked. \- Month : Go to the month before or to the next month. In the title the year is linked. All weeks, days and events are linked. \- Week : Go to the week before and to the next week. All days and events are linked. \- Day : Go to the day before and to the next day. All events are linked. \- List : Display of events with linked title. Display by category. **Mini Calendar** Go to the month before or to the next month. All days linked. **Incoming events** List of incoming events. Display of events with linked title. All incoming events : List of all incoming events. Display of events with linked title. Display by category. .. ### BEGIN~OF~TABLE ### .. _hh-mm: hh : mm - ... """"""""""""" .. container:: table-row a hh : mm - ... b Starting date of event .. _: ... """ .. container:: table-row a ... b Event in progress .. _hh-mm: ... - hh : mm """"""""""""" .. container:: table-row a ... - hh : mm b Ending date of event .. ###### END~OF~TABLE ###### .. _Administration: Administration ^^^^^^^^^^^^^^ |img-5| **Installation** Install the extension with the extension manager. Then choose the plugin, in the page configuration. There is a lot of stuff that has been but in the backend for a more user friendly touch. But they will be explaned one by one. |img-6| :underline:`Main` View : Default view, that you want for your calendar Min Year : Year minimum in the jump Max Year : Year maximum in the jump :underline:`Event Tooltip` |img-7| The event tooltip is a little table that will show up when you bring your cursor on a event, it will display the elements that you have chosen here. Of course if none have been checked the event tooltip won't even be displayed. Starting : Starting date and time Ending : Ending date and time Organizer : The one who organized the event Summary : A quick summary of the event Description : A description of the event Comments : Comments on the event URL : An Internet link for the event E\_mail : An email to contact someone about the event Category : The category the event will be considered in Priority : High, Medium, Low or none Participants : Shouldn't be checked if there is a lot of participants |img-8| :underline:`Color` Some colors will be picked from the backend. Today background color - Week : View week, the color of the present day Today background color - Month : View month, the color of the present day Today background color - Year : View year, the color of the present day OnMouse background color - Day : The color of the case will change to this color when you bring your cursor on a day case in any of the view. OnMouse background color - Week : The color of the case will change to this color when you bring your cursor on a week case in any of the view. Background color – Weeks : The background color of the week numbers in any view Background color No Event – Day : The background color, in the day view, of the case that do not have any event. Background color Event – Day : The background color, in the day view, of the case that do have a event. Background color – Week : Background color, in the week view, of the day cases Background color – Month : Background color, in the week month, of the day cases Background color – Year : Background color, in the week year, of the day cases Background color – No Date : Background color of the case where there is no event in any view but day Background color – WeekEnd : Background color of the WeekEnd, any view but day :underline:`List View` List view is a list of the events |img-9| Number of incoming events : In the view List you will go at first on a list that will only show a couple of events, it is chosen here. Events per page : Number of events that you want to see on one page, the item will also take effect on any list found in the plugin. For example, if you click on a participant's name you'll be able to see all the events the participant will be in and the number of events per page will also have been picked here. For the rest, it's the same as the event Tooltip, but for the list mode. There is by default, the starting and ending time and also the title of the event. :underline:`MiniCal` The MiniCal view |img-10| Background color – Week : The background color for the weeks Today background color : The color of the present day Background color – Day of the Week : The background color for the day of the week Background color – No Date : Background color of the case where there is no event Background color – WeekEnd : Background color of the WeekEnd Dot color : The color of the dot when there is an event Page ID to display list : When you click on a day you can change page where you want to list to be displayed Page ID to return to : If you want to go to another another after the view of the list You now have a functional calendar, only thing left is to add some Events, Categories and Locations. **Adding Event, Category or Location** Easiest way is to create a sysfolder, click on the little earth next to Blank DUMMY then New and create a Page (inside). Uncheck the hide page check box and in Type choose SysFolder. Pick a name for your Folder, (ex : CalForder). Now that your folder is created, click on the icon of your folder and New. You'll then have the possibility to create an event, category or location. |img-11| |img-12| |img-13| |img-14| |img-15| **Events** Starting : Starting date and time Ending : Ending date and time Organizer : The one who organized the event. The organizer are picked from the frontend user list. You can created another SysFolder, where you can create a Website usergroup then a Website user. Summary : A quick summary of the event Description : A description of the event Comments : Comments on the event URL : An Internet link for the event E\_mail : An email to contact someone about the event Category : The category the event will be considered in Priority : High, Medium, Low or none Participants : Those who participate to the event. The participants are also picked from the frontend user list. |img-16| **Category** |img-17| Title : The title of the category Color : The color of the dot that will show on the year view **Location** |img-18| Title : The title of the location Address : The Address of the location Telephone : The telephone number of the location Fax : The fax number of the location Email : The email of the location Zip : The Zip code City : The City Country : The country www : The Internet address of the location Notes : Some notes .. _Reference: Reference ^^^^^^^^^ .. ### BEGIN~OF~TABLE ### .. _: :: "" .. container:: table-row Property :: dateStartTop Data type string Description The date and time part in the List is separated in two parts, this is the top one for the starting time. Enter the symboles used in the php fonction date. **Example:** :: plugin.tc2lcal_pi1.displayByList.dateStartTop = Y-m-d Default :: Y-m-d .. _: :: "" .. container:: table-row Property :: dateStartBot Data type string Description The date and time part in the List is separated in two parts, this is the bottom one for the starting time. Enter the symboles used in the php fonction date. **Example:** :: plugin.tc2lcal_pi1.displayByList.dateStartBot = H:i Default :: H:i .. _: :: "" .. container:: table-row Property :: dateEndTop Data type string Description The date and time part in the List is separated in two parts, this is the top one for the ending time. Enter the symboles used in the php fonction date. **Example:** :: plugin.tc2lcal_pi1.displayByList.dateEndTop = Y-m-d Default :: Y-m-d .. _: :: "" .. container:: table-row Property :: dateEndBot Data type string Description The date and time part in the List is separated in two parts, this is the bottom one for the ending time. Enter the symboles used in the php fonction date. **Example:** :: plugin.tc2lcal_pi1.displayByList.dateEndBot = H:i Default :: H:i .. _: :: "" .. container:: table-row Property :: dateStart Data type string Description Date and time starting. Enter the symboles used in the php fonction date. **Example:** :: plugin.tc2lcal_pi1.displayByEvent.dateStart = H:i Y-m-d Default :: H:i Y-m-d .. _: :: "" .. container:: table-row Property :: dateEnd Data type string Description Date and time ending. Enter the symboles used in the php fonction date. **Example:** :: plugin.tc2lcal_pi1.displayByEvent.dateEnd = H:i Y-m-d Default :: H:i Y-m-d .. _CSS-DEFAULT-STYLE: \_CSS\_DEFAULT\_STYLE """"""""""""""""""""" .. container:: table-row Property \_CSS\_DEFAULT\_STYLE Data type Description :: /* List Events */ #In_Progress {color:red;} #category_current {BORDER-TOP:#000000 1px solid; BORDER-LEFT:#000000 1px solid; BORDER-RIGHT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid;padding-left:5px;padding-right:5px; background-color:black; color:white;} #category_picker form select {margin-left:5px; vertical-align:top;} #category_picker form input {margin-left:5px;} #contentListNumberEvent table {border-collapse:collapse;} #contentListNumberEvent table tr {border:#C0C0C0 solid 1px;} #contentListNumberEvent table th {padding-right:5px; font-size:small; height:30px; background: url(typo3conf/ext/tc2lcal/img/bgColorWeek.gif); color:white;} #contentListNumberEvent table td, #contentListNumberEvent table td a{padding-right:20px; font-size:small;} #listEvent_firstColor_Pres, #listEvent_firstColor_Pres a{background-color:#e5f3f5; color:red;} /* fcffc2 */ #listEvent_secondColor_Pres, #listEvent_secondColor_Pres a{background-color:#e3e3e3; color:red;} /* d0f8ff */ #listEvent_firstColor_Fut, #listEvent_firstColor_Fut a{background-color:#e5f3f5; color:black;} #listEvent_secondColor_Fut, #listEvent_secondColor_Fut a{background-color:#e3e3e3; color:black;} /* Day */ #headerTc2lCalDay {margin:10px 0; text-align: center;} #backInDay {position:absolute; margin-top: -30px; margin-left: 10px;} #contentDay {margin-top: 20px; border-top: #000000 1px solid; border-left: #000000 1px solid; border-right: #000000 1px solid; border-bottom: #000000 1px solid; text-align:center;} #contentDay table {width:100%; border:0; height:700px;} #contentDay table th {color:white; background-color:#000049; width:10px; height:100px; text-align:center;} #contentDay table td {font-size: small; vertical-align:text-top;} #contentDay a {text-decoration:none;} /* Week */ #headerTc2lCalWeek {margin:10px 0; text-align: center;} #backInWeek {position:absolute; margin-top: -30px; margin-left: 10px;} #detailWeek {vertical-align:4; text-align:center;} #contentWeek {margin-top: 20px; text-align: center;} #contentWeek table {width:100%; height:700px; border-collapse:collapse;} #contentWeek table tr {} #contentWeek table tr th {border:#C0C0C0 solid 1px;} #viewWeek_Time {height:50px; background: url(typo3conf/ext/tc2lcal/img/viewWeek_Time.gif); color:white;} .viewWeek_Date {height:50px; background: url(typo3conf/ext/tc2lcal/img/bgColorDate.gif);} .viewWeek_Date div a {color:black; text-decoration:none;} #viewWeek_TimeNumber {height:100px; background:#000049; color:white;} #contentWeek table tr td {border:#C0C0C0 solid 1px; vertical-align:text-top;} #contentWeek table tr td div {font-size:x-small;} #contentWeek table tr td div a {text-decoration:none;} /* Month */ #headerTc2lCalMonth {margin:10px 0; text-align: center;} #detailMonth {text-align:center; font-size:xx-large; margin-left:20px; margin-right:20px;} #detailMonth a {color:black; text-decoration:none;} #contentMonth {margin-top:20px;} #contentMonth table {width:800px; border-collapse:collapse;} #contentMonth table tr {} #contentMonth table tr th {border:#C0C0C0 solid 1px; height:30px;} #contentMonth table tr th a {text-decoration:none;} #contentMonth table tr th a:link {color:white;} #contentMonth table tr th a:visited {color:white;} #contentMonth table tr td {border:#C0C0C0 solid 1px; text-align:left; vertical-align:text-top; height:100px;} #contentMonth table tr td a, #contentMonth table tr td div {font-size:x-small;text-decoration:none;} #contentMonth table tr td div a:link {} #bgColorDayOfWeek {background: url(typo3conf/ext/tc2lcal/img/bgColorMonth.gif);} #bgColorWeek {background: url(typo3conf/ext/tc2lcal/img/bgColorWeek.gif); color:white;} #backInMonth {position:absolute; margin-top: -30px; margin-left: 10px;} /* Year */ #headerTc2lCalYear {margin:10px 0; text-align: center;} #detailYear {text-align:center; font-size:xx-large; margin-left:20px; margin-right:20px;} #contentYear {margin-top:-10px;} #contentYear table {text-align:center; margin:9px; width:100%;} #contentYear table tr td {vertical-align:top;} #contentYear table tr td table {border:#C0C0C0 solid 1px; border-collapse:collapse; width:300px;} #contentYear table tr td table tr th {font-size:xx-small; border:#C0C0C0 solid 1px;} #contentYear table tr td table tr th a {text-decoration:none;} #contentYear table tr td table tr td {font-size:xx-small; border:#C0C0C0 solid 1px; text-align:right; vertical-align:text-top;} #contentYear table tr td table tr td a {text-decoration:none;} #viewYear_Month {background:url(typo3conf/ext/tc2lcal/img/viewYear_Month); height:25px;}/* Month */ #viewYear_Month a {font-size:medium;} #viewYear_Month a:link {color:white;} #viewYear_Month a:visited {color:white;} #viewYear_Week {background:url(typo3conf/ext/tc2lcal/img/viewYear_Week); height:20px; color:white; width:30px;} #viewYear_Week a {text-decoration:none;} #viewYear_DayOfWeek {background:url(typo3conf/ext/tc2lcal/img/viewYear_DayOfWeek); width:38.5px;} #viewYear_WeekNumber {height:35px;} #viewYear_WeekNumber a:link, #viewYear_WeekNumber a:visited{color:white;} #backInYear {position:absolute; margin-top: -30px; margin-left: 10px;} /* Event */ .legendListEvent {float:left; clear:left; width: 100px;} #contentEvent div {margin-bottom: 5px;} #contentEvent {margin-top: 5px;} .viewEvent_day_IMG {position:absolute; margin-left:10px; margin-top:-5px;} .viewEvent_week_IMG {position:absolute; margin-left:40px; margin-top:-5px;} .viewEvent_month_IMG {position:absolute; margin-left:70px; margin-top:-5px;} /* Location */ .legendListLoc {float:left; clear:left; width: 100px;} #contentLoc div {margin-bottom: 5px;} #contentLoc {margin-top: 5px;} /* User */ .legendListUser {float:left; clear:left; width: 100px;} #contentUser div {margin-bottom: 5px;} #contentUser {margin-top: 5px;} /* Category */ #category,#category_picker {float: left;} #category_current {float: left; margin-left:15px;} #contentListNumberEvent {clear: left;} /* Jump */ #jumpTo {text-align:center; font-size:small;} #jumpTo img {vertical-align:-4px; margin-right:5px;} #jumpTo select {margin-left:5px;margin-right:5px;} #jumpTo input {vertical-align:-5px; margin-left:5px;} /* Quick Jump */ .quickJumpTo {float:right;} /* MiniCal */ #contentMiniCal table {border:#C0C0C0 solid 1px; border-collapse:collapse; width:180px; height:185px;} #contentMiniCal table tr th {font-size:xx-small; border:#C0C0C0 solid 1px;} #contentMiniCal table tr th a {text-decoration:none;} #contentMiniCal table tr td {font-size:xx-small; border:#C0C0C0 solid 1px; text-align:center; vertical-align:text-top;} #contentMiniCal table tr td a {text-decoration:none;} #miniCal_Month {background:url(typo3conf/ext/tc2lcal/img/viewYear_Month.gif); height:20px; color:white; margin-left:10px; margin-right:10px;} #miniCal_Week {background:url(typo3conf/ext/tc2lcal/img/miniCal_Week.gif); height:15px; color:white;} #miniCal_DayOfWeek {background:url(typo3conf/ext/tc2lcal/img/miniCal_DayOfWeek.gif);} .miniCal_WeekNumber {height:25px; color:white;} .miniCal_WeekNumber a {text-decoration:none; color:white;} #miniCal_leftArrow {margin-right:10px;} #miniCal_rightArrow {margin-left:10px;} Default .. ###### END~OF~TABLE ###### .. _Known-problems: Known problems -------------- .. _To-Do-list: To-Do list ---------- .. _Change-log: ***Change log*** ---------------- .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.png .. :align: left .. :border: 0 .. :height: 185 .. :id: Image15 .. :name: Image15 .. :width: 289 .. |img-2| image:: img-2.png .. :align: left .. :border: 0 .. :height: 662 .. :id: Image16 .. :name: Image16 .. :width: 665 .. |img-3| image:: img-3.png .. :align: left .. :border: 0 .. :height: 659 .. :id: Image17 .. :name: Image17 .. :width: 665 .. |img-4| image:: img-4.png .. :align: left .. :border: 0 .. :height: 884 .. :id: Image18 .. :name: Image18 .. :width: 665 .. |img-5| image:: img-5.png .. :align: left .. :border: 0 .. :height: 67 .. :id: Image1 .. :name: Image1 .. :width: 93 .. |img-6| image:: img-6.png .. :align: left .. :border: 0 .. :height: 62 .. :id: Image2 .. :name: Image2 .. :width: 86 .. |img-7| image:: img-7.png .. :align: left .. :border: 0 .. :height: 171 .. :id: Image3 .. :name: Image3 .. :width: 88 .. |img-8| image:: img-8.png .. :align: left .. :border: 0 .. :height: 277 .. :id: Image5 .. :name: Image5 .. :width: 221 .. |img-9| image:: img-9.png .. :align: left .. :border: 0 .. :height: 183 .. :id: Image4 .. :name: Image4 .. :width: 159 .. |img-10| image:: img-10.png .. :align: left .. :border: 0 .. :height: 163 .. :id: Image6 .. :name: Image6 .. :width: 221 .. |img-11| image:: img-11.png .. :align: left .. :border: 0 .. :height: 50 .. :id: Image7 .. :name: Image7 .. :width: 332 .. |img-12| image:: img-12.png .. :align: left .. :border: 0 .. :height: 39 .. :id: Image10 .. :name: Image10 .. :width: 108 .. |img-13| image:: img-13.png .. :align: left .. :border: 0 .. :height: 55 .. :id: Image9 .. :name: Image9 .. :width: 120 .. |img-14| image:: img-14.png .. :align: left .. :border: 0 .. :height: 191 .. :id: Image8 .. :name: Image8 .. :width: 134 .. |img-15| image:: img-15.png .. :align: left .. :border: 0 .. :height: 452 .. :id: Image12 .. :name: Image12 .. :width: 290 .. |img-16| image:: img-16.png .. :align: left .. :border: 0 .. :height: 157 .. :id: Image11 .. :name: Image11 .. :width: 290 .. |img-17| image:: img-17.png .. :align: left .. :border: 0 .. :height: 67 .. :id: Image13 .. :name: Image13 .. :width: 369 .. |img-18| image:: img-18.png .. :align: left .. :border: 0 .. :height: 508 .. :id: Image14 .. :name: Image14 .. :width: 295