Browser Tutorial Calendar (en)¶

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¶

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¶

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/

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]

The Browser and the Organiser will displayed in the extension manager like in the illustration above, if the installation was successful.

Page¶

• Call your page "Calendar".
• Enable the visibility
• Hide it in menus

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:

Records¶

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

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

)

}

}

}

}

Please include the static templates

• Browser and
• +Browser Calendar

Intermediate result¶

The intermediate result should be look like in the illustration above.

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¶

The first tab [Plugin check] of the plugin +Browser Calendar should report, that everything seems to be ok. See the illustration below.

If it will display any error, please take care of a proper configuration.

Get your own HTML template¶

Extend it!¶

Please select the tab [Extend it!] of the Browser plugin. Follow the wizard of the tab.

Select the HTML template¶

Please

• select in the tab [Templating]
• field "HTML": select [My Calendar (my_calendar)]
• save the plugin

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 = <span class="category_menu">|</span>

wrap {

item {

display_without_any_hit = 1

display_hits = 0

stdWrap {

htmlSpecialChars = 0

crop >

}

}

}

order.field = uid

}

}

}

}

}

single {

...

Frontend¶

The navigation will be the current week by default.

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 (

<div style="background:###CAL_COLOUR###;float:left;padding:0 .2em;">

|

</div>

)

}

}

filter {

...

Colours are defined in the array

plugin.tx_browser_pi1.flexform.pi5.sDEF.colours

Frontend¶

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 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

}

}

}

}

}

...

javascript¶

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
    }
  }
}

((Unknown Property))¶

plugin.tx_browser_pi1 {
  displayList {
    master_templates {
      ...
    }
  }
}

master_templates¶

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
  ...
}