Custom Angular Scheduling event module -- 2

We are an ad tech company. we have a UI which is written in angular 10~ .

- Our portal is exposed to customer where they can create campaigns.
- As part of campaign targeting params we accept date as when the campaign should run also the time slots of the week.
- There are advance options, where customer can choose to run campaigns for few days of the week and select the active hours.
- Attaching the screen where the week and time selector is present.
- In after selection of this, to backend following is fired to save the campaign meta.


"targeted_schedule": [
{
"day": 0,
"slot": 0,
"start_time": "01:05",
"end_time": "13:05"
},
{
"day": 0,
"slot": 1,
"start_time": "15:10",
"end_time": "17:24"
},
]

Over here we have 2 slots for Sunday 01:05-13:05 and 15:10-17:24 and for Monday we have 1 slot which runs for the whole day 00:00-23:59


- We need this specific module to replaced with angular edit dialog or Scheduling Widgets.
Reference :
https://doc.daypilot.org/scheduler/angular/
https://demos.daypilot.org/angular2-scheduler-edit-dialog/
https://demos.daypilot.org/angular-scheduler-undo-redo/

- Using the above widget or custom widget we need following to be shown while creation and while updating the campaign.

- Please have a look at attachment files, we have attached the current implementation and expected implementation.