Create a week and day viewable appointment viewing calendar form this array

Question

I'm creating a weekly-view appointment calendar. The calendar must show each appointment on it's allocated day and in its allocated time slot in a scroll-able weekly view. This calendar only needs to go back and forward 50 days max. Here is an image of my markup so far.

I know that the time-slots will have to change and be dynamically added but for the purpose of the results I'm looking for, I added the them here.

I thought to do the following:

1. create an array of the actual dates from 50 days ago until 50 days in the future.
2. then loop through the array and find a match of the date in the appointments array. If no appointment is found, create an empty block, else create a block with the appointments in it.
3. The appointments will fit into their own time slots within the block and in order asc.

Here is the array of appointment time slots example :

[{
  "JobId": 83259,
  "JobDate": "2023-03-14",
  "StartTime": "2023-03-14 08:11:58.000"
}, {
  "JobId": 83297,
  "JobDate": "2023-03-12",
  "StartTime": "2023-03-12 11:35:00.000"
}, {
  "JobId": 83307,
  "JobDate": "2023-03-13",
  "StartTime": "2023-03-13 07:29:07.000"
}, {
  "JobId": 83308,
  "JobDate": "2023-03-13",
  "StartTime": "2023-03-13 07:29:51.000"
}]