DaisyDateTimeline

Overview

DaisyDateTimeline is a horizontal scrollable date picker inspired by FadyFayezYounan's easy_date_timeline package. It displays dates in a horizontal strip where each date appears as a card showing the day name, day number, and month. Perfect for booking systems, scheduling apps, calendars, and any UI requiring date selection from a visible range.

* Available in DaisyUI v1.2.1 and later.

- Horizontal scrolling date strip with 5 size options

- 3 header types: None, MonthYear, Switcher (with navigation arrows)

- 6 disable strategies for restricting date selection

- Today highlighting with customizable appearance

- Auto-scroll to selected date (center or first)

- Full locale support for internationalization

- Configurable display elements (day name, number, month)

Header Types

Disable Strategies

Control which dates users can select:

Selection Modes

Control how the timeline scrolls when a date is selected:

Layout Modes

Control the orientation of date items:

Display Elements

Configure which parts of each date item are shown using the DisplayElements flags. Each item displays in the order: Month → Day Number → Day Name (top to bottom).

Size Options

Quick Examples

<!-- Basic usage with defaults -->
<controls:DaisyDateTimeline />

<!-- Custom date range -->
<controls:DaisyDateTimeline 
    FirstDate="2024-01-01"
    LastDate="2024-12-31"
    SelectedDate="{Binding SelectedDate}" />

<!-- With month switcher navigation -->
<controls:DaisyDateTimeline 
    HeaderType="Switcher"
    SelectedDate="{Binding AppointmentDate, Mode=TwoWay}" />

<!-- No header, compact mode -->
<controls:DaisyDateTimeline 
    HeaderType="None"
    Size="Small"
    DisplayElements="Compact" />

<!-- Only allow future dates -->
<controls:DaisyDateTimeline 
    DisableStrategy="BeforeToday"
    SelectedDate="{Binding BookingDate, Mode=TwoWay}" />

<!-- Custom disable date range -->
<controls:DaisyDateTimeline 
    DisableStrategy="BeforeDate"
    DisableBeforeDate="2024-06-01"
    FirstDate="2024-05-01"
    LastDate="2024-07-31" />

<!-- Different locale (German) -->
<controls:DaisyDateTimeline 
    Locale="{x:Static glob:CultureInfo.GetCultureInfo('de-DE')}" />

<!-- Large size for primary selection -->
<controls:DaisyDateTimeline 
    Size="Large"
    HeaderType="Switcher" />

<!-- Day number only display -->
<controls:DaisyDateTimeline 
    DisplayElements="NumberOnly"
    ItemWidth="48"
    ItemSpacing="4" />

Properties Summary

Marked Dates

Mark specific dates with a secondary color background and optional tooltip text. Marked dates stand out visually and show their tooltip on hover.

DateMarker Class

public class DateMarker
{
    public DateTime Date { get; set; }     // The date to mark
    public string Text { get; set; }       // Tooltip text (optional)
}

Usage

// In code-behind or ViewModel
myTimeline.MarkedDates = new List<DateMarker>
{
    new DateMarker(DateTime.Today.AddDays(2), "Team Meeting"),
    new DateMarker(DateTime.Today.AddDays(5), "Project Deadline"),
    new DateMarker(DateTime.Today.AddDays(10), "Vacation Day")
};

Marked dates display with a secondary color background (instead of the default neutral). When the user hovers over a marked date, the tooltip text appears.

Events

Methods

Date Formatting Helpers

Read-only properties for convenient date string formatting (uses the control's Locale setting):

Keyboard Navigation

The control is fully keyboard accessible. Click on the timeline or tab to it to enable keyboard navigation:

> Note: Navigation automatically skips disabled dates.

Mouse Navigation

Visual States

Each date item can display the following visual states:

Tips & Best Practices

1. Set reasonable date ranges: Avoid extremely large ranges (years) as each date creates a control instance. Stick to weeks or months.

2. Use DisableStrategy for validation: Rather than filtering dates in your ViewModel, use the built-in strategies for better performance.

3. Combine with DaisyCard: Wrap the timeline in a card for a polished booking widget:

<controls:DaisyCard>
    <StackPanel Spacing="12">
        <TextBlock Text="Select Date" FontWeight="SemiBold" />
        <controls:DaisyDateTimeline HeaderType="Switcher" />
    </StackPanel>
</controls:DaisyCard>

4. Locale support: For international apps, bind Locale to a user preference:

    <controls:DaisyDateTimeline Locale="{Binding UserCulture}" />

5. Adjust ItemWidth for content: If showing only day numbers (NumberOnly), reduce ItemWidth to ~48px for a more compact appearance.