.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt ============================== Browser Tutorial Calendar (en) ============================== :Created: 2010-10-13T21:40:33 :Changed by: Dirk Wildt :Changed: 2012-05-17T05:04:06 :Classification: browser_tut_calendar_en :Description: Publish your data based on a calendar! Tutorial Calendar for the Browser - the TYPO3-Frontend-Engine. :Keywords: forAdmins, forDevelopers, forBeginners, forAdvanced, cal, calendar :Author: Dirk Wildt - Die Netzmacher :Email: http://wildt.at.die-netzmacher.de :Website: http://die-netzmacher.de :Language: en |img-1| |img-2| Browser Tutorial Calendar (en)|img-3| .. _Browser-Tutorial-Calendar-en: Browser Tutorial Calendar (en) ============================== Publish your data based on a calendar! Tutorial Calendar for the Browser - the TYPO3-Frontend-Engine. **Unofficial version!** - The Browser will support all features of +Browser Calendar from version 4.5 - You can use the day's schedule from version 4.0 only! |img-4| Version: 3.9.14, 2012-05-17 Extension Key: browser\_tut\_calendar\_en - Tutorial for the extension Browser (extkey: browser) Language: en Keywords: forAdmins, forDevelopers, forBeginners, forAdvanced, cal, calendar Copyright 2011 - 2012, Dirk Wildt - Die Netzmacher, 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.org .. _Table-of-Contents: Table of Contents ----------------- `Browser Tutorial Calendar (en) 1 <#__RefHeading__1165_1172745218>`_ `Screen shots 3 <#__RefHeading__1167_1172745218>`_ `Frontend 3 <#__RefHeading__5017_1666017150>`_ `Backend 4 <#__RefHeading__29036_991264776>`_ `Introduction 5 <#__RefHeading__1513_1172745218>`_ `What does it do? 5 <#__RefHeading__1169_1172745218>`_ `Further Information 5 <#__RefHeading__1171_1172745218>`_ `Tutorial +Browser Calendar I/II 6 <#__RefHeading__40023_991264776>`_ `What do you need? 6 <#__RefHeading__40654_991264776>`_ `Install a database with events 6 <#__RefHeading__29040_991264776>`_ `Page and folder 6 <#__RefHeading__29042_991264776>`_ `Plugin +Browser Calendar 11 <#__RefHeading__29052_991264776>`_ `Extend the Browser with +Browser Calendar 13 <#__RefHeading__29058_991264776>`_ `Frontend 14 <#__RefHeading__40025_991264776>`_ `Tutorial +Browser Calendar II/II 15 <#__RefHeading__40027_991264776>`_ `Navigation 15 <#__RefHeading__40029_991264776>`_ `Coloured calendar items 17 <#__RefHeading__40031_991264776>`_ `TypoScript snippets 18 <#__RefHeading__40033_991264776>`_ `Remove the Organiser 20 <#__RefHeading__40035_991264776>`_ `Extension manager 20 <#__RefHeading__3566_1905617864>`_ `Install Tool 20 <#__RefHeading__3568_1905617864>`_ `Reference 21 <#__RefHeading__55058_1116738509>`_ `Completely Browser Reference 21 <#__RefHeading__44233_603351207>`_ `Javascript 21 <#__RefHeading__55060_1116738509>`_ `Master Template 22 <#__RefHeading__55062_1116738509>`_ `Helpful suggestions 23 <#__RefHeading__1283_2006342602>`_ `Change Log 24 <#__RefHeading__3727_2139160512>`_ `Illustration Index 25 <#__RefHeading__3729_2139160512>`_ .. _Screen-shots: Screen shots ------------ .. _Frontend: Frontend ^^^^^^^^ |img-5| .. _Backend: Backend ^^^^^^^ |img-5| .. _Introduction: Introduction ------------ .. _What-does-it-do: What does it do? ^^^^^^^^^^^^^^^^ This is a tutorial for the extension Browser (extkey: browser). It is an manual how to publish your own data based on a calendar only. The result of the tutorial is - a day' schedule - with a small navigation **Unofficial version!** - The Browser should support all features of the plugin +Browser Calendar from version 4.5 - You can use the day's schedule from version 4.0 only! .. _Further-Information: Further Information ^^^^^^^^^^^^^^^^^^^ .. _This-tutorial-in-PDF-format: This tutorial in PDF format """"""""""""""""""""""""""" You find this tutorial as a PDF file at - doc/manual.pdf - `http://typo3-browser.de/typo3conf/ext/browser\_tut\_cal\_en/doc/manua l.pdf `_ .. _Browser-Manual-and-Browser-Tutorial-Basics: Browser Manual and Browser Tutorial Basics """""""""""""""""""""""""""""""""""""""""" Manual: The Browser has it's own manual (with the reference of course). - HTML `http://typo3.org/documentation/document-library/extension- manuals/browser\_manual\_en/current/ `_ - PDF: `http://typo3.org/extensions/repository/view/browser\_manual\_en/ current/info/?tx\_terfe\_pi1%5BdownloadFile%5D=doc%252Fmanual.pdf `_ Tutorial Basics: A lot of step-by-step introductions. - HTML: `http://typo3.org/documentation/document-library/extension- manuals/browser\_tut\_basics\_en/current/ `_ - `PDF: `_ `http://typo3 .org/extensions/repository/view/browser\_tut\_basics\_en/current/info/ ?tx\_terfe\_pi1%5BdownloadFile%5D=doc%252Fmanual.pdf `_ .. _Forum: Forum """"" |img-6| Illustration 3: The TYPO3-Frontend-Engine Browser Forum The Browser has its own forum (leading language is German). You are welcome to post any question, bug or snippet code in German and Englisch at TYPO3-Frontend-Engine Browser: Forum `http://typo3-browser-forum.de/ `_ .. _Tutorial-Browser-Calendar-I-II: Tutorial +Browser Calendar I/II ------------------------------- .. _What-do-you-need: What do you need? ^^^^^^^^^^^^^^^^^ A database with records with a date time value for the beginning and - optional - with a date time for the end of the item. Items can be appointments, dates, deadlines, events or news and products for example. The Browser extension. .. _Install-a-database-with-events: Install a database with events ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ If you have a database with records with date time values, you can use this database for the tutorial. You may skip this step and go on with the next step. .. _Install-the-Organiser: Install the Organiser """"""""""""""""""""" We take the extension Organiser (org), It has a database for events. We will remove the extension at the end of the tutorial and will clean up your database. TYPO3 backend: - Modul > Admin Tools > Extension Manager > Import Extensions - Look for: Organiser - Install extension but ignore dependencies: - We need the extension Browser only. - We don't need any other extension for this tutorial. - Klick the button [Make updates] |img-5| The Browser and the Organiser will displayed in the extension manager like in the illustration above, if the installation was successful. .. _Page-and-folder: Page and folder ^^^^^^^^^^^^^^^ Add a page and a folder to your website like my\_website (your root page) calendar (page) events (folder) .. _Page: Page """" - Call your page "Calendar". - Enable the visibility - Hide it in menus .. _Folder: Folder """""" - Call your folder "Events" - Set the page type to folder - Enable the visibility - And if you like the calendar icon like in the illustration below - select the tab [Appearance] - select in the field "Contains Plugin" the option [Org: Calendar] The page tree should look like in the illustration below: |img-5| .. _Records: Records """"""" |img-5| Add some records to the event table. Web > List Page tree: folder events (here: id 391) Edit area: click the icon [create new record) click the icon [Calendar] Please add three icons with the date of today and varied times like - Event I - today from 10:00 h to 12:00 h - Event II - today from 11:00 h to 13:00 h - Event III - today from 19:00 h to 23:00 h |img-5| .. _TypoScript: TypoScript """""""""" The Browser plugin needs the static template of the Browser. Than the Browser has to know, which data should displayed in the frontend. Please - Add a TypoScript template to the page "Calendar" - Copy and paste the TypoScript code from below into the "Setup" field of the TypoScript template plugin.tx\_browser\_pi1 { template { extensions { my\_calendar { calendar { name = My Calendar file = fileadmin/my\_calendar.tmpl csvViews = 1 } } } } views { list { 1 = My Calendar 1 { name = My Calendar select ( tx\_org\_cal.title, tx\_org\_cal.datetime, tx\_org\_cal.datetimeend ) orderBy = tx\_org\_cal.datetime DESC } } single { 1 = My Calendar 1 { select ( tx\_org\_cal.title, tx\_org\_cal.datetime, tx\_org\_cal.datetimeend, tx\_org\_cal.bodytext ) } } } } |img-5| Please include the static templates - Browser and - +Browser Calendar |img-5| .. _Intermediate-result: Intermediate result """"""""""""""""""" |img-5| The intermediate result should be look like in the illustration above. .. _Plugin-Browser-Calendar: Plugin +Browser Calendar ^^^^^^^^^^^^^^^^^^^^^^^^ .. _Add-it: Add it! """"""" Please - add the plugin +Browser Calendar to the page "Calendar" - call it [+Browser Calendar] - select the tab [Calendar] and set the "Initial View" to [Day] - save the plugin .. _Check-the-plugin: Check the plugin """""""""""""""" The first tab [Plugin check] of the plugin +Browser Calendar should report, that everything seems to be ok. See the illustration below. |img-5| If it will display any error, please take care of a proper configuration. .. _Get-your-own-HTML-template: Get your own HTML template """""""""""""""""""""""""" .. _Copying: Copying ~~~~~~~ Please copy the default HTML template of the +Browser Calendar to the fileadmin. Copy it on your own way. This would be the command in the console. wwwrun@s15315906:.../typo3> cp typo3conf/ext/browser/pi5/res/default.tmpl \fileadmin/my\_calendar.tmpl If you are using another destination than fileadmin/my\_calendar.tmpl, than you have to change the path in the TypoScript snippet below too. .. _Editing: Editing ~~~~~~~ Replace the strings - "Your filter field" with "###TX\_ORG\_CAL.DATETIME###" - "Your calendar item" with "###TX\_ORG\_CAL.TITLE###" Please don't copy and paste the quotes! .. _Extend-the-Browser-with-Browser-Calendar: Extend the Browser with +Browser Calendar ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. _Extend-it: Extend it! """""""""" Please select the tab [Extend it!] of the Browser plugin. Follow the wizard of the tab. .. _Calendar-1-step-user-interface: Calendar 1. step: user interface ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Please select "Browser Calendar: [+Browser Calendar]". .. _Calendar-2-step-view: Calendar 2. step: view ~~~~~~~~~~~~~~~~~~~~~~ Please select "Browser Calendar View: 1 (My Calendar)". .. _Calendar-3-step-field-date-begin: Calendar 3. step: field date begin ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Please select [tx\_org\_cal.datetime] .. _Calendar-4-step-field-date-end: Calendar 4. step: field date end ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Please select [tx\_org\_cal.datetimeend] See the result in the illustration below. |img-5| .. _Select-the-HTML-template: Select the HTML template """""""""""""""""""""""" Please - select in the tab [Templating] - field "HTML": select [My Calendar (my\_calendar)] - save the plugin .. _Frontend: Frontend ^^^^^^^^ |img-5| .. _Tutorial-Browser-Calendar-II-II: Tutorial +Browser Calendar II/II -------------------------------- .. _Navigation: Navigation ^^^^^^^^^^ The calendars starting point is today 0:00 h by default. If you will visit your website tomorrow, you will get an empty day's schedule, because the example event s of this tutorial will be from yesterday at tomorrow. We need a navigation. In this example we will take the days of the current week. This example is very short. If you like it more detailed, please refer to Browser Tutorial Filter and Search `http://typo3.org/extensions/reposi tory/view/browser\_manual\_en/current/ `_ Look for "More examples" and "Organiser - Filter for a period (data area)" .. _TypoScript: TypoScript """""""""" See the array filter.tx\_org\_cal (red lines): plugin.tx\_browser\_pi1 { ... views { list { 1 { ... orderBy = tx\_org\_cal.datetime DESC filter { tx\_org\_cal { datetime < plugin.tx\_browser\_pi1.displayList.master\_templates.category\_menu datetime { first\_item = 0 area < plugin.tx\_browser\_pi1.displayList.master\_templates.areas.sam ple\_period area { interval { case = day day { url\_stdWrap { strftime > } } } } wrap = \| wrap { item { display\_without\_any\_hit = 1 display\_hits = 0 stdWrap { htmlSpecialChars = 0 crop > } } } order.field = uid } } } } } single { ... .. _Frontend: Frontend """""""" |img-5| The navigation will be the current week by default. .. _Coloured-calendar-items: Coloured calendar items ^^^^^^^^^^^^^^^^^^^^^^^ If you like to use different colours for each calendar item, every calender item has to wrapped with a defined style. We have to extend the TypoScript like in the snippet below. .. _TypoScript: TypoScript """""""""" plugin.tx\_browser\_pi1 { ... views { list { 1 { ... orderBy = tx\_org\_cal.datetime DESC tx\_org\_cal { title = TEXT title { value = ###TX\_ORG\_CAL.TITLE### typolink { parameter = ###SINGLEPID### - "linktosingle invert" "###TX\_ORG\_CAL.TITLE###" additionalParams = &tx\_browser\_pi1[showUid]=###TX\_ORG\_CAL.UID### } wrap (
\|
) } } filter { ... Colours are defined in the array plugin.tx\_browser\_pi1.flexform.pi5.sDEF.colours .. _Frontend: Frontend """""""" |img-5| .. _TypoScript-snippets: TypoScript snippets ^^^^^^^^^^^^^^^^^^^ .. _Get-the-current-day-if-there-isn-t-anything-selected: Get the current day, if there isn't anything selected """"""""""""""""""""""""""""""""""""""""""""""""""""" plugin.tx\_browser\_pi1 { ... views { list { 1 { select ( ... ) andWhere = COA andWhere { 10 = TEXT 10 { if { isFalse { data = GPvar:tx\_browser\_pi1\|tx\_org\_cal.datetime } } value = tx\_org\_cal.datetime >= UNIX\_TIMESTAMP(CONCAT(CURDATE(),' 00:00:00')) noTrimWrap = \| \| \| } } orderBy = tx\_org\_cal.datetime DESC ... .. _Get-a-fixed-day-if-there-isn-t-anything-selected: Get a fixed day, if there isn't anything selected """"""""""""""""""""""""""""""""""""""""""""""""" Get dates, which are beginning after midnight of 13th of June 2011 plugin.tx\_browser\_pi1 { ... views { list { 1 { select ( ... ) andWhere = COA andWhere { 10 = TEXT 10 { if { isFalse { data = GPvar:tx\_browser\_pi1\|tx\_org\_cal.datetime } } value = tx\_org\_cal.datetime >= UNIX\_TIMESTAMP('2011-06-13 00:00:00') noTrimWrap = \| \| \| } } orderBy = tx\_org\_cal.datetime DESC ... filter { tx\_org\_cal { datetime < plugin.tx\_browser\_pi1.displayList.master\_templates.category\_menu datetime { first\_item = 0 area < plugin.tx\_browser\_pi1.displayList.master\_templates.areas.sam ple\_period area { interval { case = day day { url\_stdWrap { strftime > } start\_period { stdWrap { value = 13. June 2011 } } selected\_period { stdWrap { value = 13. June 2011 } } } } } ... .. _Remove-the-Organiser: Remove the Organiser -------------------- .. _Extension-manager: Extension manager ^^^^^^^^^^^^^^^^^ - Disable the extension Organiser - Remove it .. _Install-Tool: Install Tool ^^^^^^^^^^^^ - Compare Database - Remove all Organiser tables .. _Reference: Reference --------- .. _Completely-Browser-Reference: Completely Browser Reference ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - HTML `http://typo3.org/documentation/document-library/extension- manuals/browser/current/ `_ - PDF: `http://typo3.org/extensions/repository/view/browser/current/info /?tx\_terfe\_pi1%5BdownloadFile%5D=doc%252Fmanual.pdf `_ .. _Javascript: Javascript ^^^^^^^^^^ .. ### BEGIN~OF~TABLE ### .. _javascript: javascript """""""""" .. container:: table-row Property javascript Data type array Description :: plugin.tx_browser_pi1 { javascript { jquery { // [STRING] Path to jQuery file = \ http://code.jquery.com/jquery-1.4.2.min.js } ajax { // [STRING] JSS file with ajax methods file = \ EXT:browser/res/js/tx_browser_pi1_ajax.js // [STRING] JSS file with ajax language values fileLL = \ EXT:browser/res/js/\ tx_browser_pi1_ajax_languages.js html { marker { // [STRING / UPPERCASE] Class in \ // CHECKBOX, RADIOBUTTONS, SELECTBOX. ajax_onchange = ONCHANGE } } // [PAGE] page object page = PAGE page { typeNum = 0 config { disableAllHeaderCode = 1 xhtml_cleaning = 0 admPanel = 0 } 10 = CONTENT 10 { table=tt_content select{ // only use current page pidInList = this // only use current language languageField=sys_language_uid andWhere.cObject = COA andWhere.cObject { // choose all Browser plugins... 10 = TEXT 10.value = list_type = 'browser_pi1' // if an UID is provided in the querystring,\ // choose only that plugin 20 = TEXT 20.data = GPvar:tx_browser_pi1|plugin 20.if.isTrue.data = \ GPvar:tx_browser_pi1|plugin 20.outerWrap = AND uid = | } } } } } general { // [STRING] JSS file with general methods file = EXT:browser/res/js/tx_browser_pi1.js } } } Default .. ###### END~OF~TABLE ###### .. _Master-Template: Master Template ^^^^^^^^^^^^^^^ .. ### BEGIN~OF~TABLE ### .. _Unknown-Property: ((Unknown Property)) """""""""""""""""""" .. container:: table-row Property Data type Description Position of the master templates :: plugin.tx_browser_pi1 { displayList { master_templates { ... } } } Default .. _master-templates: master\_templates """"""""""""""""" .. container:: table-row Property master\_templates Data type array-> local Description You can configure the AJAX behaviour for every filter (checkbox, radiobutton and selectbox). See the ajax\_onchange property. Master templates are drafts. The will be copied to the view. They should be configured in the copy only. See the reference in the Browser manual. See section "local". :: master_templates { // Master template for a checkbox checkbox = CHECKBOX checkbox { ... // [Boolean]: 1: If value is changing, AJAX // will reload the form. 0: No auto reload. ajax_onchange = 1 ... } // Master template for radio buttons radiobuttons = RADIOBUTTONS ... // Master template for a selectbox selectbox = SELECTBOX ... } Default .. ###### END~OF~TABLE ###### .. _Helpful-suggestions: Helpful suggestions ------------------- If you have helpful suggestions, feel free to publish any question, bug or code snippet on `http://typo3-browser-forum.de/ `_ Posts are welcome in English and German. .. _Change-Log: Change Log ---------- 3.9.14 **Initial Release** .. _Illustration-Index: Illustration Index ------------------ Illustration 1: The Browser Calendar in the TYPO3 frontend - here: day's schedule 3 Illustration 2: The +Browser Calendar plugin in the TYPO3 backend - here: day's schedule 4 Illustration 3: The TYPO3-Frontend-Engine Browser Forum 5 Illustration 4: Browser and Organiser 6 Illustration 5: Page tree 7 Illustration 6: Adding records to the event table 8 Illustration 7: Three sample event records 8 Illustration 8: Pasted TypoScript code in the field "Setup" 10 Illustration 9: Include static templates Browser and +Browser Calendar 10 Illustration 10: List view in the frontend 11 Illustration 11: the tab [Plugin check] of the plugin +Browser Calendar 11 Illustration 12: tab [Extend it!] of the plugin Browser 13 Illustration 13: The calendar in the frontend 14 Illustration 14: The calendar in the frontend with a small navigation 16 Illustration 15: Coloured calendar items 17 25 .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.png .. :align: left .. |img-2| image:: img-2.png .. :border: 0 .. :height: 21 .. :hspace: 9 .. :id: Grafik2 .. :name: Grafik2 .. :width: 87 .. |img-3| image:: img-3.png .. :border: 0 .. :height: 27 .. :id: graphics25 .. :name: graphics25 .. :width: 30 .. |img-4| image:: img-4.png .. :align: bottom .. :border: 0 .. :height: 268 .. :id: graphics5 .. :name: graphics5 .. :width: 302 .. |img-5| image:: data: :alt: Frame4 .. :align: bottom .. :id: Frame4 .. :name: Frame4 .. |img-6| image:: img-6.jpeg .. :align: left .. :border: 0 .. :height: 161 .. :id: graphics81 .. :name: graphics81 .. :width: 302