Skip to main content

Kalender bauen

Benutzt werden die beiden Tags bx:calendarloop und bx:calenderfield

<table class="calendar1">
    <tr class="head">
      <td colspan="7">
        <div class="month">
          <span><a href="./?<bx:calendarfield.month link="prev" object="Kalender"/>" title="einen Monat zurück">&laquo;</a></span>
          <span><bx:calendarfield.month object="Kalender"/></span>
          <span><a href="./?<bx:calendarfield.month link="next" object="Kalender"/>" title="einen Monat vor" >&raquo;</a></span>
        </div>
        <div class="year">
          <span><a href="./?<bx:calendarfield.year link="prev" object="Kalender"/>" title="ein Jahr zurück">&laquo;</a></span>
          <span><bx:calendarfield.year object="Kalender"/></span>
          <span><a href="./?<bx:calendarfield.year link="next" object="Kalender"/>" title="ein Jahr vor">&raquo;</a></span>
        </div>
        <div style="clear:both;"></div>
      </td>
    </tr>
    <tr class="daynames">
      <td>Mo</td>
      <td>Di</td>
      <td>Mi</td>
      <td>Do</td>
      <td>Fr</td>
      <td class="we">Sa</td>
      <td class="we">So</td>
    </tr>
  <bx:calendarloop.Kalender activedayrequest="filter" pool="12549B83FF8" datestart="Startdatum" dateend="Endedatum">
    <bx:calendarfield.if firstweekday><tr class="days"></bx:calendarfield.if>
      <td class="
      <bx:calendarfield.if currentmonth="false">othermonth</bx:calendarfield.if>
      <bx:calendarfield.if weekend>we</bx:calendarfield.if>
      <bx:calendarfield.if mark>marked</bx:calendarfield.if>
      <bx:calendarfield.if today>today</bx:calendarfield.if>">
        <a href="./?filter=<bx:calendarfield.day pattern="dd."/><bx:calendarfield.month pattern="MM."/><bx:calendarfield.year pattern="yyyy"/>"><bx:calendarfield.day pattern="d"/></a>
      </td>
    <bx:calendarfield.if lastweekday></tr></bx:calendarfield.if>
  </bx:calendarloop.Kalender>
  <tr class="footer">
    <td colspan="7">
      <a href="">Heute</a>
    </td>
  </tr>
</table>

zugehöriges CSS

table.calendar1 a{color:#555555;}
table.calendar1 td{width:20px;height:20px;text-align:center;}
table.calendar1 .head td{background-color:#FFB689;}
table.calendar1 .head .month{float:left;padding-left:5px;}
table.calendar1 .head .year{float:right;padding-right:5px;}
table.calendar1 .daynames td{background-color:#aaaaaa;}
table.calendar1 .daynames .we{color:#962420;font-weight:bold;}
table.calendar1 .days td{background-color:#cccccc;}
table.calendar1 .days td.marked{background-color:#FBD9CA;}
table.calendar1 .days td.today{outline:1px solid red;}
table.calendar1 .days td.active{outline:1px solid green;}
table.calendar1 .days td.othermonth{background-color:#eeeeee;}
table.calendar1 .days td.othermonth a{color:#ffffff !important;}
table.calendar1 .days td.we a{color:#962420;font-weight:bold;}
table.calendar1 .footer td{background-color:#FFB689;}
Back to top