Open Hours JavaScript plugin

Written by Michael Lee on August 31, 2017

Recently I had to schedule an appointment with my optometrist. On their site, I noticed that they had a list of hours of operation. What stood out to me was that the current day of the week and hours was automatically bolded. I thought that was a simple and yet useful design.

One of my current clients is opening up a restaurant. I thought it would be neat to add this little piece of UI goodness to their upcoming site, but also thought it could be useful for just about any other business. So I spent some time today writing a JavaScript plugin that allows you to define a simple JavaScript object with day and hours of operation and the plugin automatically generates a table and adds it to your DOM.

Open Hours screenshot

It’s written in pure JavaScript so there are no dependencies whatsoever. If you think it’d be useful in a future project of yours, feel free to grab it on GitHub. There’s a couple of more things I’ll probably add to the plugin in the future, so if you’d like to stay in the loop about the plugin, sign up for my newsletter.

Thanks for taking the time to read this article. I'd love to stay in touch and share more tips on programming and design, side projects and working remotely. Sign up and I'll send you my articles straight to your email.

:wave: Hey hey, I'm Michael Lee! I really appreciate you taking the time to read this article.

Be sure to check out my other articles.