Inspired by Elaine Lohroff's recipe for "Add a calculator for length of event".

Need a quick way to calculate how long an event runs without pulling out a calculator? This recipe adds a simple time duration calculator. It’s a lightweight HTML/JS file that you can drop onto an event occurrence page (or really anywhere) in the pre-html or its own html bock. Users pick a start date/time and an end date/time, and will instantly get the duration in hours and minutes. If they try to get clever and enter an end time before the start, they’ll get a playful reminder to use the future unless they’re a time traveler.

How to Add

1. Go to the page where you’d like the calculator to appear (for example: Event Occurrence Detail).
2. Add a new HTML Content block or slap it in the pre-html
3. Paste in the code from the file.
4. Save the block and refresh the page and you’ll see a collapsible panel labeled Calculate Time Duration.

Features

• Clean accordion.
• Works on both desktop and mobile
• Displays the result live as you set values.

This is meant to be a simple utility that blends into your theme. It doesn’t store anything or require configuration, just drop it in and it’s ready.