Appointment

Calendar-based appointment scheduling component for in-person service delivery. Integrates with the eProgramari service to display available time slots, allows date and time selection, confirms appointments with QR code display, and supports cancellation. Implements WizardStepBase for seamless wizard integration with validation and data persistence.

Interactive Demo

Configure and interact with the FodAppointment component. Select a service type, adjust date ranges, and book an appointment.

Appointment for Personal Pickup

Select a convenient date and time to pick up your documents at the service office.

Centrul Guvernamental

This text is for the description of the institution where your appointment will take place.

Luni-Vineri: 08:00-17:00

+373 22 123456

str. Stefan cel Mare, 123, Chisinau

May 2026

MON

TUE

WED

THU

FRI

SAT

SUN

May 20, Wednesday

Service Type

Slot Duration

Document Pickup (15 min) Apostillation (30 min) Complex Interview (60 min)

Configuration

Service ID

Used to fetch available slots

Min Date

Earliest selectable date

Max Date

Latest selectable date

Allow Cancellation Show Office Info Compact Calendar

Office Location (Optional)

Office Name

Address

Phone

Working Hours

Test Error Scenarios

Trigger error states to verify the Error display and Retry button. Watch the Component State and Event Log sections below.

Each button reloads the component with a service ID that makes the mock service throw a specific exception. Verify that:
① The component exits the loading spinner and shows the error message.
② A Retry button appears (up to 3 attempts).
③ Clicking Retry re-triggers the API call (watch the Event Log).

Component State

Current state of the FodAppointment component.

State: DateSelected

Selected Date: 2026-05-20

Selected Time: 00:00 - 00:00

Confirmation Code: Not confirmed

Error: None

Event Log

Events fired by the component during interaction.

Events

11:27:42 Date selected: 2026-05-20

API Reference - Parameters

Component parameters for FodAppointment.

No properties defined.

API Reference - Events

Event callbacks fired by FodAppointment.

No properties defined.

API Reference - States

FodAppointment progresses through these states during the booking flow.

No properties defined.

API Reference - AppointmentErrorType

Error types that can occur during appointment scheduling.

No properties defined.

Usage Example

Basic standalone usage of the FodAppointment component.

razor

@using Fod.ServiceComponents.Appointment
@using Fod.ServiceModels.Appointment

<FodAppointment @bind-Value="_appointmentData"
                ServiceId="service-001"
                OfficeLocation="@_officeLocation"
                MinDate="@DateTime.Today.AddDays(1)"
                MaxDate="@DateTime.Today.AddDays(30)"
                OnAppointmentConfirmed="HandleConfirmed" />

@code {
    private FodAppointmentData _appointmentData = new();

    private OfficeLocationData _officeLocation = new()
    {
        OfficeId = "office-001",
        Name = "Centrul Guvernamental",
        Address = "str. Stefan cel Mare, 123, Chisinau",
        Phone = "+373 22 123456",
        WorkingHours = "Luni-Vineri: 08:00-17:00"
    };

    private void HandleConfirmed(AppointmentConfirmation confirmation)
    {
        Console.WriteLine($"Confirmed: {confirmation.ConfirmationCode}");
    }
}

Wizard Integration

Use FodAppointment as a conditional step in a FodWizardComponent workflow. The step is typically shown only when reception mode is Personal Pickup.

razor

<FodWizardComponent Steps="@_steps" ServiceRequestContext="@_context">
</FodWizardComponent>

@code {
    private List<WizardStep> _steps =
    [
        new WizardStep
        {
            StepId = "requestor",
            Title = "Requestor",
            ComponentType = typeof(FodRequestor),
            Order = 1
        },
        new WizardStep
        {
            StepId = "appointment",
            Title = "Appointment",
            ComponentType = typeof(FodAppointment),
            Order = 7
        },
        new WizardStep
        {
            StepId = "confirmation",
            Title = "Confirmation",
            ComponentType = typeof(FodConfirmation),
            Order = 8
        }
    ];
}