Minimalist Seating Chart Plugin with jQuery - flexiSeats

File Size: 540 KB
Views Total: 9980
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Minimalist Seating Chart Plugin with jQuery - flexiSeats

flexiSeats is an ultra-light jQuery plugin used for generating a simple seating chart from plain HTML checkbox elements.

How to use it:

1. Load the required flexilayout.css stylesheet for primary CSS styles.

<link href="styles/flexilayout.css" rel="stylesheet">

2. Load the Font Awesome 4 for seat icons.

<link rel="stylesheet" href="font-awesome.min.css">

3. Create an legend area to indicate the available, unavailable, booked and selected seats.

<div class="legends">
  <input id="legAvailable" type="checkbox" disabled />
  <label for="legAvailable"> Available</label>
  <input id="legAvailable" type="checkbox" data-status="notavailable" disabled />
  <label for="legAvailable"> Not Available</label>
  <input id="legBooked" type="checkbox" data-status="booked" checked disabled />
  <label for="legBooked"> Booked</label>
  <input id="legBooked" type="checkbox" checked disabled />
  <label for="legBooked"> Selected</label>

4. Create an empty container for the seating chart.

<div id="seats">

5. Load jQuery library and the jQuery flexiSeats plugin at the end of the document.

<script src="//"></script>
<script src="scripts/flexilayout.js"></script>

6. Initialize the plugin and define the initial data.

var seats = $('#seats').flexiSeats({
    rows: 10,
    columns: 20,
    multiple: false,
    notavailable: ['1-2', '4-3'],
    booked: ['2-3']

7. API methods.

var seats = $('#seats').flexiSeats(
    // options here


Change log:


  •   Migrated blocks' CRUD logic with UI


  • Added Init function



  • Provided label for rows and columns.


  • Added selection mode option and enabled multiple selection in reverse order.

This awesome jQuery plugin is developed by pratikgaloria. For more Advanced Usages, please check the demo page or visit the official website.