BlazorLibraries.MudPlanner 1.0.1

BlazorLibraries.MudPlanner

A comprehensive calendar planning component for Blazor applications, built with MudBlazor. This NuGet package provides a feature-rich calendar interface with drag-and-drop event management, responsive design, and customizable weekly recaps.

Features

• 📅 Interactive Calendar: Full-featured calendar with month navigation
• 🎯 Drag & Drop: Move events between dates with intuitive drag-and-drop
• 📝 Event Management: Create, edit, and organize calendar events
• 📊 Weekly Recaps: Optional weekly summary columns
• 🎨 Customizable: Color-coded events with MudBlazor theming support
• 📱 Responsive Design: Adapts beautifully to different screen sizes
• 💾 Local Storage: Built-in local storage integration with Blazored.LocalStorage
• ⚡ Performance: Efficient rendering with Observable collections

Installation

Install the package via NuGet Package Manager:

dotnet add package BlazorLibraries.MudPlanner

Or via Package Manager Console:

Install-Package BlazorLibraries.MudPlanner

Quick Start

1. Register Services

Add the required services to your Program.cs:

using BlazorLibraries.MudPlanner;
using Blazored.LocalStorage;
using MudBlazor.Services;

var builder = WebAssemblyHostBuilder.CreateDefault(args);

// Add MudBlazor services
builder.Services.AddMudServices();

// Add Blazored LocalStorage
builder.Services.AddBlazoredLocalStorage();

// Add MudPlanner services (if any)
builder.Services.AddScoped<ExampleJsInterop>();

await builder.Build().RunAsync();

2. Add Required Imports

Add to your _Imports.razor:

@using BlazorLibraries.MudPlanner
@using System.MudPlanner
@using MudBlazor
@using System.Collections.ObjectModel

3. Include Styles

Add MudBlazor theme to your index.html or App.razor:

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />

4. Basic Usage

@page "/calendar"
@using System.Collections.ObjectModel
@using System.MudPlanner

<CalendarComponent @bind-Planning="events"
                   @bind-WeekRecaps="WeekRecaps"
                   HasWeekRecap="true"
                   OnPlanningSaveCallback="@OnEventMoved" />

@code {
    private ObservableCollection<CalendarEvent> events = new();
    private ObservableCollection<WeekRecap> weekRecaps = new();

    protected override void OnInitialized()
    {
        // Add sample events
        events.Add(new CalendarEvent(1, "Meeting", "Team standup", MudBlazor.Color.Primary, DateOnly.FromDateTime(DateTime.Today)));
        events.Add(new CalendarEvent(2, "Deadline", "Project submission", MudBlazor.Color.Error, DateOnly.FromDateTime(DateTime.Today.AddDays(3))));
        
        // Add sample week recap
        weekRecaps.Add(new WeekRecap 
        { 
            WeekStart = DateOnly.FromDateTime(DateTime.Today.StartOfWeek()),
            WeekEnd = DateOnly.FromDateTime(DateTime.Today.StartOfWeek().AddDays(6)),
            Text = new List<string> { "Completed 5 tasks", "2 meetings scheduled" }
        });
    }
    private async Task OnEventMoved((DateOnly date, CalendarEvent eventItem) args)
    {
        // Handle event movement
        Console.WriteLine($"Event '{args.eventItem.Title}' moved to {args.date}");
    }
}

API Reference

CalendarComponent Parameters

CalendarEvent Class

public class CalendarEvent : EventArgs
{
    public int Id { get; set; }
    public string Title { get; set; }
    public string Description { get; set; }
    public Color Color { get; set; }
    public DateOnly Date { get; set; }
    
    // Constructors
    public CalendarEvent(int id, string title, string description, Color color, DateOnly date)
    public CalendarEvent(int id, string title, string description, DateOnly date) // Uses Color.Info as default
}

WeekRecap Class

public class WeekRecap
{
    public List<string> Text { get; set; } = [];
    public List<CalendarEvent> CalendarEvents { get; set; } = [];
    public DateOnly WeekStart { get; set; }
    public DateOnly WeekEnd { get; set; }
}

Advanced Usage

Custom Event Colors

var urgentEvent = new CalendarEvent(1, "Urgent Task", "High priority item", Color.Error, DateOnly.FromDateTime(DateTime.Today));
var meetingEvent = new CalendarEvent(2, "Team Meeting", "Weekly sync", Color.Primary, DateOnly.FromDateTime(DateTime.Today));
var personalEvent = new CalendarEvent(3, "Personal", "Doctor appointment", Color.Secondary, DateOnly.FromDateTime(DateTime.Today.AddDays(1)));

Handling Event Interactions

<CalendarComponent Planning="@events" 
                  OnPlanningSaveCallback="@HandleEventMove" />

@code {
    private async Task HandleEventMove((DateOnly newDate, CalendarEvent eventItem) args)
    {
        // Update in your data store
        await UpdateEventInDatabase(args.eventItem.Id, args.newDate);
        
        // Show notification
        Snackbar.Add($"Event '{args.eventItem.Title}' moved to {args.newDate:D}", Severity.Success);
    }
}

Integration with Local Storage

@inject ILocalStorageService LocalStorage

private async Task SavePlanningToStorage()
{
    await LocalStorage.SetItemAsync("calendar-events", events);
}

private async Task LoadPlanningFromStorage()
{
    var savedEvents = await LocalStorage.GetItemAsync<ObservableCollection<CalendarEvent>>("calendar-events");
    if (savedEvents != null)
    {
        events = savedEvents;
    }
}

Styling and Customization

The component uses MudBlazor theming and includes responsive CSS variables:

/* Customize cell heights */
.calendar-table {
    --cell-h: 8rem; /* Base cell height */
    --cell-header-h: 1.6rem; /* Header area height */
}

/* Custom colors for event types */
.work-event { background-color: #1976d2; }
.personal-event { background-color: #388e3c; }
.urgent-event { background-color: #d32f2f; }

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Dependencies

• MudBlazor (>= 9.12.0)
• Blazored.LocalStorage (>= 4.5.0)
• Microsoft.AspNetCore.Components.Web (>= 9.0.12)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

If you find this library useful, please give it a ⭐ on GitHub!

For issues and feature requests, please use the GitHub Issues page.