Back to blog

Javascript Snippet for Rendering Timeslots - Calendar

16 February, 2018 | 1 min read

This turned out to be a bit harder than we estimated. I started with a simple function that renders out the 24 hours format in 30 minute slots, and started wondering from there.

This looked something like this:

function renderTimeSlots(){
  '    <div class="time-slot">9:00am</div>\n' +
  '    <div class="time-slot">9:30am</div>\n' +
  '    <div class="time-slot">10:00am</div>\n' +
  '    <div class="time-slot">10:30am</div>\n' +
  '    <div class="time-slot">11:00am</div>\n' +
  '    <div class="time-slot">11:30am</div>\n' +
  '    <div class="time-slot">12:00pm</div>\n' +
  '    <div class="time-slot">12:30pm</div>\n' +
  '    <div class="time-slot">1:00pm</div>\n' +
  '    <div class="time-slot">1:30pm</div>\n' +
  '    <div class="time-slot">2:00pm</div>\n' +
  '    <div class="time-slot">2:30pm</div>\n' +
  '    <div class="time-slot">3:00pm</div>\n' +
  '    <div class="time-slot">3:30pm</div>\n' +
  '    <div class="time-slot">4:00pm</div>\n' +
  '    <div class="time-slot">4:30pm</div>\n' +
  '    <div class="time-slot">5:00pm</div>\n' +
  '    <div class="time-slot">5:30pm</div>\n' +
  '    <div class="time-slot">6:00pm</div>\n' +
  '    <div class="time-slot">6:30pm</div>\n' +
}

Then I started googling with words like : javascript count 24 hours in 30min increments and found this article https://stackoverflow.com/questions/24538345/get-times-in-15-minute-increments-up-to-a-specific-time.

I copied the logic and started working on top of that.