bitfoundation · msynk · Jun 13, 2026
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/FullCalendar/BitFcCalendarBody.razor b/src/BlazorUI/Bit.BlazorUI.Extras/Components/FullCalendar/BitFcCalendarBody.razor
@@ -0,0 +1,77 @@
+@namespace Bit.BlazorUI
+@implements IDisposable
+
+<div class="bfc-body" @key="(State.Mode, State.View)">
+    @if (State.Mode == BitFullCalendarMode.Timeline)
+    {
+        switch (State.View)
+        {
+            case BitFullCalendarView.Day:
+                <BitFcTimelineDayView Events="State.Events.ToList()" EventTemplate="TimelineEventTemplate" />
+                break;
+            case BitFullCalendarView.Week:
+                <BitFcTimelineWeekView Events="State.Events.ToList()" EventTemplate="TimelineEventTemplate" />
+                break;
+            case BitFullCalendarView.Month:
+                <BitFcTimelineMonthView Events="State.Events.ToList()" EventTemplate="TimelineEventTemplate" />
+                break;
+            default:
+                <BitFcTimelineWeekView Events="State.Events.ToList()" EventTemplate="TimelineEventTemplate" />
+                break;
+        }
+    }
+    else
+    {
+        switch (State.View)
+        {
+            case BitFullCalendarView.Month:
+                <BitFcCalendarMonthView SingleDayEvents="_singleDayEvents" MultiDayEvents="_multiDayEvents" EventTemplate="MonthEventTemplate" />
+                break;
+            case BitFullCalendarView.Week:
+                <BitFcCalendarWeekView SingleDayEvents="_singleDayEvents" MultiDayEvents="_multiDayEvents" EventTemplate="WeekEventTemplate" />
+                break;
+            case BitFullCalendarView.Day:
+                <BitFcCalendarDayView SingleDayEvents="_singleDayEvents" MultiDayEvents="_multiDayEvents" EventTemplate="DayEventTemplate" />
+                break;
+            case BitFullCalendarView.Year:
+                <BitFcCalendarYearView SingleDayEvents="_singleDayEvents" MultiDayEvents="_multiDayEvents" />
+                break;
+            case BitFullCalendarView.Agenda:
+                <BitFcAgendaEvents />
+                break;
+        }
+    }
+</div>
+
+@code {
+    [CascadingParameter] public BitFullCalendarState State { get; set; } = default!;
+
+    [Parameter] public RenderFragment<BitFullCalendarEvent>? MonthEventTemplate { get; set; }
+    [Parameter] public RenderFragment<BitFullCalendarEvent>? WeekEventTemplate { get; set; }
+    [Parameter] public RenderFragment<BitFullCalendarEvent>? DayEventTemplate { get; set; }
+    [Parameter] public RenderFragment<BitFullCalendarEvent>? TimelineEventTemplate { get; set; }
+
+    private List<BitFullCalendarEvent> _singleDayEvents = [];
+    private List<BitFullCalendarEvent> _multiDayEvents = [];
+
+    protected override void OnInitialized()
+    {
+        State.OnStateChanged += Refresh;
+        ComputeEvents();
+    }
+
+    private void Refresh()
+    {
+        ComputeEvents();
+        InvokeAsync(StateHasChanged);
+    }
+
+    private void ComputeEvents()
+    {
+        _singleDayEvents = State.Events.Where(e => e.IsSingleDay).ToList();
+        _multiDayEvents = State.Events.Where(e => e.IsMultiDay).ToList();
+    }
+
+    public void Dispose() => State.OnStateChanged -= Refresh;
+}
+
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/FullCalendar/BitFcCalendarToast.razor b/src/BlazorUI/Bit.BlazorUI.Extras/Components/FullCalendar/BitFcCalendarToast.razor
@@ -0,0 +1,38 @@
+@namespace Bit.BlazorUI
+
+<div class="bfc-toast-container">
+    @foreach (var toast in _toasts)
+    {
+        <div class="bfc-toast @(toast.IsError ? "error" : "success")">
+            @toast.Message
+        </div>
+    }
+</div>
+
+@code {
+    private readonly List<ToastItem> _toasts = [];
+    private int _nextId;
+
+    public void Show(string message, bool isError = false)
+    {
+        var item = new ToastItem { Id = _nextId++, Message = message, IsError = isError };
+        _toasts.Add(item);
+        StateHasChanged();
+        _ = RemoveAfterDelay(item.Id);
+    }
+
+    private async Task RemoveAfterDelay(int id)
+    {
+        await Task.Delay(3000);
+        _toasts.RemoveAll(t => t.Id == id);
+        await InvokeAsync(StateHasChanged);
+    }
+
+    private class ToastItem
+    {
+        public int Id { get; set; }
+        public string Message { get; set; } = "";
+        public bool IsError { get; set; }
+    }
+}
+
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/FullCalendar/BitFullCalendar.fluent.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Components/FullCalendar/BitFullCalendar.fluent.scss
@@ -0,0 +1,79 @@
+/* Blazor Full Calendar v-0.8.0 */
+
+/* Fluent-inspired tokens (Fluent 2 / WinUI-style neutrals + brand). Scoped to .bfc-theme-fluent on .bfc-root. */
+
+.bfc-root.bfc-theme-fluent {
+    font-family: "Segoe UI Variable", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
+    --bfc-bg: #ffffff;
+    --bfc-bg-secondary: #f5f5f5;
+    --bfc-bg-hover: #f0f0f0;
+    --bfc-border: #e1dfdd;
+    --bfc-text: #242424;
+    --bfc-text-secondary: #616161;
+    --bfc-text-muted: #808080;
+    --bfc-primary: #0f6cbd;
+    --bfc-primary-hover: #115ea3;
+    --bfc-primary-text: #ffffff;
+    --bfc-danger: #c50f1f;
+    --bfc-danger-hover: #a4262c;
+    --bfc-radius: 4px;
+    --bfc-radius-sm: 4px;
+    --bfc-shadow: 0 0.3px 0.9px rgba(0, 0, 0, 0.1), 0 1.6px 3.6px rgba(0, 0, 0, 0.07);
+    --bfc-shadow-lg: 0 0.6px 1.8px rgba(0, 0, 0, 0.11), 0 3.2px 7.2px rgba(0, 0, 0, 0.1);
+    --bfc-hour-height: 96px;
+    --bfc-timeline-color: #d13438;
+    --bfc-resize-ring: rgba(15, 108, 189, 0.65);
+    --bfc-resize-glow: rgba(15, 108, 189, 0.2);
+    --bfc-resize-preview-bg: rgba(255, 255, 255, 0.97);
+    --bfc-resize-preview-border: rgba(15, 108, 189, 0.45);
+    --bfc-resize-handle-line: #0f6cbd;
+}
+
+.bfc-root.bfc-theme-fluent.bfc-dark {
+    --bfc-bg: #292929;
+    --bfc-bg-secondary: #323130;
+    --bfc-bg-hover: #3b3a39;
+    --bfc-border: #605e5c;
+    --bfc-text: #ffffff;
+    --bfc-text-secondary: #d1d1d1;
+    --bfc-text-muted: #a19f9d;
+    --bfc-primary: #479ef5;
+    --bfc-primary-hover: #62abf5;
+    --bfc-primary-text: #ffffff;
+    --bfc-danger: #f1707b;
+    --bfc-danger-hover: #d13438;
+    --bfc-shadow: 0 0.3px 0.9px rgba(0, 0, 0, 0.35), 0 1.6px 3.6px rgba(0, 0, 0, 0.28);
+    --bfc-shadow-lg: 0 0.6px 1.8px rgba(0, 0, 0, 0.4), 0 3.2px 7.2px rgba(0, 0, 0, 0.32);
+    --bfc-timeline-color: #ff99a4;
+    --bfc-resize-ring: rgba(71, 158, 245, 0.85);
+    --bfc-resize-glow: rgba(71, 158, 245, 0.32);
+    --bfc-resize-preview-bg: rgba(50, 49, 48, 0.97);
+    --bfc-resize-preview-border: rgba(71, 158, 245, 0.55);
+    --bfc-resize-handle-line: #479ef5;
+}
+
+/* Event chips: slightly softer contrast in Fluent light mode by mixing the per-event colour
+   (--bfc-evt-color, set inline from BitFullCalendarColorOption.Value) with the surface. */
+.bfc-root.bfc-theme-fluent:not(.bfc-dark) .bfc-color {
+    background: color-mix(in srgb, var(--bfc-evt-color, #0f6cbd) 14%, var(--bfc-bg, #ffffff));
+    color: color-mix(in srgb, var(--bfc-evt-color, #0f6cbd) 78%, #1f2937);
+    border-color: color-mix(in srgb, var(--bfc-evt-color, #0f6cbd) 28%, var(--bfc-bg, #ffffff));
+}
+
+.bfc-root.bfc-theme-fluent.bfc-dark .bfc-color {
+    background: color-mix(in srgb, var(--bfc-evt-color, #479ef5) 26%, #0b0f19);
+    color: color-mix(in srgb, var(--bfc-evt-color, #479ef5) 70%, #f9fafb);
+    border-color: color-mix(in srgb, var(--bfc-evt-color, #479ef5) 48%, #0b0f19);
+}
+
+.bfc-root.bfc-theme-fluent:not(.bfc-dark) .bfc-week-mobile-warning {
+    background: #fff4ce;
+    color: #8f6f00;
+    border-color: #ffe69d;
+}
+
+.bfc-root.bfc-theme-fluent.bfc-dark .bfc-week-mobile-warning {
+    background: #3b2f0a;
+    color: #ffe69d;
+    border-color: #6a4b16;
+}