Display an office space calculator

modx php plugin


SpaceCalc displays an office space calculator. The rooms can be fully customised, allowing users to easily work out the total square feet or metres required.

  Sq Ft per Unit # Units Sq Ft Required
Executive & Office
Manager's Office
Standard Office
Small Office
  Sq Ft per Unit # Units Sq Ft Required
Large Workspace
Standard Workspace
Compact Workspace
  Sq Ft per Unit # Units Sq Ft Required
Corporate Boardroom
Training Room
Large Meeting  Room
Medium Meeting Room
Small Meeting Room
  Sq Ft per Unit # Units Sq Ft Required
Large Reception
Medium Reception
Small Reception
Store / Filing Room
Mail / Copy Room / Hub
Comms Room
  Sq Ft per Unit # Units Sq Ft Required
Small Tea Point
Break Room

Total office space required

Square feet Square metres


The output of SpaceCalc can be customised using the options shown below.

Property Description Default
data Name of chunk containing the JSON data items. spaceCalcData
includeCSS Whether to include the CSS file. 1
includeJS Whether to include the JavaScript file. 1
tplWrapper Name of chunk to wrap around the completed object. spaceCalcWrapperAccordion
tplGroup Name of chunk for each group of items. spaceCalcGroupAccordion
tplRow Name of chunk for each item. spaceCalcRow
tplTotal Name of chunk for the total section. spaceCalcTotal
totalTitle Title of the total section. Total office space required
totalFeet Label of the feet total field. Square feet
totalMetres Label of the metres total field. Square metres
actionPrint Label of the print button/link. Print
headingPerUnit Heading of each group per unit column. Sq Ft per Unit
headingNumberUnits Heading of each group number of units column. # Units
headingTotal Heading of each group total area column. Sq Ft Required

The data

BookmarkThis uses the following data when displaying the office space calculator. Use this as a starting point to add your own office layouts.

Custom data on MODX?

Simply create a new chunk called spaceCalcData and fill it with your own data.

Default data

      "name" : "Cellular offices",
      "image" : "",
      "items" : [
        {"name":"Executive & Office", "size":300, "description":"Appropriate & for a Senior Executive with space for informal seating area plus desk & meeting table"},
        {"name":"Manager's Office", "size":220, "description":"Appropriate for an Executive or Manager with space for a larger desk and a meeting facility"},
        {"name":"Standard Office", "size":150, "description":"Desk, 2 seats for visitors and storage"},
        {"name":"Small Office", "size":120, "description":"Appropriate for staff requiring privacy & 1 to 1 meetings"}
      "name" : "Open plan",
      "image" : "",
      "items" : [
        {"name":"Large Workspace", "size":130, "description":"Includes seating for 2 visitors and storage. Ideal for managers in open plan"},
        {"name":"Standard Workspace", "size":100, "description":"Includes storage - ideal space for sales staff, Admin staff etc"},
        {"name":"Compact Workspace", "size":70, "description":"Appropriate space for clerical, admin staff"}
      "name" : "Meeting rooms & meeting points",
      "image" : "",
      "items" : [
        {"name":"Corporate Boardroom", "size":600, "description":"Seats up to 22 people around a table with additional seating space if required"},
        {"name":"Boardroom", "size":375, "description":"Seats 12 people comfortably with additional seating space if required"},
        {"name":"Training Room", "size":600, "description":"Accomodates 16 people in standard classroom layout"},
        {"name":"Large Meeting  Room", "size":360, "description":"Seats up to 16 people around a table"},
        {"name":"Medium Meeting Room", "size":200, "description":"Seats 8 people around a table"},
        {"name":"Small Meeting Room", "size":120, "description":"Seats 4 people around a table - 4 soft seats around a coffee table"}
      "name" : "Support",
      "image" : "",
      "items" : [
        {"name":"Large Reception", "size":400, "description":"Large reception desk with soft seating for up to 10 visitors"},
        {"name":"Medium Reception", "size":250, "description":"Standard size reception desk with soft seating for up to 4 visitors"},
        {"name":"Small Reception", "size":150, "description":"Meet and Greet - small desk and soft seating for 2 visitors"},
        {"name":"Store / Filing Room", "size":120, "description":"Accomadates files and office supplies"},
        {"name":"Mail / Copy Room / Hub", "size":70, "description":"For photocopier, fax machine, mail centre etc"},
        {"name":"Comms Room", "size":100, "description":"Secure room to house servers, phone & data cabling"}
      "name" : "Staff welfare",
      "image" : "",
      "items" : [
        {"name":"Small Tea Point", "size":60, "description":"Small sink, refrigerator, basic kitchen units - no café tables or seating"},
        {"name":"Kitchen", "size":110, "description":"Sink, refrigerator, microwave oven, kitchen storage - no café tables or chairs"},
        {"name":"Break Room", "size":200, "description":"Larger space incorporating refrigerator, sink, dishwasher, microwave, kitchen units, café tables and chairs to seat 6"}

jQuery plugin

SpaceCalc includes a jQuery plugin that carries out the necessary calculations and allows events to be fired.


The jQuery plugin is automatically included unless includeJS is set to false. You might do this if you prefer to combine your JavaScript files into one.

The SpaceCalc jQuery plugin can be triggered via JavaScript.



The following options can be included in the call.

Name Type Default Description
debug boolean false Run in debug mode for extra logging
eventcalc string input Recalculation occurs when this event is fired
unit string feet The unit used for data entry, either feet or metres
selrow string tr Selector for each data row
selsize string .spacecalc-size Selector for each size field
selquantity string .spacecalc-quantity Selector for each quantity field
seltotal string .spacecalc-total Selector for each total field
selfeet string .spacecalc-feet Selector for the total number of square feet field
selmetres string .spacecalc-metres Selector for the total number of square metres field
onload function   Function to fire once SpaceCalc has loaded
oncalculate function   Function to fire each time SpaceCalc recalculates


Simple call

The default tplRow chunk uses Bootstrap popovers to display the descripion for each item. Use the onload event to initialise these popovers.

$(".spacecalc").spaceCalc({onload : function(opts)

More options

SpaceCalc can be configured using any of the above options.

$(".spacecalc").spaceCalc({ debug : true,
                            unit  : "metres",
                            oncalculate: function(opts)
                              console.log("SpaceCalc has recalculated");


SpaceCalc by mad about brighton is not currently licenced. As such, it is private and cannot be shared without our express permission. Please contact me for more information.