+420 739 911 686
Po - Pá: 8h - 18h

Demo - Komponenta pro plánování schůzek

Redesigned Modal

Klikněte na tlačítko níže pro otevření nově navrženého modálního okna s moderním headerem a footerem.

✨ Enhanced Features:

  • • Moderní gradient header s animacemi
  • • Pokročilý calendar/time picker s tab navigací
  • • Visual feedback a progress indikátory
  • • Automatické přepínání mezi datum/čas
  • • Touch-friendly mobilní rozhraní
  • • Keyboard navigation a accessibility
  • • Půl-hodinové časové sloty s dostupností
  • • Smooth animace a micro-interactions

Různé varianty tlačítka

Primary

Secondary

Accent

Outline

Ghost

Savings

Různé velikosti

Small

Medium (default)

Large

Na celou šířku

Jak používat

Komponenta ScheduleMeetingAction kombinuje tlačítko a modální okno pro plánování schůzek.

Import

import ScheduleMeetingAction from "$lib/components/actions/ScheduleMeetingAction.svelte";

Základní použití

<ScheduleMeetingAction />

S parametry

<ScheduleMeetingAction
  variant="primary"
  size="lg"
  fullWidth
/>

Dostupné parametry

  • variant: 'primary' | 'secondary' | 'accent' | 'savings' | 'outline' | 'ghost' (default: 'primary')
  • size: 'sm' | 'md' | 'lg' (default: 'md')
  • fullWidth: boolean (default: false)
  • class: string - dodatečné CSS třídy

Funkcionalita

  • Otevře modální okno s formulářem pro plánování schůzky
  • Umožňuje výběr typu schůzky (osobní/online)
  • Umožňuje výběr data a času
  • Validace formuláře pomocí Zod
  • Toast notifikace při úspěšném odeslání
  • Responzivní design