How to split time slots into day wise slots using javascript?

Any help will be really appreciated! I'm trying from 4 days but still not found any solution. Please help me. Guide me for library or methods i can use.

Here is the given input. array of session start and end. I want to calculate daily usage period. So i want to split each slot in their own day.

var slots = [
  { start: dayjs('2019-01-01 21:00:00'), end: dayjs('2019-01-01 23:00:00') },
  { start: dayjs('2019-01-01 22:00:00'), end: dayjs('2019-01-02 01:00:00') },
  { start: dayjs('2019-01-01 22:00:00'), end: dayjs('2019-01-02 04:00:00') },
  { start: dayjs('2019-01-01 21:00:00'), end: dayjs('2019-01-02 00:00:00') },
  { start: dayjs('2019-01-02 00:00:00'), end: dayjs('2019-01-02 04:00:00') },
  { start: dayjs('2019-01-02 01:00:00'), end: dayjs('2019-01-02 04:00:00') },
  { start: dayjs('2019-01-31 01:00:00'), end: dayjs('2019-02-01 04:00:00') },
]
var output = []

slots.forEach((slot) => {
  // filter same slots with same day
  if (slot.start.isSame(slot.end, 'day')) {
    output.push(slot)
  } else {
  // what to do here? how to split end time
  }
})
console.log(output)

I need this kind of output

[
  { start: '2019-01-01 21:00:00', end: '2019-01-01 23:00:00' },
  { start: '2019-01-01 22:00:00', end: '2019-01-01 23:59:59' },
  { start: '2019-01-02 00:00:00', end: '2019-01-02 01:00:00' },
  { start: '2019-01-01 22:00:00', end: '2019-01-01 23:59:59' },
  { start: '2019-01-02 00:00:00', end: '2019-01-02 04:00:00' },
  { start: '2019-01-01 21:00:00', end: '2019-01-01 23:59:59' },
  { start: '2019-01-02 00:00:00', end: '2019-01-02 00:00:00' },
  { start: '2019-01-02 00:00:00', end: '2019-01-02 04:00:00' },
  { start: '2019-01-02 01:00:00', end: '2019-01-02 04:00:00' },
  { start: '2019-01-31 01:00:00', end: '2019-01-31 23:59:59' },
  { start: '2019-02-01 00:00:00', end: '2019-02-01 04:00:00' },
]

The idea would be to iteratively split a time slot into two, the first going from the start of the time slot to the end of the day of the start time, and the second going from the start of the next day of the start time (add a day) to the end time.

{ start: dayjs('2019-01-01T22:00:00-00:00'), end: dayjs('2019-01-02T01:00:00-00:00') }

becomes

[
  { start: dayjs('2019-01-01T22:00:00-00:00'), end: dayjs('2019-01-02T23:59:59-00:00') },
  { start: dayjs('2019-01-02T00:00:00-00:00'), end: dayjs('2019-01-02T01:00:00-00:00') }
]

Note, it appears that dayjs uses full DateTime format by default.

Algorithm [Updated with new info about multi-day slots from @asissuthar]

const slotHopper = { ...slot }; // don't mutate original slot
while (!slotHopper.start.isSame(slotHopper.end, "day")) {
  // peel off first day of slot
  const splitSlot = {
    start: slotHopper.start,
    end: dayjs(slotHopper.start).endOf("day")
  };
  acc.push(splitSlot);
  // update start to beginning of next day
  slotHopper.start = dayjs(slotHopper.start)
    .add(1, "day")
    .startOf("day");
}
acc.push(slotHopper);

I extracted the above into a reducer function in the following sandbox example: https://codesandbox.io/s/lp0z5x7zw9, where acc is the accumulation array for the result.

Split a Time Slot Between the Start and End Time Using the Time , The function takes a start time, end time, and time interval as input and gives an array as the output. Function: function SplitTime($StartTime, $EndTime,  Get 100 Free Spins Bonus. 777 Free Slots and Casino Games! The Official Vegas Style Free Slots. Play 777 Free Slots Games. Today Bonus 1,000 Coins

You can do the following using reduce. I don't know dayjs. I'm assuming you're using it only to compare the date part and it's not part of the original array. So, instead I have created a function which gives just the date part for start and end.

const slots = [
  { start: '2019-01-01 21:00:00', end: '2019-01-01 23:00:00' },
  { start: '2019-01-01 22:00:00', end: '2019-01-02 01:00:00' },
  { start: '2019-01-01 22:00:00', end: '2019-01-02 04:00:00' },
  { start: '2019-01-01 21:00:00', end: '2019-01-02 00:00:00' },
  { start: '2019-01-02 00:00:00', end: '2019-01-02 04:00:00' },
  { start: '2019-01-02 01:00:00', end: '2019-01-02 04:00:00' },
  { start: '2019-01-31 01:00:00', end: '2019-02-01 04:00:00' }];
  
const getDay = (date) => date.split(" ")[0];

const newArray = slots.reduce((acc, {start,end}) => {
    if (getDay(start) != getDay(end))
        acc.push({ start, end: `${getDay(start)} 23:59:59` }, 
                 { start: `${getDay(end)} 00:00:00`, end });
    else
        acc.push({ start, end })
    return acc
}, []);

console.log(newArray)

Calculate Free Slot using Date Difference, Simplest way is a single record for each day, remaining data duplicated. Alternative: use the ID and have the work day distribution in a separate table by reference. You can now sort them by date and time (are you beginning to see the to time slots (a room-reservation application in php/javascript w/SQL  How to split time slots into day wise slots using javascript? 0

Finally found solution. it works perfactly. Execute

import dayjs from "dayjs";

const slots = [
  { start: dayjs("2019-01-01 21:00:00"), end: dayjs("2019-01-01 23:00:00") },
  { start: dayjs("2019-01-01 22:00:00"), end: dayjs("2019-01-02 01:00:00") },
  { start: dayjs("2019-01-01 22:00:00"), end: dayjs("2019-01-02 04:00:00") },
  { start: dayjs("2019-01-01 21:00:00"), end: dayjs("2019-01-02 00:00:00") },
  { start: dayjs("2019-01-02 00:00:00"), end: dayjs("2019-01-02 04:00:00") },
  { start: dayjs("2019-01-02 01:00:00"), end: dayjs("2019-01-02 04:00:00") },
  { start: dayjs("2019-01-31 01:00:00"), end: dayjs("2019-02-01 04:00:00") },
  { start: dayjs("2019-02-01 01:00:00"), end: dayjs("2019-02-04 04:00:00") }
];

function splitDayWise(slots) {
  let output = [];

  function pushSlot(slot, start, end) {
    output.push({
      ...slot
    });

    let top = output[output.length - 1];
    top.start = start;
    top.end = end;
    top.time = top.end - top.start;
  }

  slots.forEach(slot => {
    if (slot.start.isSame(slot.end, "day")) {
      pushSlot(slot, slot.start, slot.end);
    } else {
      while (!slot.start.isSame(slot.end, "day")) {
        pushSlot(slot, slot.start, slot.start.endOf("day"));
        slot.start = slot.start.add(1, "day").startOf("day");
      }
      pushSlot(slot, slot.start, slot.end);
    }
  });

  return output;
}

const daywiseSlots = splitDayWise(slots).map(slot => ({
  start: slot.start.format("YYYY-MM-DD HH:mm:ss"),
  end: slot.end.format("YYYY-MM-DD HH:mm:ss"),
  time: slot.time
}));

console.log(JSON.stringify(daywiseSlots, null, 2));

Timescale Customization in JavaScript Schedule control, Checkout and learn about Timescale Customization in JavaScript Schedule control The time slots are usually the time cells that are displayed on the Day, Week slotCount – Decides the number of slot count to be split for the specified time  I have a bunch of DateTimes using slqserver express 2012, and I would like to split and allocate those datetimes into 1-minute slots across the day, noting that there will potentially be more than one day in the data. However, I will first concentrate on only one day of data. For example, if I have the following input data:

Determining available time slots(for scheduling), I'm using http://fullcalendar.io/scheduler/ in combination with a few Laravel Models. With a minimum slot duration of 1 hour I'd end up with available slots at for each day in the calender, much alike finding a free slot on a day. Have a look at dhtmlx.com - their (javascript) based scheduler would do a lot  Additionally, you might need to use JavaScript to generate a report at a certain time every day, or filter through currently open restaurants and establishments. To achieve all of these objectives and more, JavaScript comes with the built in Date object and related methods. This tutorial will go over how to format and use date and time in

HTML5 Doctor Appointment Scheduling (JavaScript/PHP/MySQL , Patients can request an appointment in one of the slots predefined using the administration interface. Tags: appointment javascript mysql calendar scheduler doctor html5 startDate = day; } calendar.events.list = data; calendar.​update(); Each time slot is saved as a separate record in the database ("​appointment" table). Slot machine in Javascript. Start. Learn how to build this. Author: Saurabh Odhyan. Tested in Firefox, Chrome and IE8

Showing Date-Time values on a Chart Axis, You can create charts on a Date / Time axis by setting, Date / Time values to x set JavaScript Date objects to x, then CanvasJS automatically figures out and a stock trend chart for a single day with several trading time-slots, for example,  We extract the minute part of A1 (using MINUTE(A1)) and divide it with 15. We then take only the integer portion of this division and multiply that with 15 again. This gives us the minute portion of lower boundary of our time slot. TIME(HOUR(A1), INT(..)*15, 0) portion: We then create a time value using the TIME formula by using the same hour as A1, minutes from lower boundary calculation using the INT(…)* 15 and 0 as seconds.

Comments
  • Thanks @DrewReese !! Your code will work only for one day gap but if slot have value like { start: dayjs("2019-02-01 01:00:00"), end: dayjs("2019-02-04 04:00:00") } above code will not work properly.
  • You used endOf and startOf functions. That's really very helpful hint for me.
  • Thanks @asissuthar. True, I hadn't thought about existing slots longer than a day, but I only had your sample data to go on. Glad I could help. If my answer was sufficient for you I'd appreciate it being accepted. Thanks.
  • @asissuthar Updated my algorithm to reflect multi-day slots.
  • Thank you @adiga. You nicely created it with vanilla script.