A PHP MODX Revolution extra to generate an office space calculator

Last modified: 18/05/2016 - 3 years, 4 months ago

Requirements: MODX Revolution 2.2+ | PHP5+

Download: Contact me

A project tagged as: modx, php, plugin

Twitter Facebook Reddit


SpaceCalc displays an office space calculator, showing the total square feet and square metres required.


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


By default, SpaceCalc uses a Bootstrap theme and is dispalyed in an accordian style.

  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 data chunk

The office spaces displayed can be customised by creating your own data chunk. This means you can set your own groups, names sizes and descriptions.

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

Default data

By default, SpaceCalc will display all the office spaces from its default data chunk.

      "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 calculatons 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.



Options are passed directly in the call as options.

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.