How to set available dates in a input type date

Hi everyone :slight_smile: ,
I’m working in a webapp for a barbershop that want manage the appointments.

I’m trying to set available dates in an input of type date in my live view component for schedule an appointment, i was reading about alpinejs and flatpickr but maybe there exists another way of doing it with live view and elixir,

A day can have several appointments, each day has an availability schedule from 11 am to 7 pm and I want that when a user selects a date and time that time and date is no longer available for all other users and if on the day The available schedules run out, I want that date on the calendar to be shown disabled and that it can no longer be selected for any user.

I hope someone can give me some good ideas on how to implement it if you have already faced something similar or if someone knows a tool.
Thank you for reading, I will be on the lookout for your comments.

This is my form_component for create an appointment:

          class="border-red-300 rounded-md shadow-sm"

        <.input field={@form[:start_time]} type="time" label="Hora de Inicio" />
        <.input field={@form[:end_time]} type="time" label="Hora de Fin" />
          class="scroll-smooth md:scroll-auto"
        <p class="mt-2 text-xs text-neutral-500">
          Mantenga presionada la tecla <kbd>Ctrl</kbd>
          (o <kbd>Command</kbd>
          en Mac) para seleccionar o anular varios grupos.
          <.button phx-disable-with="Guardando...">Guardar Cita</.button>

The first thing You could do is ensure at the database level that there will be no overlapping appointments…

Then You would be sure to catch the error when the user try to validate the appointment.

Then You would need to find a way to signal clients when appointments have changed. But You are on the BEAM and You have pubsub.

When your core logic is ready, it would be time to implement UI

1 Like

Ok, thanks i will try that :slight_smile:

I also have a post on this

1 Like

Oooo amazing :open_mouth: thanks! i going to change my schema and update my database for change the datatype for that column :ok_hand:t5: because at this moment i have this

  schema "appointments" do
    field :date, :date
    field :start_time, :time
    field :end_time, :time
    belongs_to :user, Accounts.User
    many_to_many :appointment_services, MedussaStudio.Services.Service,
      join_through: AppointmentService,
      on_replace: :delete

    timestamps(type: :utc_datetime)

I created that schema just to test my live view taking into account that I just had to find something to implement the booking logic and i think that your post solve my problem :slight_smile: let me try and I let you know how implemented :slight_smile: thanks! and I sorry if I ask so much :sweat_smile: but I’m learning and this is my first app that i created for a client

1 Like

You should be aware my example is about date, but You need to use datetime, because hours matters

Nice to have a client willing to use Phoenix.

My advice is start by the Core logic, You can test in the console.

Then write the UI around your Core…

1 Like

I’d suggest also figuring out the booking experience you want to support. For example, is the booking duration determined by the type of service? Do users first select a date before seeing what time slots are available on that given date? Do you want the opposite where users first select a time slot before seeing what days have that time slot available? Do you want to support both?

Anyways, here’s some more reference code that could be helpful:

1 Like

Ok, I will try to combine maybe ideas from you post that you shared :slight_smile:

Yes my client willing to use Phoenix so I want to do a good job with him :041: and also I learn new topics :face_with_hand_over_mouth:

Thanks for you advice I apreciate it :raised_hands:t5:

Ok, thanks! I going to take a look to your posts and try to do my best :slight_smile:
and of course I think what I want to support :thinking:. Thanks for you advice I apreciate it :raised_hands:t5: