For fully functioning planning tables you must use the planning JavaScript plugin.
<div class="planning planning-inline">
<div class="planning-header planning-header-root"></div>
<ul class="planning-header planning-header-columns">
<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>
</ul>
<ul class="planning-header planning-header-rows" style="height: 200px;">
<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>
<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" style="height: 200px;">
<div class="planning-grid" style="width: 700px; height: 300px;">
<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 class="planning-entry is-unavailable"
style="top: 150px; left: 0px; width: 285px"
title="Unavailable">Unavailable</div>
</div>
</div>
</div>
The whole planning table uses full available width. When the available width is smaller than the table size the grid becomes horizontally scrollable.
The table expands its size vertically with the content. If you want to limit the
height of the table and make it vertically scrollable set the chosen height to
.planning-header-rows
and .planning-body
elements.
The .planning-grid
element requires defined width and height:
$planning-grid-width
* [number of columns]$planning-grid-height
* [number of rows]Each planning entry requires defined width and position:
$planning-grid-width
+ [number of half cells] * ($planning-grid-width
- $planning-entry-offset
)$planning-grid-height
* [row offset]$planning-grid-width
* [column offset]Add any of the modifier classes to change the appearance of an entry.
<div class="planning-entry is-booked" style="width: 110px">Booked</div>
<div class="planning-entry is-unavailable" style="width: 110px">Unavailable</div>
<div class="planning-entry is-tentative" style="width: 110px">Tentative</div>
<div class="planning-entry is-overdue" style="width: 110px">Overdue</div>
For entries extending out of the table range use .is-cut-left
or .is-cut-right
classes.
The positioning of cut entries is the same as normal entries, but the width has to be adjusted.
<div class="planning-entry is-booked is-cut-left" style="width: 125px">Booked</div>
<div class="planning-entry is-booked is-cut-right" style="width: 125px">Booked</div>
Add any of the modifier classes to change the appearance of an table/row header.
<ul class="planning-header planning-header-columns">
<li>F 01</li>
<li class="is-current">S 02</li>
<li class="is-emphasized">S 03</li>
<li class="is-hovered">M 04</li>
</ul>