Planning multimonth

Usage example

January 2016
  • T 01
  • W 02
  • T 03
  • F 04
  • S 05
  • S 06
  • M 07
  • T 08
  • W 09
  • T 10
  • F 11
  • S 12
  • S 13
  • M 14
  • T 15
  • W 16
  • T 17
  • F 18
  • S 19
  • S 20
  • M 21
  • T 22
  • W 23
  • T 24
  • F 25
  • S 26
  • S 27
  • M 28
  • T 29
  • W 30
  • T 31
  • Apartment Jena
  • Vacation Rental Rebeka
  • Boat Amelia
  • Villa Formula Indy
  • Vacation Rental Percival
Cornelius Dooley (2+1)
Baby Kutch (8)
Maye Ankunding (3+6)
Jade Nolan (5+1)
February 2016
  • T 01
  • W 02
  • T 03
  • F 04
  • S 05
  • S 06
  • M 07
  • T 08
  • W 09
  • T 10
  • F 11
  • S 12
  • S 13
  • M 14
  • T 15
  • W 16
  • T 17
  • F 18
  • S 19
  • S 20
  • M 21
  • T 22
  • W 23
  • T 24
  • F 25
  • S 26
  • S 27
  • M 28
  • T 29
  • Apartment Jena
  • Vacation Rental Rebeka
  • Boat Amelia
  • Villa Formula Indy
  • Vacation Rental Percival
Baby Kutch (8)
<div class="planning planning-multimonth">
  <div class="planning-month">
    <div class="planning-header planning-header-root">January 2016</div>

    <ul class="planning-header planning-header-columns planning-header-columns-responsive">
      <li>T 01</li> <li>W 02</li> <li class="is-today">T 03</li> <li>F 04</li>
      <li class="is-emphasized">S 05</li> <li class="is-emphasized">S 06</li>
      <li>M 07</li> <li>T 08</li> <li>W 09</li> <li>T 10</li> <li>F 11</li>
      <li class="is-emphasized">S 12</li> <li class="is-emphasized">S 13</li>
      <li>M 14</li> <li>T 15</li> <li>W 16</li> <li>T 17</li> <li>F 18</li>
      <li class="is-emphasized">S 19</li> <li class="is-emphasized">S 20</li>
      <li>M 21</li> <li>T 22</li> <li>W 23</li> <li>T 24</li> <li>F 25</li>
      <li class="is-emphasized">S 26</li> <li class="is-emphasized">S 27</li>
      <li>M 28</li> <li>T 29</li> <li>W 30</li> <li>T 31</li>
    </ul>

    <ul class="planning-header planning-header-rows">
      <li title="Apartment Jena">Apartment Jena</li>
      <li title="Vacation Rental Rebeka">Vacation Rental Rebeka</li>
      <li title="Boat Amelia">Boat Amelia</li>
      <li title="Villa Formula Indy">Villa Formula Indy</li>
      <li title="Vacation Rental Percival">Vacation Rental Percival</li>
    </ul>

    <div class="planning-body">
      <div class="planning-grid planning-grid-responsive" style="height: 150px;">
        <div class="planning-entry is-booked is-cut-left"
             style="top: 0; left: 0; width: 125px"
             title="Cornelius Dooley (2+1)">Cornelius Dooley (2+1)</div>
        <div class="planning-entry is-booked"
             style="top: 0; left: 105px; width: 75px"
             title="Baby Kutch (8)"><i class="fa fa-lock"></i> Baby Kutch (8)</div>
        <div class="planning-entry is-tentative"
             style="top: 30px; left: 35px; width: 180px"
             title="Maye Ankunding (3+6)">Maye Ankunding (3+6)</div>
       <div class="planning-entry is-overdue"
            style="top: 90px; left: 105px; width: 215px"
            title="Jade Nolan (5+1)">Jade Nolan (5+1)</div>
      </div>
    </div>
  </div>

  <div class="planning-month">
    <div class="planning-header planning-header-root">February 2016</div>

    <ul class="planning-header planning-header-columns planning-header-columns-responsive">
      <li>T 01</li> <li>W 02</li> <li class="is-today">T 03</li> <li>F 04</li>
      <li class="is-emphasized">S 05</li> <li class="is-emphasized">S 06</li>
      <li>M 07</li> <li>T 08</li> <li>W 09</li> <li>T 10</li> <li>F 11</li>
      <li class="is-emphasized">S 12</li> <li class="is-emphasized">S 13</li>
      <li>M 14</li> <li>T 15</li> <li>W 16</li> <li>T 17</li> <li>F 18</li>
      <li class="is-emphasized">S 19</li> <li class="is-emphasized">S 20</li>
      <li>M 21</li> <li>T 22</li> <li>W 23</li> <li>T 24</li> <li>F 25</li>
      <li class="is-emphasized">S 26</li> <li class="is-emphasized">S 27</li>
      <li>M 28</li> <li>T 29</li>
    </ul>

    <ul class="planning-header planning-header-rows">
      <li title="Apartment Jena">Apartment Jena</li>
      <li title="Vacation Rental Rebeka">Vacation Rental Rebeka</li>
      <li title="Boat Amelia">Boat Amelia</li>
      <li title="Villa Formula Indy">Villa Formula Indy</li>
      <li title="Vacation Rental Percival">Vacation Rental Percival</li>
    </ul>

    <div class="planning-body">
      <div class="planning-grid planning-grid-responsive" style="height: 150px;">
        <div class="planning-entry is-booked"
             style="top: 60px; left: 105px; width: 180px"
             title="Baby Kutch (8)"><i class="fa fa-lock"></i> Baby Kutch (8)</div>
      </div>
    </div>
  </div>
</div>