Appointment booking system in WordPress

Question

I have to make an appointment booking system with WordPress, I have a custom post type "appointments" with various various custom fields like : Name, email, date, time, office, service...

Through a frontend form, the user can fill in these fields by selecting what interests him, after filling in all the data is saved and I can look at it from the "appointments" custom post type.

So far so good, my problem is that at the moment the form takes the available dates from a JSON file without a source and currently filled in manually for test(quite useless like that), since I've never done it I would like to understand if it can be done automatically write the available dates and times in the file, deriving them from those already booked and above all if it is the best solution or can it be done in a simpler way? Not have much experience with this

it will certainly be a little more complicated because the appointment is made based on the office and not just the month, so there will be different appointments for each office

The next step will be to add the automatic sending of an email both to the office and to the user, but one step at a time, the rest must work first.

the alternative would surely be a plug-in but I don't know which one! why do I have to use that template, do you know any plugin that allows you to rewrite the template of the form to make appointments?

this is the part of the form that concerns the date of the appointment

<?php
    $offices = get_posts(array(
        'posts_per_page' => -1,
        'post_type' => 'offices'
    ));

    $months = array();
    $currentMonth = intval(date('m'));

    for ($i=0; $i < 12; $i++) {
        array_push($months, $currentMonth);
        if($currentMonth >= 12) $currentMonth = 0;
        $currentMonth++;
    }
?>
<div class="card-header ">
                    <div class="d-flex">
                        <h2 class="title-xxlarge ">Offices*</h2>
                    </div>
                    <p class="subtitle-small ">
                        choose the office
                    </p>
                </div>
                <div class="card-body ">
                    <div class="select-wrapper p-0 select-partials">
                        <label for="office-choice" class="visually-hidden">
                            type of the office
                        </label>
                        <select id="office-choice" class="">
                            <option selected="selected" value="">
                                select option
                            </option>
                            <?php foreach ($offices as $o_id) {
                                $office = get_post($o_id);
                                echo '<option value="'.$office->ID.'">'.$office->post_title.'</option>';
                            } ?>
                        </select>
                    </div>
                    <fieldset id="place-cards-wrapper"></fieldset>
                </div>




<div class="card-header ">
                    <div class="d-flex">
                    <h2 class="title-xxlarge ">
                        Free appointment*
                    </h2>
                    </div>
                </div>
                <div class="card-body ">
                    <div class="select-wrapper select-partials">
                        <label for="appointment" class="visually-hidden">
                            Select month
                        </label>
                        <select id="appointment" class="">
                            <option selected="selected" value="">
                                select month
                            </option>
                            <?php foreach ($months as $month) {
                                echo '<option value="'.$month.'">'.date_i18n('F', mktime(0, 0, 0, $month, 10)).'</option>';
                            } ?>
                        </select>
                    </div>
                    <div class="cmp-card-radio-list ">
                        <div class="card ">
                            <div class="card-body ">
                                <div class="form-check " >
                                    <fieldset id="radio-appointment">
                                        nothing appointment free.
                                    </fieldset>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

this is the json where it gets the free time slots, 1, 2.... correspond to the month

{
  "1" : [
    {
      "startDate": "2023-01-20T09:00",
      "endDate": "2023-01-20T09:45"
    },
    {
      "startDate": "2023-01-20T09:45",
      "endDate": "2023-01-20T10:30"
    },
    {
      "startDate": "2023-01-21T09:00",
      "endDate": "2023-01-21T09:45"
    }
  ],
  "2" : [
    {
      "startDate": "2023-02-09T09:00",
      "endDate": "2023-02-09T09:45"
    },
    {
      "startDate": "2023-02-09T09:45",
      "endDate": "2023-02-09T10:30"
    },
    {
      "startDate": "2023-02-11T09:00",
      "endDate": "2023-02-11T09:45"
    }
  ],
}

instead the custom post type has the start date and end date fields. how can i proceed?