Today I came across a TYPO3 requirement from one of our customers that they need a simple list of events and single view of each event. Additionally they wanted to have a drop-down box showing all event categories and the event list should be filtered with the selected category on change of the drop-down.

I was knowing that the "cal" extension is good extension to work with events in TYPO3. "cal" has list and single event view out of the box but there was no marker available for the list view for category selection. I googled to seek a solution but nothing was found quickly. So I decided to write a quick TypoScript object which simply queries the category table and makes a <select> construct. It took 10 minutes for me to develop the TS and I have it running now. So I thought to share this with everybody. 

The following TS object can be put on any page with plugin "tscobj" and it will show you the drop-down with the cal categories. Only thing you have to change is the pid of the event listing page and pid of the events sysfolder.

# object to render cal categories as a dropdown
lib.eventcategories = COA
lib.eventcategories {
  # the all/alle option
  10 = TEXT
  10 {
    # pid of the event list page
    typolink.parameter = 131
    typolink.returnLast = url
    wrap = <option value="|">Alle</option>
  }
  # render all categories as <option></option>
  20 = CONTENT
  20 {
    table = tx_cal_category
    # pid of the event storage sysfolder
    select.pidInList = 132
    renderObj = COA
    renderObj {
      # this object is rendered only if the tx_cal_controller[category] does not equal
      # to category uid in record set
      10 = TEXT
      10 {
        # pid of the event list page
        typolink.parameter = 131
        typolink.additionalParams.dataWrap = &tx_cal_controller[category]={field:uid}
        typolink.useCacheHash = 1
        typolink.returnLast = url
        dataWrap = <option value="|">{field:title}</option>
        if.value.data = GPvar:tx_cal_controller|category
        if.equals.field = uid
        if.negate = 1
      }
      # this object is rendered only if the tx_cal_controller[category] equal to
      # category uid in record set. so it makes the option selected!
      20 < .10
      20 {
        dataWrap = <option value="|" selected="selected">{field:title}</option>
        if.negate >
      }
    }
  }
  # wrapping all options in a select and JS to make redirect onChange!
  wrap = <select onChange="javascript: window.location=this.options[this.selectedIndex].value;">|</select>
}
# this condition hides the category dropdown on single event page!
[globalString = GP:tx_cal_controller|view = event]

lib.eventcategories >

[global]