Highlighted Periods

Highlighted Periods

Mark specific dates or date ranges with custom background colors and icons.

Use Cases

• 🎄 Holidays (Christmas, New Year, etc.)
• 🎂 Birthdays & Anniversaries
• 🧳 Vacations & Time Off
• 📊 Project timelines
• 📅 Important events
• 💼 Recurring meetings

Basic Usage

Single Day

new HighlightedPeriod 
{ 
    DateStart = new DateTime(2026, 04, 14),
    BackgroundColor = "#FFD700",
    Label = "Birthday",
    Icon = "🎂"
}

Complete Example

@page "/calendar"
@using BlazorCalendar.Models

<CalendarContainer FirstDate="@today" TasksList="@tasks">
    <AnnualView 
        Months="12"
        HighlightedPeriods="@highlightedPeriods"
        Draggable="true" />
</CalendarContainer>

@code {
    private DateTime today = DateTime.Today;
    private Tasks[] tasks = Array.Empty<Tasks>();
    
    private HighlightedPeriod[] highlightedPeriods = new[]
    {
        // Noël chaque année
        new HighlightedPeriod 
        { 
            DateStart = new DateTime(2026, 12, 25),
            RecurrenceType = RecurrenceType.Yearly,
            BackgroundColor = "#FF0000",
            Label = "Christmas",
            Icon = "🎄"
        },
        
        // Anniversaire chaque année
        new HighlightedPeriod 
        { 
            DateStart = new DateTime(2026, 04, 14),
            RecurrenceType = RecurrenceType.Yearly,
            BackgroundColor = "#FFD700",
            Label = "Birthday",
            Icon = "🎂"
        },
        
        // Vacances une fois
        new HighlightedPeriod 
        { 
            DateStart = new DateTime(2026, 05, 01),
            DateEnd = new DateTime(2026, 05, 05),
            BackgroundColor = "#87CEEB",
            Label = "Vacances",
            Icon = "🧳"
        },
        
        // Réunion hebdo
        new HighlightedPeriod 
        { 
            DateStart = new DateTime(2026, 01, 05), // Un lundi
            RecurrenceType = RecurrenceType.Weekly,
            BackgroundColor = "rgba(200, 200, 255, 0.3)",
            Label = "Team Meeting",
            Icon = "👥"
        },
        
        // Payday chaque mois
        new HighlightedPeriod 
        { 
            DateStart = new DateTime(2026, 01, 25),
            RecurrenceType = RecurrenceType.Monthly,
            BackgroundColor = "#90EE90",
            Label = "Payday",
            Icon = "💰"
        }
    };
}