0

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.

enter image description 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"
}]
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Tony
  • 43
  • 6
  • Your 3 points seem to make the most logical sense. Do you have a specific code issue regarding the solution you're trying to implement? – Rory McCrossan Mar 21 '23 at 09:42
  • Hi, I thought there might be a better way, but I'm quite happy to continue on this approach. Issues im having then is to get the calendar dates for 50 days into the past and 50 days into the future from today. I can get the date on the two dates, but the actual calendar dates im struggling with. Do you knwo how i can get these dates into an array? – Tony Mar 21 '23 at 15:56

0 Answers0