Planning inline

Requires JavaScript planning plugin

For fully functioning planning tables you must use the planning JavaScript plugin.

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
  • Apartment Jena
  • Vacation Rental Rebeka
  • Boat Amelia
  • Villa Formula Indy
  • Vacation Rental Percival
  • 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)
Unavailable
<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>

Planning component sizing

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.

Planning grid sizing

The .planning-grid element requires defined width and height:

Planning entry sizing and positioning

Each planning entry requires defined width and position:

Planning entry variations

Add any of the modifier classes to change the appearance of an entry.

Booked
Unavailable
Tentative
Overdue
<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.

Booked
Booked
<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>

Planning header cell variations

Add any of the modifier classes to change the appearance of an table/row header.

  • F 01
  • S 02
  • S 03
  • M 04
<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>