{
  "$type": "site.standard.document",
  "bskyPostRef": {
    "cid": "bafyreicwebcypra6uzz4cplgd6dxllau2clff6eolrz7vzpef6zahqttli",
    "uri": "at://did:plc:svkyjirwpd7ts4qgnzoqfcc2/app.bsky.feed.post/3mnhumhprqfb2"
  },
  "coverImage": {
    "$type": "blob",
    "ref": {
      "$link": "bafkreie5fzcqjx5dga6x6stt6w6qqzhgeyl3wwrhuqwvk3g5z6jx2hilby"
    },
    "mimeType": "image/png",
    "size": 62983
  },
  "description": "I saw someone posted this on Bluesky some time ago, unfortunately I didn't note who: If your calendar was a bunch of progressively enhanced checkboxes and a submit button, you could be riding off into the sunset and counting money instead of taking support calls from frustrated octogenarians. And it’s hard for me to shut...",
  "path": "/2025/12/16/outatime/",
  "publishedAt": "2025-12-16T10:28:44.000Z",
  "site": "at://did:plc:svkyjirwpd7ts4qgnzoqfcc2/site.standard.publication/3mhpwfentz6lr",
  "tags": [
    "Plugin"
  ],
  "textContent": "I saw someone posted this on Bluesky some time ago, unfortunately I didn’t note who: If your calendar was a bunch of progressively enhanced checkboxes and a submit button, you could be riding off into the sunset and counting money instead of taking support calls from frustrated octogenarians. And it’s hard for me to shut up about that. This really stuck with me and I think about about it every so often when I encounter various Calendars online and in projects. I’ve found a little time on my hands recently and thought, ‘side project’ (no custom domain this time). There are already tons and tons of Event plugins out there, as well as 3rd party systems for booking. But none of them scratched that itch from that initial quote above. So this would just have to be built from the ground up 😅. As with other projects I’ve started on this blog I wanted to use the GOV.uk design system to style this. They don’t have a calendar design pattern but as this is just ‘progressively enhanced checkboxes’ we don’t need one we can use their checkbox pattern and a simple grid via CSS: display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5rem; Now we’ve all been aware of the ‘Stack Overflow, I’ll build it in a day mate’, and obvs this was no different. End of Day 1: I have a working grid of checkboxes and a submit button. Job done! Narrator voice: But it was not done was it? What happens after we click Select dates? This needs to go somewhere right? So I built some integrations with Gravity Forms and a booking form with some hidden fields. We started to have something tangible. But, as I used this more I realised I would also need, deep breath…. Time of day Selection Range Selection (multiple days) Email confirmation Validation Unavailable days (e.g. Weekdays / Weekends) Available time slots (e.g. 9am – 5pm) Past days not bookable Invalid dates As the project started to get more complex I also realised well whilst we are here might as well build a Calendar display block as well 😅 which meant we would need, bigger deep breath Custom post type (Event) Start and end times Multi-day events Recurring events Day / Week / Month / Year views Jump to today URL Params for bookmarking Styling has event / today Event filtering (via taxonomies) iCal export RSS Yet, more date validation Gulp. Also, better also write some tests for all this as well 😅 😅 😅 BDD via Behat Browser and Accessibility testing via Playwright Okay that all took a bit longer than 1 day. All in all I think I have spent a few of weeks on it, mostly in my spare time. Overall this gave me a real appreciation of building something from scratch and parallels with vibe coding experiments one sees everywhere right now. For example at one point I had an error with navigating to the next month (January 2025), because it was trying to go to 13/26, rather than 01/26. The more you think about a problem the more edge cases you can find, and I wanted more than a proof of concept. This means serious work, planning and testing. Let alone this is likely to need to be reviewed on every WordPress update. But it’s been fun. It allowed me to learn about some new techniques, like DataViews, Behat & Playwright, Date validation, InspectorControls",
  "title": "Outatime",
  "updatedAt": "2026-04-24T15:14:30.000Z"
}