Home
The planboard project creates (inside an empty <div>) a grid for managing date-bound planning information. To support this it creates always visible row and column-headings around the grid, visualizes important periods, supports different styles for different allocation types. On top of this it creates a mouse and keyboard-supporting interaction to create new selections on the board.
The original use case for this planboard is allocating rooms or other types of accommodation in a hotel, camping or holiday resort, but it was designed so it can be used for other types of planning or allocation issues as well.
The board visualisation uses standard HTML and CSS, part of it generated by javascript. Ajax requests are used to gather actual data to be displayed. You will need a recent and decent browser to get it working (no HTML5 specific features used)
This projects borrows from the jquery family of projects. Next to some basic jquery and jqueryUI it makes use of a jquery-based scrollbar solution too. Integrating it in your project requires you to link up those sources too.
Here is what a basic planboard looks like:
The rows on the planboard represent the resources you want to allocate. They get loaded from the uri you specify. Through configuration you indicate which properties of your resource-objects map onto label and id to be used internally.
The columns show time with a day granularity and grouped into months based on the classic Western Gregorian calender. Changing this is currently not foreseen, just fork away I'ld say :)
On top of the classic day/month indication there is a mechanism to highlight certain 'period's as being of high importance or use. This domain-specific data will need to be loaded through a similar Ajax call that loads the rows.
The weekends are already highlighted by default.
The body of the grid just shows the rows zebra-striped and mixes in the column colours borrowed from month, weekend and/or period they are in.
While hovering the cells the matching row and column headings will light up: marking where your pointer currently is.
Superposed on the cells the various allocations are shown. Again, this shows the data of your application, it should be loaded through Ajax and configured properly.
Horizontal resizing of the grid happens automatically based on the available width.
You can pan around in the grid using the arrow-keys or the scroll-bars.
As you do this the headers of both rows and columns stay visible and synchronously scroll along in the associated direction.
Clicking any of the available allocations will produce an event that can be customized to show the details of the clicked allocation.
Interaction with the board will allow you to create a new allocation. The board supports both mouse and keyboard usage in a number of different ways.
The current state of the selection (which row, number of days, start and end) is also echoed on the status-bar below the board.
- clicking a cell on the board
This will mark a boundary of your selection. A follow-up click in the same row will mark the other boundary and thus complete selection. To indicate which side is the boundary being kept in this follow-up logic a small marker is added to that side. Clicking on a different row will automatically reset this behaviour.
- clicking a date header
This will change the selection-date-range using the same boundary-adaptation logic as mentioned above. Since these click bears no row information the selection will not change rows.
- clicking a row header
Likewise a click on a row-header will simply change the row the selection is linked to, the date boundaries are kept.
- clicking a period header
This will apply the date-range of the selected period as the selection range.
- typing a number: 0-9
This will keep the start-date of the selection and apply the provided number to calculate the end-date.
When typing a multi-digit number you should have less then 1s between pressing the different keys to combine the single keyed digits into one number.
- typing the increment-decrement keys: += or -_
This will increment (+=) or decrement (-_) the current size of the selection by one unit (day).
The variants to + and - are chosen to avoid the need for pressing shift on certain keyboard layouts.
- typing the shift keys: <, or >.
This will shift the selection to the left (<,) or to the right (>.) by one unit (day).
The variants to < and > are chosen to avoid the need for pressing shift on certain keyboard layouts.
- typing the cancel keys: ESC or DEL
This will clear the current selection and reset the blank state of the board.
Next to the above there are some additional tools present:
The buttons marked << and >> on the left and the right of the date-header allow to extend the current visible date-range to the past, respectively the future.
Alternatively, by clicking the calendar button one can just pick a random date the board should visualize.
Using this component in your own projects will typically require you to understand the: