BlazorFullCalendar 0.2.0

BlazorFullCalendar

A feature-rich, interactive calendar component for Blazor applications. Built with pure Blazor and .NET — no JavaScript frameworks required.

Features

• 5 View Modes: Day, Week, Month, Year, and Agenda views with smooth transitions
• Event Management: Create, edit, and delete events with a polished dialog and form validation
• Culture-Aware Date-Time Picker: Built-in dropdown date-time picker in add/edit dialogs (no browser-native datetime-local) with culture calendar rendering support (including fa-IR)
• Drag & Drop: Move events between time slots and dates with native HTML5 drag-and-drop
• Resize: Drag the top or bottom handle of any day/week event block to adjust its start or end time
• Multi-User Support: Filter events by attendee or color with avatar initials and color badges
• Text Customization: Override UI labels, button text, placeholders, aria labels, and validation messages with BlazorFullCalendarTexts
• Customizable: Dark mode, 12/24-hour format, dot vs colored badges, configurable start hour, and agenda grouping options
• Live Timeline: Real-time current-time indicator in day and week views with "Happening Now" sidebar
• Themes: Default and Fluent (WinUI-style) built-in themes; dark mode supported for both
• Self-Loading Assets: The component can inject its own CSS and JS automatically — no manual <link> or <script> tags required

Installation

1. Install the NuGet package

dotnet add package BlazorFullCalendar

Or add a project reference if you are working from this repository.

2. Register the assembly

Blazor Server / Interactive Server

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode()
    .AddAdditionalAssemblies(BlazorFullCalendar.BlazorFullCalendarAssembly.Value);

Blazor WebAssembly

builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");
// The assembly is discovered automatically for WASM.

3. Add the namespace import

In your _Imports.razor:

@using BlazorFullCalendar

4. Asset loading

By default the component automatically injects its stylesheet and JavaScript into the page the first time it renders (LoadAssets="true"). No extra tags are needed in your host page.

If you prefer to control asset loading yourself — for example to set a specific load order, use a bundler, or serve the files from a CDN — set LoadAssets="false" and add the tags manually to your host page (index.html or App.razor):

<link rel="stylesheet" href="_content/BlazorFullCalendar/css/blazor-fullcalendar.css" />
<script src="_content/BlazorFullCalendar/js/blazor-fullcalendar.js"></script>

The Fluent theme overrides are bundled inside blazor-fullcalendar.css and activated automatically when Theme="BlazorFullCalendarTheme.Fluent" is set on the component — no second stylesheet is required.

Usage

Basic Example

@page "/calendar"

<BlazorFullCalendar Events="myEvents"
                    OnChange="HandleCalendarChange"
                    @rendermode="InteractiveServer" />

@code {
    private List<BlazorFullCalendarEvent> myEvents = new()
    {
        new() {
            Id = 1,
            Title = "Team Meeting",
            Description = "Weekly sync",
            StartDate = DateTime.Today.AddHours(10),
            EndDate = DateTime.Today.AddHours(11),
            Color = BlazorFullCalendarEventColor.Blue
        }
    };

    private Task HandleCalendarChange(BlazorFullCalendarChangeEventArgs args)
    {
        // Persist args.Event or synchronize with your backend/store.
        return Task.CompletedTask;
    }
}

Fluent Theme Example

<BlazorFullCalendar Events="myEvents"
                    Theme="BlazorFullCalendarTheme.Fluent"
                    OnChange="HandleCalendarChange"
                    @rendermode="InteractiveServer" />

Manual Asset Loading Example

<link rel="stylesheet" href="_content/BlazorFullCalendar/css/blazor-fullcalendar.css" />
<script src="_content/BlazorFullCalendar/js/blazor-fullcalendar.js"></script>

<BlazorFullCalendar Events="myEvents"
                    LoadAssets="false"
                    OnChange="HandleCalendarChange"
                    @rendermode="InteractiveServer" />

Localization Notes

• The event add/edit dialog uses a custom dropdown date-time picker instead of native browser date inputs.
• Date cells, weekday headers, month names, and year/day values are rendered from the active CultureInfo calendar.
• This improves consistency for non-Gregorian cultures such as Persian (fa-IR) and other localized calendars.
• Dialog labels and validation text can be localized by supplying a customized BlazorFullCalendarTexts instance.
• Use CultureName (a plain string) instead of Culture (a CultureInfo) when using @rendermode="InteractiveServer", because CultureInfo is not JSON-serializable by Blazor's parameter persistence.

Text Customization Example

<BlazorFullCalendar Events="myEvents"
                    CultureName="fa-IR"
                    Texts="calendarTexts"
                    @rendermode="InteractiveServer" />

@code {
    private readonly BlazorFullCalendarTexts calendarTexts = new()
    {
        AddEventButton = "افزودن رویداد",
        AddEventDialogTitle = "افزودن رویداد جدید",
        StartDateTimeLabel = "تاریخ و زمان شروع",
        EndDateTimeLabel = "تاریخ و زمان پایان",
        CreateEventButton = "ایجاد رویداد"
    };
}

Component Parameters

Models

BlazorFullCalendarEvent

public class BlazorFullCalendarEvent
{
    public int Id { get; set; }
    public string Title { get; set; }
    public string? Description { get; set; }
    public DateTime StartDate { get; set; }
    public DateTime EndDate { get; set; }
    public BlazorFullCalendarEventColor Color { get; set; }
    public List<BlazorFullCalendarAttendee> Attendees { get; set; }
}

BlazorFullCalendarAttendee

public class BlazorFullCalendarAttendee
{
    public string Id { get; set; }
    public string FullName { get; set; }
}

BlazorFullCalendarEventColor

Available values: Blue, Green, Red, Yellow, Purple, Orange

BlazorFullCalendarChangeEventArgs

public class BlazorFullCalendarChangeEventArgs
{
    public BlazorFullCalendarEvent Event { get; set; }    // the new/updated state
    public BlazorFullCalendarEvent? OldEvent { get; set; } // previous state (Edit/Delete)
    public BlazorFullCalendarChangeKind Kind { get; set; } // Add | Edit | Delete
    public BlazorFullCalendarChangeSource Source { get; set; } // Dialog | Drag | Resize
}

Views

• Month View: Grid layout with multi-day event support and "+N more" overflow
• Week View: 7-day view with hourly time slots, drag-and-drop, and event resize
• Day View: Single-day detailed view with timeline, sidebar mini-calendar, and "Happening Now" panel
• Year View: 12-month overview with per-day event bullet indicators
• Agenda View: Searchable list grouped by date or user

Customization

The calendar includes built-in settings accessible via the gear icon in the header:

• Toggle dark mode
• Switch between 12/24-hour time format
• Choose badge style (colored or dot)
• Set start hour for day/week views
• Configure agenda view grouping

Static Asset Paths

When LoadAssets="false", the files are served from the Razor Class Library's static web assets path:

blazor-fullcalendar.css already @imports blazor-fullcalendar.fluent.css, so you only need to reference the main stylesheet.

Browser Support

• Modern browsers with CSS Grid and Flexbox support
• HTML5 Drag and Drop API support required for drag-and-drop

Credits

Original concept inspired by yassir-jeraidi/full-calendar

License

MIT, use it and be happy 😃