{"id":18300430,"url":"https://github.com/jpdevries/availability-grid","last_synced_at":"2026-01-21T01:33:10.090Z","repository":{"id":140004873,"uuid":"60883898","full_name":"jpdevries/availability-grid","owner":"jpdevries","description":"An accessible HTML Component for accepting weekly availability.","archived":false,"fork":false,"pushed_at":"2016-06-30T09:47:45.000Z","size":58,"stargazers_count":1,"open_issues_count":3,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-09T09:37:45.040Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jpdevries.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-06-11T00:20:23.000Z","updated_at":"2016-06-22T13:48:43.000Z","dependencies_parsed_at":"2023-05-01T03:49:14.621Z","dependency_job_id":null,"html_url":"https://github.com/jpdevries/availability-grid","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jpdevries/availability-grid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpdevries%2Favailability-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpdevries%2Favailability-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpdevries%2Favailability-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpdevries%2Favailability-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jpdevries","download_url":"https://codeload.github.com/jpdevries/availability-grid/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpdevries%2Favailability-grid/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28621672,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-20T23:49:58.628Z","status":"ssl_error","status_checked_at":"2026-01-20T23:47:29.996Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-05T15:12:27.586Z","updated_at":"2026-01-21T01:33:10.074Z","avatar_url":"https://github.com/jpdevries.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"## HTML\u0026ndash;first\n`AvailabilityGrid` is progressively enhanced from a semantic HTML `\u003cform\u003e` made up of a `\u003ctable\u003e` of\u0026nbsp;`\u003cinput type=\"checkbox\u003e\"`.\n\n`AvailabilityGrid` will listen to your grid of inputs and provide functionality to select them in ranges, inverse the selection, navigating the grid with arrow keys, as well as asynchronous considerations for VoiceOver screen reader support.\n\n### Demo\n[Try the demo](http://jpdevries.github.io/availability-grid/).\n\n![](http://j4p.us/093I2y0R322A/hero.gif)\n\n_Note: The interfaces for Military Time, Week Starts On, and Inverse Selection options are provided by and part of the demo but are not directly part of the VanillaJS Driver. The VanillaJS Driver is meant to be very light and does little other than assign keyboard and input listeners and handle selection and toggle of inputs._\n\n## Usage\n`AvailabilityGrid` is packaged by Webpack as a UMD JavaScript module and can be universally used as such.\n\n### Universal Module Definition\n#### `require()`\n```js\nvar AvailabilityGrid = require('availability-grid').AvailabilityGrid;\n\ndocument.addEventListener('DOMContentLoaded', function() {\n    var grid = new AvailabilityGrid();\n});\n\n```\n\n_Note:If you aren't using a module loading system you can still using `AvailabilityGrid` via a `AvailabilityGrid` global variable exposed by the UMD loader._\n\n#### `global`\n```html\n\u003cscript defer src=\"./assets/js/availability-grid.js\"\u003e\u003c/script\u003e\n\u003cscript defer\u003e\n  document.addEventListener('DOMContentLoaded',function(){\n    var grid = new AvailabilityGrid();\n  });\n\u003c/script\u003e\n```\n\n### Methods\nWhen a new `AvailabilityGrid` is created the instance automatically initializes itself. `AvailabilityGrid` instances can be destroyed via `.destroy()` and re-awoken from the dead with\u0026nbsp;`.init()`.\n\n```js\ngrid.destroy(); // remove listeners\n// mutate the DOM or whatever...\ngrid.init(); // re-add listeners\n```\n\nWhen calling `.init()` you may pass in a fresh set of options.\n\n```js\ngrid.init({\n  element:document.getElementById('new-grid')\n});\n```\n\nCalling `.destroy()` will remove all listeners and references to `element` but options like `inputSelector` will persist and do not need to be reset when reawakening an instance by later calling\u0026nbsp;`.init()`.\n\n_Note: As AvailabilityGrid instances `.destroy()` themselves they look for an `id` on `element`. If found, `element` will be set to the string `id` so as to remove references to that element while still being able to query the DOM for it if `.init()` is later called without passing in an\u0026nbsp;element._\n\nThe current selection can be inverted using the `.inverse()`\u0026nbsp;method.\n\n```js\nvar grid = new AvailabilityGrid();\ngrid.inverse(); // inverse the selection\n```\n\n### Options\n| key | default | description |\n| ---- | ---- | ---- |\n| `element` | `'availability-grid'` | The HTML Element or `id` of the HTML element |\n| `inputSelector` | `'input[type=\"checkbox\"]'` | Selector used when querying DOM for checkbox inputs |\n| `whenTextSelector` | `'span.a11y-hidden'` | Selector used when querying DOM to change hidden text for screen readers |\n\n## Weigh\u0026ndash;In\n| Type           | Un\u0026ndash;minified (kB) | Minified (kB) | GZIP (kB)\n| ------------- | ------------- | --- | --- |\n| CSS  | 7.14  | 6.01  | 0.846  |\n| JavaScript  | 12.32  | 5.77  | 1.96  |\n\n## Screencasts\n\n - [AvailabilityGrid VoiceOver Preview](https://vimeo.com/170844798)\n - [AvailabilityGrid Demo + Shift Selection](https://vimeo.com/170857351)\n\n## HTML Architecture\nSee [the Wiki](https://github.com/jpdevries/availability-grid/wiki/HTML-Architecture).\n\n## Keyboard Accessibility\nIn addition to the inherent keyboard accessibility that comes with the ability to tab through a table of `\u003cinput type=\"checkbox\"\u003e` elements and use space bar to check or un\u0026ndash;check them, AvailabilityGrid adds the following keyboard\u0026nbsp;considerations:\n- Arrow Keys\n\n### Arrow Keys\nWhile focused on a cell, the up, right, down, and left arrow keys can be used to shift focus to a neighboring\u0026nbsp;cell.\n\n![](http://j4p.us/3N3M38273H1F/arrow-key.gif)\n\n## Usability Considerations\nThe main usability consideration currently made\u0026nbsp;is:\n\n- range selection\n- inverse selection\n- VoiceOver usage\n\n### Range Selection\nThe Shift key can be used to select ranges of inputs. When focused on a cell, hold Shift while clicking another to toggle a range of time\u0026nbsp;slots.\n\n![](http://j4p.us/3h0f071i2F04/shift-selection.gif)\n\n### Inverse Selection\n`AvailabilityGrid` exposes a `.inverse()` method that inverts the checked property of each option. This user consideration can be used as a shortcut to make particular selections.\n\n![](http://j4p.us/0i3l3S3F3I1B/inverse-selection.gif)\n\n### VoiceOver Usage\nAccessibly hidden text is used to make screen readers read aloud a question like \"Are you available Mondays at 9am?\" or a statement like \"You are available Mondays at 9am.\"\u0026nbsp;accordingly. It will also read aloud keyboard shorcuts and\u0026nbsp;tips.\n\n![](http://j4p.us/0N2J0K0S1202/Screen%20Shot%202016-06-15%20at%204.14.30%20PM.png)\n\nSee the [VoiceOver Screencast](https://vimeo.com/170844798).\n\n## Styles\nThe default styles for `AvailabilityGrid` consist of [some simple\u0026nbsp;Sass](https://github.com/jpdevries/availability-grid/blob/master/_build/scss/main.scss).\n\n```html\n\u003clink rel=\"stylesheet\" href=\"./assets/css/availability-grid.css\"\u003e\n```\n\nYou can include the default styles and/or override them with your\u0026nbsp;own.\n\n## Techniques\nSee [the Wiki](https://github.com/jpdevries/availability-grid/wiki/Techniques).\n\n## Contribution Guidelines\nTrying to follow the guidelines at [frend/frend.co](https://github.com/frend/frend.co#javascript). However, support for multiple \"JS Drivers\" is on the roadmap. The same style guide for the VanillaJS driver would not necessarily apply to a React or Angular driver. To suggest a feature or report a bug feel free to [open an\u0026nbsp;issue](https://github.com/jpdevries/availability-grid/issues/new).\n\n## Accessibility Proclaimer\nThis component strives for WCAG 2.0 Guidelines Level AA. Please [open an issue](https://github.com/jpdevries/availability-grid/issues/new) for any accessibility issue, feedback, or\u0026nbsp;concern.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjpdevries%2Favailability-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjpdevries%2Favailability-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjpdevries%2Favailability-grid/lists"}