Custom Angular Scheduling event module

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 for ad. - 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" }, { "day": 1, "slot": 0, "start_time": "00:00", "end_time": "23:59" } ] 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 : [login to view URL] [login to view URL] [login to view URL] - 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.