Create simple timetable with gridelements

FlexForm.xml

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<T3DataStructure>
    <meta>
        <langDisable>1</langDisable>
    </meta>
    <sheets>
        <sDEF>
            <ROOT>
                <TCEforms>
                    <sheetTitle>Allgemein</sheetTitle>
                </TCEforms>
                <type>array</type>
                <el type="array">
                    <lessonBegin type="array">
                        <TCEforms type="array">
                            <label>Unterrichtsbeginn</label>
                            <config type="array">
                                <type>input</type>
                                <size>8</size>
                                <max>20</max>
                                <default>0</default>
                                <eval>time</eval>
                            </config>
                        </TCEforms>
                    </lessonBegin>
                    <lessonEnd type="array">
                        <TCEforms type="array">
                            <label>Unterrichtsende</label>
                            <config type="array">
                                <type>input</type>
                                <size>8</size>
                                <max>20</max>
                                <default>0</default>
                                <eval>time</eval>
                            </config>
                        </TCEforms>
                    </lessonEnd>
                </el>
            </ROOT>
        </sDEF>
    </sheets>
</T3DataStructure>

grid_configuration.ts

tt_content.gridelements_pi1.20.10.setup {
  schedule < lib.gridelements.defaultGridSetup
  schedule {
    wrap.stdWrap.cObject = COA
    wrap.stdWrap.cObject {
      5 = TEXT
      5 {
        value = Stunde
        wrap = <div class="day">|</div>
      }

      10 = TEXT
      10 {
        value = Montag
        wrap = <div class="day day-0">|</div>
      }

      20 < .10
      20 {
        value = Dienstag
        wrap = <div class="day day-1">|</div>
      }

      30 < .10
      30 {
        value = Mittwoch
        wrap = <div class="day day-2">|</div>
      }

      40 < .10
      40 {
        value = Donnerstag
        wrap = <div class="day day-3">|</div>
      }

      50 < .10
      50 {
        value = Freitag
        wrap = <div class="day day-4">|</div>
      }

      wrap = <div class="lesson" id="lesson-headline">|</div>
    }
  }

  lessons < lib.gridelements.defaultGridSetup
  lessons {
    cObject = FLUIDTEMPLATE
    cObject {
      file = fileadmin/html/Templates/Lesson.html
    }
  }
}

Gridlayout - Stundenplan

backend_layout {
	colCount = 1
	rowCount = 1
	rows {
		1 {
			columns {
				1 {
					name = Stundenplan
					colPos = 300
					allowed = text,gridelements_pi1
				}
			}
		}
	}
}

Gridlayout - Unterricht

backend_layout {
	colCount = 5
	rowCount = 1
	rows {
		1 {
			columns {
				1 {
					name = Montag
					colPos = 301
					allowed = text
				}
				2 {
					name = Dienstag
					colPos = 302
					allowed = text
				}
				3 {
					name = Mittwoch
					colPos = 303
					allowed = text
				}
				4 {
					name = Donnerstag
					colPos = 304
					allowed = text
				}
				5 {
					name = Freitag
					colPos = 305
					allowed = text
				}
			}
		}
	}
}

Lession.html

{namespace v=FluidTYPO3\Vhs\ViewHelpers}

<div class="lesson">
  <div class="day">
    <f:format.raw><strong>{data.header}</strong><br></f:format.raw>
    <f:if condition="{data.flexform_lessonBegin}">
      <f:format.date format="H:i">{data.flexform_lessonBegin -> v:math.subtract(b: 3600)}</f:format.date>
    </f:if>
    <f:if condition="{data.flexform_lessonEnd}"> 
      - <f:format.date format="H:i">{data.flexform_lessonEnd -> v:math.subtract(b: 3600)}</f:format.date>
    </f:if>
  </div>


  <v:iterator.sort as="lessions" subject="{data.tx_gridelements_view_children}" sortBy="tx_gridelements_columns" order="ASC" sortFlags="SORT_REGULAR">
    <f:for each="{lessions}" as="ge-child" iteration="i">
      <div class="day day-{i.index}">
        <v:content.info contentUid="{ge-child.uid}" as="content">
        
          <f:if condition="{content.header_link}">
            <f:then>
              <f:link.page pageUid="{content.header_link}"><strong>{content.header}</strong></f:link.page>
            </f:then>
            <f:else>
              <strong>{content.header}</strong>
            </f:else>
          </f:if>
          <f:if condition="{content.bodytext}">
            <br>
            <span><f:format.raw>{content.bodytext}</f:format.raw></span>
          </f:if>
        </v:content.info>
      </div>
    </f:for>
  </v:iterator.sort>
</div>

schedule.css

/* schedule lessons */
div.lesson { display:table; width:100%; padding:10px 0; border-bottom:1px solid gray; }
div.day { display:table-cell; width:16.666%; max-width:16.666%; vertical-align:middle; padding:0 0.5%; }
div#lesson-headline > div { font-weight:bold; font-size:16px; }