How to set available dates in a input type date

[amirOrbe]

Hi everyone ,
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:

      <.simple_form
        for={@form}
        id="appointment-form"
        phx-target={@myself}
        phx-change="validate"
        phx-submit="save"
      >
        <.input
          field={@form[:date]}
          type="date"
          label="Fecha"
          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" />
        <.input
          field={@form[:services]}
          type="select"
          label="Servicios"
          multiple={true}
          options={list_services_with_id()}
          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.
        </p>
        <:actions>
          <.button phx-disable-with="Guardando...">Guardar Cita</.button>
        </:actions>
      </.simple_form>

[kokolegorille]

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

Elixir Blog Posts

Today’s blog post is about exclusion constraints in Postgres and how to prevent double-bookings of appointments with them. It’s a nice dive into how to execute custom SQL code in your migrations and how timestamp ranges work in Posgres. You can use this if you want to prevent any double-bookings of e.g. appointments, schedules, meetings, etc.

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

[amirOrbe]

@kokolegorille

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

Ok, thanks i will try that

[kokolegorille]

I also have a post on this

Best way to schedule events in Elixir?

On the non overlapping topic… You could use range as mentionned by other Here is an example def change do execute "CREATE EXTENSION btree_gist", "DROP btree_gist" create table(:examples) do add :any, :string # Using a tstzrange should allow exclusion constraint. # https://www.postgresql.org/docs/13/rangetypes.html#RANGETYPES-CONSTRAINT add :period, :tstzrange timestamps(type: :utc_datetime) end # Create a custom constraint enforcing period do not o…

[amirOrbe]

Oooo amazing thanks! i going to change my schema and update my database for change the datatype for that column 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)
  end

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 let me try and I let you know how implemented thanks! and I sorry if I ask so much but I’m learning and this is my first app that i created for a client

[kokolegorille]

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…

[codeanpeace]

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:

• Fetch options for one dropdown based off the selected value of another dropdown · codeanpeace/live_cal@300d784
• Hide dropdown until the other dropdown it depends on has a selected value · codeanpeace/live_cal@5eab628
• Nested inputs_for events in calendar form livecomponent with conditional rendering of one input based on another · codeanpeace/live_cal@e56742c

[amirOrbe]

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

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

Thanks for you advice I apreciate it

[amirOrbe]

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