Planning multimonth
Usage example
- 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
Cornelius Dooley (2+1)
Baby Kutch (8)
Maye Ankunding (3+6)
Jade Nolan (5+1)
- 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
<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>