Event calendar, add day/multiday view

[jkucera03]

Hi!

please consider to add into event calendar day and multiday view.

Thanks!

[mathewtaylor]

Hi @jkucera03, do you have an example you can share?

[jkucera03]

Hi,

sorry, I develop applications that require a calendar everywhere and I didn't realize it was appropriate to add an idea.

examples:

• https://qcalendar.netlify.app/examples/day/date-type
• https://qcalendar.netlify.app/examples/day/_3-day

resource groups in day view:

• https://qcalendar.netlify.app/examples/day/column-count-plus

or other inspiration

• https://blazor.radzen.com/scheduler
• https://mudcalendar.heron.li/calendar#day/week-view-options

I'm currently using a vue / dotnet development stack and I would like to switch to a unified dotnet / blazor stack. I would like to leave material design and stay with tailwind, which your components perfectly fulfill.

Thanks for your great work

[mathewtaylor]

Covered in v4 by the new BbScheduler component, rather than by adding a timed view to BbEventCalendar. Closing this as delivered by a different route than the one the issue assumed.

What you get

BbScheduler is a real timed grid, which is what this issue was asking for:

• Day, Week, Monday–Friday WorkWeek and Month views, with SlotMinutes of 15, 30 or 60.
• Resource lanes — one column per room, staff member or machine, each with its own header, with overlap packing applied per lane. That is what EventCalendar: resource-grouped columns in Day view #420 asked for and it closes with this one.
• Drag to move and resize either boundary, all-day events drawn as a band above the grid with multi-day runs as one bar, recurrence with per-occurrence exceptions, IANA time zones with daylight-saving validation, ActiveHours to mute or refuse the parts of a day the schedule is not about, context menus on slots and events, and a replaceable toolbar and editor.

The trade, stated plainly

BbEventCalendar<TEvent> is generic over your own event model. BbScheduler is not — it takes IReadOnlyList<SchedulerEvent>, and you derive from that type. We are not shipping an adapter between the two. Two event models with a translation layer between them is a worse thing to own than one clear boundary, and the translation would have to round-trip recurrence rules, exception sets and series identity to be correct.

Migration

1. Derive from SchedulerEvent and carry your own fields. SchedulerEvent gives you Id, Title, Start, End, TimeZoneId, IsAllDay, ResourceIds, RecurrenceRule, ExcludedStarts, SeriesId and RecurrenceId.

public sealed class Appointment : SchedulerEvent
{
    public string? CustomerId { get; set; }
    public string? Notes { get; set; }

    // Without this override, every edit, drag and resize silently drops your fields.
    // CopyTo handles everything the base type owns, so you only write your own.
    public override SchedulerEvent Clone()
    {
        var copy = new Appointment { CustomerId = CustomerId, Notes = Notes };
        CopyTo(copy);
        return copy;
    }
}

2. Point NewEventFactory at your type, or an event created in the UI is a bare SchedulerEvent and your fields have nowhere to live.

3. Hold the collection as IReadOnlyList<SchedulerEvent>, not List<Appointment>. IReadOnlyList<T> is covariant, so the getter would compile either way — but EventsChanged hands back IReadOnlyList<SchedulerEvent>, which cannot be assigned to a List<Appointment> field. Cast on read instead.

4. Map your resources. SchedulerResource is (string Id, string Title), and SchedulerEvent.ResourceIds is a list, so one event can sit in several lanes.

<BbScheduler @bind-Events="events"
             @bind-Date="date"
             View="SchedulerView.Day"
             Resources="@rooms"
             SlotMinutes="30"
             NewEventFactory="@(() => new Appointment())">
    <EditorContent>
        @context.DefaultContent
        <BbFormFieldInput Label="Notes" @bind-Value="((Appointment)context.Draft).Notes" />
    </EditorContent>
</BbScheduler>

@code {
    private IReadOnlyList<SchedulerEvent> events = new List<SchedulerEvent>();
    private IReadOnlyList<SchedulerResource> rooms =
    [
        new("room-a", "Room A"),
        new("room-b", "Room B")
    ];
    private DateOnly date = DateOnly.FromDateTime(DateTime.Today);
}

Which to use

BbEventCalendar stays as it is — a month, week and agenda overview, generic over your own model, for when you want dates rather than hours. Reach for BbScheduler when you need an hour grid, resources, or drag and resize.

Thanks for the request; it shaped what the Scheduler had to do. Both components are in 4.0.0, now on NuGet.