Create array of available time slots between two dates

Question

I am weak on front end work and need a little help here.

I am developing a basic form that gives the users available schedule options for booking an appointment during the next 3 days inclusive.

So I have thus far written:

    var today = new Date();

    var lastday = new Date(today);
    lastday.setDate(today.getDate() + 4);

    var daterange = getAllDays(today, lastday);

    function getAllDays(today, lastday)
    {
        var s = new Date(today);
        var e = new Date(lastday);
        var a = [];


        //this gets my start time days
        while (s < e)
        {

            //if day Saturday hours change
            if(s.getDay() == 0)
            {
                //if Sunday skip
            }
            else if (s.getDay() == 6)
            {
                //push start onto array
                a.push(setWorkingHours(s, '10'));

                //push end onto array
                a.push(setWorkingHours(s, '20'));
            }
            else
            {
                //push start onto array
                a.push(setWorkingHours(s, '13'));

                //push end onto array
                a.push(setWorkingHours(s, '20'));
            }


            s = new Date(s.setDate(s.getDate() + 1))

        }

        return a;

    };


    function setWorkingHours(date, hour)
    {
        var dateTime = new Date();
        dateTime.setDate(date.getDate());
        dateTime.setHours(hour, '0', '0');

        return dateTime;
    }


alert(daterange.join('\n'));

Here is a fiddle.

Now this I know could use refinement and I am open to any improvements.

So the above code gets me an array of Days with a start and stop time. Now I'm struggling to figure out how I am going get an array of the hours within each days start and stop time.

Further once I have the hours I have a query to google calendar that returns events so I will then parse that into an array.

Upcoming events: Bob Builder (2015-08-07T10:00:00-08:00) John Doe (2015-08-08T11:00:00-08:00) Mary Jane (2015-08-10T18:00:00-08:00)

Finally I will need to "intersect" the available array with the booked array and return what is left.

As for the appointments themselves. If a person picked a time I would then schedule a two hour block. Appointments can start at the top or bottom of the hour.

Answer 1

I would use something along the lines of the getTimeSlotsForDay function below to get an array of the available start times for a given day.

var GoogleCalenderAppointments = null;
var today = new Date();
var lastDay = new Date(today);
lastDay.setDate(today.getDate() + 4);

function checkGoogleCalendarConflict(date) {
  var hasConflict = false;
  if (!GoogleCalenderAppointments) {
    //logic to get scheduled appointments
  }

  //iterate through relevant scheduled appointments
  //if argument `date` has conflict, return true
  //else, return false

  return hasConflict
}

function getTimeSlotsForDay(date) {
  var timeSlots = []
  var dayStart = new Date(date)
  var dayEnd = new Date(date)

  switch (date.getDay()) {
    case 0: //Sunday
      return timeSlots;
    case 6: //Saturday
      dayStart.setHours(10, 0, 0, 0)
      dayEnd.setHours(20, 0, 0, 0)
      break;
    default:
      dayStart.setHours(13, 0, 0, 0)
      dayEnd.setHours(20, 0, 0, 0)
  }
  do {
    if (!checkGoogleCalendarConflict(dayStart)) {
      timeSlots.push(new Date(dayStart))
    }
    dayStart.setHours(dayStart.getHours(), dayStart.getMinutes() + 30)
  } while (dayStart < dayEnd);

  return timeSlots
}

var message = ""
for (var i = new Date(today); i < lastDay; i.setDate(i.getDate() + 1)) {
  message += i.toDateString() + ":\n"
  message += getTimeSlotsForDay(i).map(function(it) {
    return it.toTimeString();
  }).join(",\n") + "\n";
}
alert(message)

Answer 2

Referring to your array issue make an object of day arrays. Import momentjs. Make a two item array of start and end. Their date object is more full and they have great functions to check out.

Calendar = { 
January-1: [[new Date(), new Date() ],  [new Date(),    new Date() ]] 
} 

For the second part underscorejs is nice. Use _.zip(array, array). (you will need to format the Google array to match your array).