Crie um sistema de agendamento próprio (alternativa ao Calendly)

Aprenda a criar um sistema de agendamento online próprio com Lovable e Supabase. Uma alternativa ao Calendly gratuita, sob medida e sem mensalidade. Passo a passo.

Ferramentas:

• Lovable — interface e lógica sem código

• Supabase — guarda a disponibilidade e os agendamentos

Como um sistema de agendamento funciona por dentro

A lógica tem duas partes que conversam entre si:

Você define a disponibilidade: quais dias da semana e quais horários você está livre. Por exemplo, segunda a sexta, das 9h às 12h e das 14h às 17h.

O sistema mostra os horários livres: ele pega a sua disponibilidade, remove os horários já agendados, e mostra para o visitante só o que está realmente livre. Quando alguém agenda, aquele horário some da lista para os próximos.

É essa subtração — disponibilidade menos horários ocupados — que faz o sistema evitar conflitos.

Passo 1 — Crie o projeto no Lovable

Acesse o Lovable e use este prompt:

Crie um sistema de agendamento online chamado "Agenda Fácil".

PÁGINA PÚBLICA DE AGENDAMENTO (/agendar):
- Mostra um calendário com os próximos 14 dias
- Ao escolher um dia, mostra os horários disponíveis daquele dia
- Ao escolher um horário, abre um formulário: nome, e-mail, 
  e observação opcional
- Ao confirmar, salva o agendamento e mostra mensagem de sucesso
- Horários já agendados não aparecem como disponíveis

PAINEL ADMIN (/admin) — protegido por senha:
- Configuração de disponibilidade: dias da semana e faixas 
  de horário em que estou livre
- Duração padrão de cada agendamento (ex: 30 ou 60 minutos)
- Lista de todos os agendamentos: data, horário, nome, 
  e-mail, observação
- Botão para cancelar um agendamento

Use Supabase como banco de dados.
Design: fundo escuro, azul como destaque, visual limpo, 
responsivo e otimizado para mobile.

Passo 2 — Estrutura no Supabase

Vá em Settings → Integrations → Supabase e conecte. Confirme estas tabelas:

Disponibilidade (suas regras de horário):

create table disponibilidade (
  id          uuid primary key default gen_random_uuid(),
  dia_semana  int,        -- 1 = segunda, 2 = terça... 5 = sexta
  hora_inicio time,
  hora_fim    time,
  ativo       boolean default true
);

Agendamentos (o que foi marcado):

create table agendamentos (
  id          uuid primary key default gen_random_uuid(),
  data        date not null,
  horario     time not null,
  nome        text not null,
  email       text not null,
  observacao  text,
  criado_em   timestamp default now()
);

A tabela de disponibilidade define quando você está livre em geral. A de agendamentos registra o que já foi marcado. O sistema combina as duas para mostrar os horários realmente disponíveis.

Passo 3 — A lógica que mostra só horários livres

Essa é a parte central. Quando alguém escolhe um dia, o sistema precisa calcular quais horários mostrar. Instrua o Lovable:

Quando o visitante escolher um dia na página de agendamento:
1. Veja qual dia da semana é (segunda, terça, etc.)
2. Busque a disponibilidade configurada para aquele dia
3. Divida as faixas de horário em slots conforme a duração 
   padrão (ex: 9h-12h vira slots de 9h, 9h30, 10h... se a 
   duração for 30min)
4. Remova da lista os horários que já têm agendamento naquele dia
5. Mostre só os slots que sobraram como disponíveis

A lógica em pseudocódigo (para você entender o fluxo):

// 1. Pega disponibilidade do dia escolhido
const faixas = buscarDisponibilidade(diaSemana);

// 2. Gera todos os slots possíveis
const slotsPossiveis = gerarSlots(faixas, duracao);

// 3. Pega o que já foi agendado nesse dia
const ocupados = buscarAgendamentos(dataEscolhida);

// 4. Mostra só o que está livre
const disponiveis = slotsPossiveis.filter(
  slot => !ocupados.includes(slot)
);

O que é um "slot"? É cada horário disponível para marcar. Se você atende das 9h às 11h em sessões de 30 minutos, os slots são 9h, 9h30, 10h e 10h30. O sistema gera isso automaticamente a partir da sua disponibilidade.

Passo 4 — Confirmação por e-mail

Um bom sistema de agendamento confirma para os dois lados. Instrua o Lovable:

Quando um agendamento for confirmado:
1. Envie um e-mail para o visitante confirmando data e horário
2. Envie um e-mail para você (o dono) avisando do novo agendamento
3. Inclua nos e-mails: data, horário, nome e observação

Use Resend ou o serviço de e-mail integrado para o envio.

Para automatizar lembretes ou integrar com seu calendário, você pode conectar o Make depois — ele dispara um lembrete no dia anterior ou cria o evento no Google Calendar automaticamente.

Passo 5 — Proteja o painel admin

O painel onde você configura disponibilidade e vê os agendamentos precisa de proteção. Instrua o Lovable:

Proteja a rota /admin com uma senha.
Ao acessar, peça a senha; se correta, libera o painel 
e mantém o acesso durante a sessão.
A senha deve ser verificada contra uma variável de ambiente.

Para um sistema pessoal, senha única já resolve. Se for abrir para vários usuários no futuro, aí migra para login completo.

Erros comuns de quem está começando