-1

I'm setting up a timetable project for school management. I wanted to get the start time and end time of the day by a school admin for which I'm using a modal dialog.enter image description here The above image holds only static period times for 9 different periods with equal interval of time. enter image description hereThe above is the modal which i'm using to get the desired times for each factors in the timetable period duration.

Say there are 9 periods in a day, I wanted the time to be broken down into 9 slots based on the user's start and end time of the day and along with the user's period duration.

I haven't tried any code as i didn't get a clear idea of how i'm gonna do that. I have added some screenshots though.

Periods needs to be calculated based on the user's period duration, When 9 periods are allotted for the day, it should automatically be broken down in to 9 different time slots.

krishie
  • 59
  • 8

1 Answers1

0

Use below given code to divide given time range in 9 equal parts:

    let arr = [];
    let dt1 = new Date().setHours(9, 45, 0); // this would be given by user as input
    let dt2 = new Date().setHours(16, 30, 0);// this would be given by user as input
    const interval = (dt2-dt1)/9;
    for (let i=0; i<9; i++) {
        const period = {
            start: new Date(dt1+(i*interval)),
            end: new Date(dt1+((i+1)*interval))
        }
        arr.push(period);
     }

You can loop through array and get the start end time of each slot:

arr.forEach((slot, index) => {
    // index 0 will be first slot and last index will be last one
    console.log(`Slot start: ${slot.start}`);
    console.log(`Slot end: ${slot.end}`);
})
user
  • 568
  • 5
  • 19
  • Okay but how do we display the broken times in the right slot ? Please check my image where i've given static time intervals. – krishie Aug 09 '19 at 10:08
  • The array will contain all the slots in ascending order. First array item will be first slot, then second and so on. – user Aug 09 '19 at 10:22
  • Can you please create a stackblitz for me ? – krishie Aug 09 '19 at 10:23
  • Thanks for the brilliant answer. Is there a way to get time dynamically with a timepicker instead of setting the time by default – krishie Aug 09 '19 at 12:20
  • Here's the edited stackblitz https://stackblitz.com/edit/material-time-picker?embed=1 – krishie Aug 09 '19 at 12:30