diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/FullCalendar/BitFcCalendarToast.razor.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/FullCalendar/BitFcCalendarToast.razor.cs
new file mode 100644
index 0000000000..0903803adc
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/FullCalendar/BitFcCalendarToast.razor.cs
@@ -0,0 +1,126 @@
+namespace Bit.BlazorUI;
+
+public partial class BitFcCalendarToast : IAsyncDisposable
+{
+ private readonly List _toasts = [];
+ private readonly List _removalTokens = [];
+ private readonly object _removalTokensLock = new();
+ private int _nextId;
+
+ public void Show(string message, bool isError = false)
+ {
+ // Allocate the id atomically: Show can be invoked off the renderer thread (the list mutation
+ // is marshalled below, but the id is assigned here on the caller's thread), so a plain
+ // _nextId++ could hand out duplicate ids under concurrent calls and break RemoveAfterDelay's
+ // per-id removal.
+ var item = new ToastItem { Id = Interlocked.Increment(ref _nextId), Message = message, IsError = isError };
+
+ var cts = new CancellationTokenSource();
+ // Capture the token up front, before DisposeAsync (which can run concurrently and dispose
+ // the source) gets a chance to. Reading cts.Token later inside RemoveAfterDelay would risk
+ // an ObjectDisposedException if the component is torn down before the delay is queued.
+ var token = cts.Token;
+ lock (_removalTokensLock)
+ {
+ _removalTokens.Add(cts);
+ }
+
+ // Marshal the list mutation and render onto the renderer's dispatcher so the whole toast
+ // lifecycle (add here, remove in RemoveAfterDelay) stays dispatcher-safe even when Show is
+ // invoked from a non-renderer thread.
+ _ = InvokeAsync(() =>
+ {
+ // DisposeAsync cancels every queued token; if it ran between scheduling this callback
+ // and it executing, bail out before touching _toasts/StateHasChanged so no UI work (or
+ // RemoveAfterDelay timer) starts after the component has been torn down.
+ if (token.IsCancellationRequested)
+ return;
+
+ _toasts.Add(item);
+ StateHasChanged();
+ // Start the expiration timer only after the toast has actually been queued into the UI,
+ // so the 3s lifetime begins from when it becomes visible rather than from when Show was
+ // scheduled (which may run on a non-renderer thread before the add is dispatched).
+ _ = RemoveAfterDelay(item.Id, cts, token);
+ });
+ }
+
+ private async Task RemoveAfterDelay(int id, CancellationTokenSource cts, CancellationToken token)
+ {
+ try
+ {
+ try
+ {
+ await Task.Delay(3000, token);
+ }
+ catch (OperationCanceledException)
+ {
+ return;
+ }
+
+ // Final cancellation check before the dispatcher hop: DisposeAsync may have cancelled the
+ // token after Task.Delay completed but before we queue the render. Bail out so _toasts and
+ // StateHasChanged are never touched once teardown has started.
+ if (token.IsCancellationRequested)
+ return;
+
+ // Mutate the toast list on the renderer's dispatcher to avoid racing the template's foreach.
+ await InvokeAsync(() =>
+ {
+ // Re-check inside the dispatcher callback: DisposeAsync can cancel after the check
+ // above but before this lambda runs, so no-op once teardown has begun instead of
+ // mutating _toasts / calling StateHasChanged on a disposed component.
+ if (token.IsCancellationRequested)
+ return;
+
+ _toasts.RemoveAll(t => t.Id == id);
+ StateHasChanged();
+ });
+ }
+ finally
+ {
+ // Drop the token as soon as its timer finishes (or is cancelled) so _removalTokens
+ // doesn't grow unbounded on long-lived pages that show many toasts.
+ bool removed;
+ lock (_removalTokensLock)
+ {
+ removed = _removalTokens.Remove(cts);
+ }
+ if (removed)
+ cts.Dispose();
+ }
+ }
+
+ public ValueTask DisposeAsync()
+ {
+ // Snapshot under the lock: RemoveAfterDelay also removes/disposes tokens as their timers
+ // complete, so reading the live list here could race with that cleanup.
+ CancellationTokenSource[] tokens;
+ lock (_removalTokensLock)
+ {
+ tokens = _removalTokens.ToArray();
+ _removalTokens.Clear();
+ }
+
+ foreach (var cts in tokens)
+ {
+ try
+ {
+ cts.Cancel();
+ cts.Dispose();
+ }
+ catch (ObjectDisposedException)
+ {
+ // Already disposed by RemoveAfterDelay's cleanup; nothing to do.
+ }
+ }
+ return ValueTask.CompletedTask;
+ }
+
+ 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.razor b/src/BlazorUI/Bit.BlazorUI.Extras/Components/FullCalendar/BitFullCalendar.razor
new file mode 100644
index 0000000000..90b25dcac9
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/FullCalendar/BitFullCalendar.razor
@@ -0,0 +1,12 @@
+@namespace Bit.BlazorUI
+
+
+
+
+
+
+
+
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/FullCalendar/BitFullCalendar.razor.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/FullCalendar/BitFullCalendar.razor.cs
new file mode 100644
index 0000000000..d588ef2d3e
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/FullCalendar/BitFullCalendar.razor.cs
@@ -0,0 +1,451 @@
+using System.Globalization;
+
+namespace Bit.BlazorUI;
+
+public partial class BitFullCalendar : IDisposable
+{
+ ///
+ /// Culture for the calendar. Accepts any CultureInfo, e.g. new CultureInfo("fa-IR").
+ /// NOTE: do NOT use this parameter when the component is rendered with
+ /// @rendermode="InteractiveServer" - CultureInfo is not JSON-serializable.
+ /// Use instead for server-interactive scenarios.
+ ///
+ [Parameter] public CultureInfo? Culture { get; set; }
+
+ ///
+ /// Culture name string (e.g. "fa-IR", "ar-SA", "fr-FR").
+ /// Preferred over when using @rendermode="InteractiveServer"
+ /// because plain strings are safely serialized by Blazor's parameter persistence.
+ /// When both are supplied, CultureName takes precedence.
+ /// Blazor WebAssembly hosts must set BlazorWebAssemblyLoadAllGlobalizationData to
+ /// true (or load a custom ICU shard) for cultures outside the default EFIGS/CJK shards.
+ ///
+ [Parameter] public string? CultureName { get; set; }
+
+ ///
+ /// The currently selected (anchor) date of the calendar that determines the visible date range. (two-way bound)
+ ///
+ /// When set, the calendar navigates to the supplied date. User interactions (prev/next/today navigation,
+ /// selecting a day or a month) update this value through the generated DateChanged callback. Use
+ /// to provide an initial value without taking over control of the date.
+ ///
+ ///
+ [Parameter, TwoWayBound] public DateTime Date { get; set; } = DateTime.Today;
+
+ ///
+ /// Optional template for customizing event rendering in the day view.
+ /// When provided, replaces the default event card content inside the time-grid blocks.
+ ///
+ [Parameter] public RenderFragment? DayEventTemplate { get; set; }
+
+ ///
+ /// The default selected date to be initially used when the parameter is not set.
+ /// Determines the date range the calendar shows on first render. Applied once during initialization;
+ /// afterwards the active date is driven by user interaction or by the two-way bound parameter.
+ ///
+ [Parameter] public DateTime? DefaultDate { get; set; }
+
+ ///
+ /// The default layout mode to be initially used when the parameter is not set.
+ /// shows the standard day/week/month/year/agenda views.
+ /// switches to the resource × time layout (day, week, month)
+ /// and requires to contain at least one entry; otherwise the Timeline tab
+ /// and mode have no effect. Applied once during initialization; afterwards the active mode is driven
+ /// by user interaction or by the two-way bound parameter.
+ ///
+ [Parameter] public BitFullCalendarMode? DefaultMode { get; set; }
+
+ ///
+ /// The default view to be initially used when the parameter is not set.
+ /// Controls how the date range and events are laid out (day, week, month, year, or agenda).
+ /// Applied once during initialization; afterwards the active view is driven by user
+ /// interaction or by the two-way bound parameter.
+ ///
+ [Parameter] public BitFullCalendarView? DefaultView { get; set; }
+
+ ///
+ /// Ordered list of event colors shown in pickers, filters, agenda headers, badges, and bullets.
+ /// Each entry has its own (matched against
+ /// ),
+ /// (the display name shown verbatim - for example "SkyBlue"), and
+ /// (any CSS color value used for swatches and badges).
+ /// When null or empty, is used.
+ ///
+ [Parameter] public IReadOnlyList? EventColorOptions { get; set; }
+
+ ///
+ /// Events displayed in the calendar. Assign a list from parent state; updates are synced on each
+ /// render when the reference or contents change. User-driven add, edit, and delete actions are
+ /// reported through - update this list (or your backing store) in the handler
+ /// to keep the UI in sync.
+ ///
+ [Parameter] public List? Events { get; set; }
+
+ ///
+ /// When true, the built-in color and attendee filter dropdowns are hidden from the calendar header.
+ /// Consumers can provide their own external filter UI and pass pre-filtered events to the calendar.
+ ///
+ [Parameter] public bool HideFilters { get; set; }
+
+ ///
+ /// When true, the built-in settings gear button is hidden from the calendar header.
+ /// Consumers can still drive settings programmatically through the object.
+ ///
+ [Parameter] public bool HideSettings { get; set; }
+
+ ///
+ /// The currently active layout mode of the calendar ( or
+ /// ). (two-way bound)
+ ///
+ /// When set, the calendar reflects the supplied mode. Timeline mode requires
+ /// to contain at least one entry; otherwise it falls back to .
+ /// User interactions (mode tabs) update this value through the generated ModeChanged callback.
+ /// Use to provide an initial value without taking over control of the mode.
+ ///
+ ///
+ [Parameter, TwoWayBound] public BitFullCalendarMode Mode { get; set; } = BitFullCalendarMode.Event;
+
+ ///
+ /// Optional template for customizing event rendering in the month view.
+ /// When provided, replaces the default event badge content inside month grid cells.
+ ///
+ [Parameter] public RenderFragment? MonthEventTemplate { get; set; }
+
+ ///
+ /// When assigned, the built-in add dialog is suppressed. The callback receives a draft
+ /// with and
+ /// set from the interaction (for example the clicked day/week slot);
+ /// is empty and other fields are left at defaults.
+ /// Consumers should show their own UI and
+ /// raise (or mutate bound to parent state) after persisting changes.
+ ///
+ [Parameter] public EventCallback OnAddClick { get; set; }
+
+ ///
+ /// Raised when a user adds, edits, or deletes an event in the calendar UI.
+ ///
+ [Parameter] public EventCallback OnChange { get; set; }
+
+ ///
+ /// Raised when the visible date range changes - for example when the user navigates
+ /// with prev/next/today buttons or switches views. The callback receives the inclusive
+ /// start and end dates of the new range together with the active view.
+ ///
+ [Parameter] public EventCallback OnDateChange { get; set; }
+
+ ///
+ /// When assigned, the built-in event details dialog is suppressed when an event is clicked.
+ /// The callback receives the clicked . Consumers should
+ /// show their own event details UI. This applies to all views (day, week, month, agenda) and
+ /// to multi-day event rows and event list dialogs.
+ ///
+ [Parameter] public EventCallback OnEventClick { get; set; }
+
+ ///
+ /// Raised when the active layout mode changes - for example when the user switches between the
+ /// Event and Timeline tabs. The callback receives the new .
+ ///
+ [Parameter] public EventCallback OnModeChange { get; set; }
+
+ ///
+ /// Raised when the active view changes - for example when the user selects a view tab or
+ /// navigates from the year overview into a month. The callback receives the new .
+ ///
+ [Parameter] public EventCallback OnViewChange { get; set; }
+
+ ///
+ /// Resources displayed as rows in the resource timeline view. When null or empty,
+ /// the resource timeline tab is hidden from the header. Each event's
+ /// is matched against the resource Id.
+ ///
+ [Parameter] public IReadOnlyList? Resources { get; set; }
+
+ ///
+ /// Configuration settings controlling initial calendar preferences
+ /// such as dark mode, time format, badge variant, day start hour, and agenda grouping.
+ /// Values are applied when the component initializes or when a new instance is assigned.
+ ///
+ [Parameter] public BitFullCalendarSettings Settings { get; set; } = new();
+
+ ///
+ /// Localized strings for calendar UI labels, buttons, dialogs, filters, and accessibility text.
+ /// Defaults to English; override individual properties on a
+ /// instance to localize the component without replacing built-in dialogs.
+ ///
+ [Parameter] public BitFullCalendarTexts Texts { get; set; } = new();
+
+ ///
+ /// Optional template for customizing event rendering in the resource timeline view.
+ /// When provided, replaces the default event card content inside the timeline blocks.
+ ///
+ [Parameter] public RenderFragment? TimelineEventTemplate { get; set; }
+
+ ///
+ /// The currently active view of the calendar (day, week, month, year, or agenda). (two-way bound)
+ ///
+ /// When set, the calendar reflects the supplied view. User interactions (view tabs, year navigation)
+ /// update this value through the generated ViewChanged callback. Use
+ /// to provide an initial value without taking over control of the view.
+ ///
+ ///
+ [Parameter, TwoWayBound] public BitFullCalendarView View { get; set; } = BitFullCalendarView.Month;
+
+ ///
+ /// Optional template for customizing event rendering in the week view.
+ /// When provided, replaces the default event card content inside the time-grid blocks.
+ ///
+ [Parameter] public RenderFragment? WeekEventTemplate { get; set; }
+
+ public BitFullCalendarState State { get; set; } = new();
+ private BitFullCalendarChangeNotifier _changeNotifier = default!;
+ private BitFullCalendarColorScheme _colorScheme = new(null);
+ private BitFullCalendarSettings? _appliedSettings;
+ private bool _defaultViewApplied;
+ private bool _defaultModeApplied;
+ private bool _defaultDateApplied;
+ // The last view/mode/date the component reconciled with the bound parameters. Used to detect
+ // genuine (user-driven) state changes so OnViewChange/OnModeChange are not raised for
+ // parameter- or default-driven updates and the bound parameters stay in sync.
+ private BitFullCalendarView _lastView;
+ private BitFullCalendarMode _lastMode;
+ private DateTime _lastDate;
+ // True while OnParametersSet pushes parameter/default values into the state. Suppresses the
+ // OnViewChange/OnModeChange callbacks for those echoes while still keeping the bound
+ // View/Mode/Date parameters in sync with the resulting state.
+ private bool _applyingParameters;
+ // While applying parameters, several state setters (SetCulture, SetMode/SetView, SetSelectedDate)
+ // can each emit a date-range change in one pass. We coalesce them here and raise only the final
+ // resolved range to consumers once ApplyBoundState has finished, instead of forwarding every
+ // intermediate range.
+ private BitFullCalendarDateChangeEventArgs? _pendingDateChange;
+
+ private BitCascadingValueList BuildCascadingValues() => new()
+ {
+ { State },
+ { Texts },
+ { _changeNotifier },
+ { _colorScheme },
+ { Settings },
+ { HideFilters, "HideFilters" },
+ { HideSettings, "HideSettings" },
+ { OnAddClick, "OnAddClick" },
+ { OnEventClick, "OnEventClick" },
+ };
+
+ private CultureInfo ResolveCulture()
+ {
+ if (CultureName is { Length: > 0 } name)
+ {
+ try
+ {
+ return new CultureInfo(name);
+ }
+ catch (CultureNotFoundException)
+ {
+ // Invalid CultureName supplied; fall back to the explicit Culture or the current UI culture.
+ }
+ }
+
+ return Culture ?? CultureInfo.CurrentUICulture;
+ }
+
+ protected override void OnInitialized()
+ {
+ // Settings/Texts have default instances but can be set to null when bound externally.
+ // Normalize before any downstream use (ApplySettings, cascaded Texts) to avoid NREs.
+ Settings ??= new();
+ Texts ??= new();
+
+ State.Initialize(Events ?? [], ResolveCulture());
+ ApplySettings();
+ _changeNotifier = new BitFullCalendarChangeNotifier(State, args => OnChange.InvokeAsync(args));
+ State.OnStateChanged += HandleStateChanged;
+ State.OnDateRangeChanged += HandleDateRangeChanged;
+
+ // Seed the reconciliation baseline so the first genuine (user-driven) view/mode/date change is
+ // detected correctly and parameter/default-driven initialization does not raise callbacks.
+ _lastView = State.View;
+ _lastMode = State.Mode;
+ _lastDate = State.SelectedDate;
+ }
+
+ protected override void OnParametersSet()
+ {
+ // A null Settings/Texts can arrive from external binding, overriding the default instances;
+ // restore valid defaults before ApplySettings and the cascaded Texts are consumed downstream.
+ Settings ??= new();
+ Texts ??= new();
+
+ // Mark the parameter-application window so state changes triggered below (events, resources,
+ // view, mode, date) keep the bound View/Mode/Date parameters in sync without raising
+ // OnViewChange/OnModeChange.
+ _applyingParameters = true;
+ try
+ {
+ _colorScheme = new BitFullCalendarColorScheme(EventColorOptions);
+ var resolved = ResolveCulture();
+ // Compare the calendar identity in addition to the culture name: two cultures can share
+ // the same Name but resolve to different calendars (for example a culture whose calendar
+ // was switched), and a name-only check would skip the required SetCulture when only the
+ // calendar changed - leaving the calendar rendering against the previous calendar system.
+ if (!string.Equals(resolved.Name, State.Culture.Name, StringComparison.Ordinal)
+ || resolved.Calendar.GetType() != State.Culture.Calendar.GetType())
+ State.SetCulture(resolved);
+
+ if (Events is not null)
+ State.SyncEvents(Events);
+ else
+ // Events was cleared (set back to null); drop any previously loaded events so the
+ // calendar display reflects the empty state instead of keeping stale items.
+ State.SyncEvents([]);
+
+ State.SyncResources(Resources);
+
+ // Apply the view, mode, and date after resources are synced: Timeline mode requires
+ // Resources to be populated to take effect.
+ ApplyBoundState();
+
+ ApplySettings();
+ }
+ finally
+ {
+ _applyingParameters = false;
+ }
+
+ // Raise the single coalesced date-range change (if any) now that all parameter-driven
+ // setters have run, so consumers see only the final resolved range rather than each
+ // intermediate one produced while applying parameters.
+ if (_pendingDateChange is { } pending)
+ {
+ _pendingDateChange = null;
+ InvokeAsync(() => OnDateChange.InvokeAsync(pending));
+ }
+ }
+
+ private void ApplyBoundState()
+ {
+ // Mode is applied before View because entering Timeline mode clamps the available views.
+ if (ModeHasBeenSet)
+ {
+ // Controlled: keep the state aligned with the bound Mode on every parameter change.
+ // State.SetMode falls back to Event when Timeline is requested without resources.
+ State.SetMode(Mode);
+ }
+ else if (!_defaultModeApplied && DefaultMode.HasValue)
+ {
+ // Timeline default needs at least one resource to take effect; defer until resources are
+ // available so a later Resources assignment is not permanently ignored.
+ var canApplyDefaultMode = DefaultMode.Value != BitFullCalendarMode.Timeline
+ || Resources is { Count: > 0 };
+ if (canApplyDefaultMode)
+ {
+ _defaultModeApplied = true;
+ State.SetMode(DefaultMode.Value);
+ }
+ }
+
+ if (ViewHasBeenSet)
+ {
+ // Controlled: keep the state aligned with the bound View on every parameter change.
+ State.SetView(View);
+ }
+ else if (!_defaultViewApplied && DefaultView.HasValue)
+ {
+ _defaultViewApplied = true;
+ State.SetView(DefaultView.Value);
+ }
+
+ if (DateHasBeenSet)
+ {
+ // Controlled: keep the state aligned with the bound Date. SetSelectedDate does not
+ // short-circuit on equal values, so guard against redundant navigation/re-render loops.
+ if (State.SelectedDate != Date)
+ State.SetSelectedDate(Date);
+ }
+ else if (!_defaultDateApplied && DefaultDate.HasValue)
+ {
+ _defaultDateApplied = true;
+ if (State.SelectedDate != DefaultDate.Value)
+ State.SetSelectedDate(DefaultDate.Value);
+ }
+ }
+
+ private void ApplySettings()
+ {
+ // Sync each individual value rather than short-circuiting on a reference comparison: the same
+ // BitFullCalendarSettings instance can be mutated in place by the consumer, so comparing the
+ // reference would silently ignore those updates. The State.Set* methods each guard against
+ // no-op changes, so re-applying unchanged values is cheap and raises no spurious notifications.
+ _appliedSettings = Settings;
+ State.SetUse24HourFormat(Settings.Use24HourFormat);
+ State.SetBadgeVariant(Settings.BadgeVariant);
+ State.SetStartOfDayHour(Settings.StartOfDayHour);
+ State.SetAgendaModeGroupBy(Settings.AgendaModeGroupBy);
+ State.SetEventLayout(Settings.EventLayout);
+ State.SetShowDayViewCalendar(Settings.ShowDayViewCalendar);
+ }
+
+ private void HandleStateChanged()
+ {
+ // Capture the flag now: the queued callback may run after OnParametersSet's finally block
+ // has reset _applyingParameters to false, which would otherwise wrongly raise events.
+ var applyingParameters = _applyingParameters;
+ InvokeAsync(async () =>
+ {
+ await ReconcileBoundState(raiseEvents: !applyingParameters);
+ StateHasChanged();
+ });
+ }
+
+ // Pushes the current state view/mode/date back into the two-way bound parameters when they change.
+ // When raiseEvents is true (user-driven change) the OnViewChange/OnModeChange callbacks are
+ // invoked; parameter- and default-driven echoes pass false to keep the bindings in sync silently.
+ // Date changes are surfaced separately through OnDateChange (via the date-range channel), so no
+ // additional event is raised here for the date.
+ private async Task ReconcileBoundState(bool raiseEvents)
+ {
+ if (!EqualityComparer.Default.Equals(_lastMode, State.Mode))
+ {
+ _lastMode = State.Mode;
+ await AssignMode(State.Mode);
+ if (raiseEvents)
+ await OnModeChange.InvokeAsync(State.Mode);
+ }
+
+ if (!EqualityComparer.Default.Equals(_lastView, State.View))
+ {
+ _lastView = State.View;
+ await AssignView(State.View);
+ if (raiseEvents)
+ await OnViewChange.InvokeAsync(State.View);
+ }
+
+ if (_lastDate != State.SelectedDate)
+ {
+ _lastDate = State.SelectedDate;
+ await AssignDate(State.SelectedDate);
+ }
+ }
+
+ private void HandleDateRangeChanged(BitFullCalendarDateChangeEventArgs args)
+ {
+ // While applying parameters, coalesce: keep only the latest range and let OnParametersSet
+ // raise it once after ApplyBoundState finishes. Outside that window (user-driven navigation,
+ // view switches) forward each change immediately as before.
+ if (_applyingParameters)
+ {
+ _pendingDateChange = args;
+ return;
+ }
+
+ InvokeAsync(() => OnDateChange.InvokeAsync(args));
+ }
+
+
+
+ public void Dispose()
+ {
+ State.OnStateChanged -= HandleStateChanged;
+ State.OnDateRangeChanged -= HandleDateRangeChanged;
+ }
+}
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/FullCalendar/BitFullCalendar.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Components/FullCalendar/BitFullCalendar.scss
new file mode 100644
index 0000000000..bcc3d186f6
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/FullCalendar/BitFullCalendar.scss
@@ -0,0 +1,2637 @@
+/* BitFullCalendar */
+
+@import "../../../Bit.BlazorUI/Styles/functions.scss";
+
+/* ===== CSS Variables =====
+ The calendar maps its internal --bit-bfc-* custom properties onto the Bit BlazorUI theme tokens
+ (--bit-clr-*, shape and shadow tokens). Because those tokens are redefined by the active Bit
+ theme (including dark mode via :root[bit-theme="dark"]), the calendar follows the application
+ theme automatically without any component-level theme or dark-mode switch. */
+.bit-bfc {
+ --bit-bfc-bg: #{$clr-bg-pri};
+ --bit-bfc-bg-secondary: #{$clr-bg-sec};
+ --bit-bfc-bg-hover: #{$clr-bg-pri-hover};
+ --bit-bfc-border: #{$clr-brd-ter};
+ --bit-bfc-text: #{$clr-fg-pri};
+ --bit-bfc-text-secondary: #{$clr-fg-sec};
+ --bit-bfc-text-muted: #{$clr-fg-ter};
+ --bit-bfc-primary: #{$clr-pri};
+ --bit-bfc-primary-hover: #{$clr-pri-hover};
+ --bit-bfc-primary-text: #{$clr-pri-text};
+ --bit-bfc-danger: #{$clr-err};
+ --bit-bfc-danger-hover: #{$clr-err-hover};
+ --bit-bfc-radius: #{$shp-border-radius};
+ --bit-bfc-radius-sm: #{$shp-border-radius};
+ --bit-bfc-shadow: #{$box-shadow-sm};
+ --bit-bfc-shadow-lg: #{$box-shadow-md};
+ --bit-bfc-hour-height: 96px;
+ --bit-bfc-height: 600px;
+ --bit-bfc-timeline-color: #{$clr-err};
+ --bit-bfc-resize-ring: color-mix(in srgb, #{$clr-pri} 65%, transparent);
+ --bit-bfc-resize-glow: color-mix(in srgb, #{$clr-pri} 22%, transparent);
+ --bit-bfc-resize-preview-bg: #{$clr-bg-pri};
+ --bit-bfc-resize-preview-border: color-mix(in srgb, #{$clr-pri} 45%, transparent);
+ --bit-bfc-resize-handle-line: #{$clr-pri};
+}
+
+/* ===== Base ===== */
+.bit-bfc {
+ font-family: #{$tg-font-family};
+ background: var(--bit-bfc-bg);
+ color: var(--bit-bfc-text);
+ border: 1px solid var(--bit-bfc-border);
+ border-radius: var(--bit-bfc-radius);
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ /* A definite default height keeps the day/week time grids from expanding to their full
+ (24 * hour-height) intrinsic height when the host doesn't constrain the calendar. This makes
+ the views scrollable (so "scroll to start of day" works) out of the box. Override via the
+ --bit-bfc-height custom property, e.g. style="--bit-bfc-height: 100%" inside a sized container. */
+ height: var(--bit-bfc-height, 600px);
+}
+
+/* ===== Header ===== */
+.bit-bfc-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 12px 16px;
+ border-bottom: 1px solid var(--bit-bfc-border);
+ background: var(--bit-bfc-bg);
+ flex-wrap: wrap;
+ gap: 8px;
+}
+
+.bit-bfc-header-left,
+.bit-bfc-header-center,
+.bit-bfc-header-right {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.bit-bfc-header-left {
+ flex: 1;
+}
+
+.bit-bfc-header-right {
+ flex: 1;
+ justify-content: flex-end;
+}
+
+/* ===== Buttons ===== */
+.bit-bfc-btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 6px;
+ padding: 6px 12px;
+ border: 1px solid var(--bit-bfc-border);
+ border-radius: var(--bit-bfc-radius-sm);
+ background: var(--bit-bfc-bg);
+ color: var(--bit-bfc-text);
+ font-size: 13px;
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.15s ease;
+ white-space: nowrap;
+ line-height: 1.817;
+}
+
+.bit-bfc-btn:hover {
+ background: var(--bit-bfc-bg-hover);
+}
+
+.bit-bfc-btn-primary {
+ background: var(--bit-bfc-primary);
+ color: var(--bit-bfc-primary-text);
+ border-color: var(--bit-bfc-primary);
+}
+
+.bit-bfc-btn-primary:hover {
+ background: var(--bit-bfc-primary-hover);
+}
+
+.bit-bfc-btn-danger {
+ background: var(--bit-bfc-danger);
+ color: #fff;
+ border-color: var(--bit-bfc-danger);
+}
+
+.bit-bfc-btn-danger:hover {
+ background: var(--bit-bfc-danger-hover);
+}
+
+.bit-bfc-btn-icon {
+ padding: 6px;
+ width: 32px;
+ height: 32px;
+}
+
+.bit-bfc-btn-sm {
+ padding: 4px 8px;
+ font-size: 12px;
+}
+
+.bit-bfc-btn-group {
+ display: inline-flex;
+ border: 1px solid var(--bit-bfc-border);
+ border-radius: var(--bit-bfc-radius-sm);
+ overflow: hidden;
+}
+
+.bit-bfc-btn-group .bit-bfc-btn {
+ border: none;
+ border-radius: 0;
+ border-inline-end: 1px solid var(--bit-bfc-border);
+}
+
+.bit-bfc-btn-group .bit-bfc-btn:last-child {
+ border-inline-end: none;
+}
+
+.bit-bfc-btn-group .bit-bfc-btn.active {
+ background: var(--bit-bfc-primary);
+ color: var(--bit-bfc-primary-text);
+}
+
+/* ===== View Tabs ===== */
+.bit-bfc-view-tabs {
+ display: inline-flex;
+ background: var(--bit-bfc-bg-secondary);
+ border-radius: var(--bit-bfc-radius-sm);
+ padding: 2px;
+ gap: 2px;
+}
+
+.bit-bfc-view-tab {
+ padding: 5px 12px;
+ border: none;
+ border-radius: 4px;
+ background: transparent;
+ color: var(--bit-bfc-text-secondary);
+ font-size: 13px;
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.15s ease;
+}
+
+.bit-bfc-view-tab:hover {
+ color: var(--bit-bfc-text);
+ background: var(--bit-bfc-bg-hover);
+}
+
+.bit-bfc-view-tab.active {
+ background: var(--bit-bfc-bg);
+ color: var(--bit-bfc-text);
+ box-shadow: var(--bit-bfc-shadow);
+}
+
+/* ===== Calendar Body ===== */
+.bit-bfc-body {
+ flex: 1;
+ min-height: 0;
+ overflow: hidden;
+ position: relative;
+ animation: bit-bfc-fade-in 0.2s ease;
+}
+
+@keyframes bit-bfc-fade-in {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+
+/* ===== Month View ===== */
+.bit-bfc-month {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ min-height: 0;
+ overflow-y: auto;
+}
+
+.bit-bfc-month-header {
+ display: grid;
+ grid-template-columns: repeat(7, minmax(0, 1fr));
+ border-bottom: 1px solid var(--bit-bfc-border);
+ flex-shrink: 0;
+}
+
+.bit-bfc-month-header-cell {
+ padding: 8px;
+ text-align: center;
+ font-size: 12px;
+ font-weight: 600;
+ color: var(--bit-bfc-text-secondary);
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+}
+
+.bit-bfc-month-grid {
+ display: grid;
+ grid-template-columns: repeat(7, minmax(0, 1fr));
+ flex: 0 0 auto;
+ align-content: start;
+}
+
+.bit-bfc-month-cell {
+ border-right: 1px solid var(--bit-bfc-border);
+ border-bottom: 1px solid var(--bit-bfc-border);
+ padding: 4px;
+ min-height: 100px;
+ min-width: 0;
+ position: relative;
+ cursor: pointer;
+ transition: background 0.1s;
+ overflow: clip;
+ overflow-clip-margin: 4px;
+}
+
+.bit-bfc-month-cell:hover {
+ background: var(--bit-bfc-bg-hover);
+}
+
+.bit-bfc-month-cell:nth-child(7n) {
+ border-right: none;
+}
+
+.bit-bfc-month-cell.other-month {
+ opacity: 0.4;
+}
+
+.bit-bfc-month-cell-day {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 28px;
+ height: 28px;
+ border-radius: 50%;
+ font-size: 13px;
+ font-weight: 500;
+ margin-bottom: 2px;
+}
+
+.bit-bfc-month-cell-day.today {
+ background: var(--bit-bfc-primary);
+ color: var(--bit-bfc-primary-text);
+}
+
+.bit-bfc-month-events {
+ display: flex;
+ flex-direction: column;
+ gap: 1px;
+ min-width: 0;
+ overflow: hidden;
+}
+
+.bit-bfc-month-event-slot {
+ height: 22px;
+ min-width: 0;
+ overflow: hidden;
+}
+
+.bit-bfc-month-more {
+ font-size: 11px;
+ color: var(--bit-bfc-text-secondary);
+ padding: 2px 4px;
+ cursor: pointer;
+ font-weight: 500;
+ /* Rendered as a real