+ @for (int col = 0; col < 7; col++)
+ {
+ var cell = cells[row * 7 + col];
+ var isToday = cell.Date.Date == DateTime.Today;
+ var isSelected = cell.Date.Date == State.SelectedDate.Date;
+ var cls = !cell.CurrentMonth ? "other-month" : isToday ? "today" : isSelected ? "selected" : "";
+
+
+ @cell.Day
+
+
+ }
+
+ }
+
+
+
+
+@code {
+ [CascadingParameter] public BitFullCalendarState State { get; set; } = default!;
+
+ private DateTime _displayMonth;
+
+ protected override void OnInitialized()
+ {
+ _displayMonth = State.Culture.Calendar.ToDateTime(
+ State.Culture.Calendar.GetYear(State.SelectedDate),
+ State.Culture.Calendar.GetMonth(State.SelectedDate),
+ 1, 0, 0, 0, 0);
+ }
+
+ private void PrevMonth() => _displayMonth = State.Culture.Calendar.AddMonths(_displayMonth, -1);
+ private void NextMonth() => _displayMonth = State.Culture.Calendar.AddMonths(_displayMonth, 1);
+
+ private void SelectDate(DateTime date)
+ {
+ State.SetSelectedDate(date);
+ var cal = State.Culture.Calendar;
+ _displayMonth = cal.ToDateTime(cal.GetYear(date), cal.GetMonth(date), 1, 0, 0, 0, 0);
+ }
+}
+
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/FullCalendar/Views/DayWeekView/BitFcRenderGroupedEvents.razor b/src/BlazorUI/Bit.BlazorUI.Extras/Components/FullCalendar/Views/DayWeekView/BitFcRenderGroupedEvents.razor
new file mode 100644
index 0000000000..f7cbc59388
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/FullCalendar/Views/DayWeekView/BitFcRenderGroupedEvents.razor
@@ -0,0 +1,55 @@
+@namespace Bit.BlazorUI
+
+@{
+ var inv = System.Globalization.CultureInfo.InvariantCulture;
+}
+
+@foreach (var (group, groupIndex) in GroupedEvents.Select((g, i) => (g, i)))
+{
+ @foreach (var ev in group)
+ {
+ var style = BitFullCalendarHelpers.GetEventBlockStyle(ev, Day, groupIndex, GroupedEvents.Count);
+
+ // Count lanes that actually overlap this event in time, to the left and to the right of
+ // this event's lane. Lanes that don't intersect the event's time range are ignored so a
+ // non-conflicting event keeps the full column width.
+ var leftConflicts = 0;
+ var rightConflicts = 0;
+ for (var i = 0; i < GroupedEvents.Count; i++)
+ {
+ if (i == groupIndex)
+ continue;
+
+ var otherGroup = GroupedEvents[i];
+ var conflicts = otherGroup.Any(other =>
+ ev.StartDate < other.EndDate && ev.EndDate > other.StartDate);
+ if (!conflicts)
+ continue;
+
+ if (i < groupIndex) leftConflicts++; else rightConflicts++;
+ }
+
+ var depth = leftConflicts + rightConflicts + 1;
+ var rank = leftConflicts;
+
+ // Offset each successive overlapping card by a percentage of the column width and let the
+ // card extend to the right edge so users can still see most of every card. The step is
+ // capped so even with many conflicts the narrowest card stays at least ~50% wide.
+ var step = depth > 1 ? Math.Min(20.0, 50.0 / (depth - 1)) : 0.0;
+ var left = rank * step;
+ var width = 100.0 - left;
+ var zIndex = 2 + rank;
+
+
+
+
+ }
+}
+
+@code {
+ [Parameter] public List> GroupedEvents { get; set; } = [];
+ [Parameter] public DateTime Day { get; set; }
+ [Parameter] public EventCallback OnEventSelected { get; set; }
+ [Parameter] public RenderFragment? EventTemplate { get; set; }
+}
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/FullCalendar/Views/DayWeekView/BitFcTimeColumn.razor b/src/BlazorUI/Bit.BlazorUI.Extras/Components/FullCalendar/Views/DayWeekView/BitFcTimeColumn.razor
new file mode 100644
index 0000000000..3fd73ec4a5
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/FullCalendar/Views/DayWeekView/BitFcTimeColumn.razor
@@ -0,0 +1,19 @@
+@namespace Bit.BlazorUI
+
+
+ @for (int h = 0; h < 24; h++)
+ {
+ var hour = h;
+
+
+@code {
+ [CascadingParameter] public BitFullCalendarState State { get; set; } = default!;
+ [CascadingParameter] public BitFullCalendarTexts Texts { get; set; } = default!;
+
+ /// Width of a single time-axis column in pixels.
+ [Parameter] public int ColumnWidthPx { get; set; } = BitFullCalendarHelpers.TimelineHourWidthPx;
+
+ /// Total number of time-axis columns (e.g. 24 for day, 168 for week, days-in-month for month).
+ [Parameter] public int ColumnCount { get; set; }
+
+ /// Width of the sticky resource gutter on the left.
+ [Parameter] public int ResourceColumnWidthPx { get; set; } = 200;
+
+ /// DOM id assigned to the horizontal scroll container so views can scroll it via JS interop.
+ [Parameter] public string ScrollContainerId { get; set; } = "bfc-tl-scroll";
+
+ /// Time-axis header(s) rendered in the top-right cell. Total width must equal ColumnCount * ColumnWidthPx.
+ [Parameter] public RenderFragment? HeaderContent { get; set; }
+
+ /// Row content for a single resource.
+ [Parameter] public RenderFragment RowContent { get; set; } = default!;
+
+ /// Whether to render the trailing "Unassigned" row.
+ [Parameter] public bool HasUnassignedRow { get; set; }
+
+ /// Content rendered inside the unassigned row.
+ [Parameter] public RenderFragment? UnassignedRowContent { get; set; }
+
+ /// Resolves the height in pixels for a given resource row (lets each view stack overlapping events into lanes).
+ [Parameter] public Func RowHeightFor { get; set; } = _ => 56;
+
+ /// Height in pixels for the unassigned row.
+ [Parameter] public int UnassignedRowHeight { get; set; } = 56;
+}
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/FullCalendar/Views/TimelineMode/BitFcTimelineMonthView.razor b/src/BlazorUI/Bit.BlazorUI.Extras/Components/FullCalendar/Views/TimelineMode/BitFcTimelineMonthView.razor
new file mode 100644
index 0000000000..477bc186f9
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/FullCalendar/Views/TimelineMode/BitFcTimelineMonthView.razor
@@ -0,0 +1,250 @@
+@namespace Bit.BlazorUI
+@inject IJSRuntime JS
+
+@*
+ Timeline mode - Month view.
+ Resources × (one column per day in the active month). Day-precision drops re-place an event
+ on a different resource and date but keep its original time-of-day.
+*@
+
+@{
+ const int dayWidth = BitFullCalendarHelpers.TimelineDayWidthPx;
+ const int laneHeight = 40;
+ const int laneGap = 4;
+ const int rowPadding = 4;
+ const int minRowHeight = 60;
+
+ var culture = State.Culture;
+ var cal = culture.Calendar;
+ var year = cal.GetYear(State.SelectedDate);
+ var month = cal.GetMonth(State.SelectedDate);
+ var monthStart = cal.ToDateTime(year, month, 1, 0, 0, 0, 0);
+ var daysInMonth = cal.GetDaysInMonth(year, month);
+ var monthDays = Enumerable.Range(0, daysInMonth).Select(i => monthStart.AddDays(i)).ToArray();
+
+ var resources = State.Resources;
+ var resourceIds = resources.Select(r => r.Id).Where(id => !string.IsNullOrEmpty(id)).ToList();
+
+ // Group every event that touches the month into resource-keyed lists.
+ var perResource = BitFullCalendarHelpers.GroupEventsByResourceForMonth(
+ Events, monthStart, daysInMonth, resourceIds, _unassignedKey);
+
+ int LaneCountFor(string resourceId) =>
+ perResource.TryGetValue(resourceId, out var lanes) && lanes.Count > 0 ? lanes.Count : 1;
+
+ int RowHeight(int laneCount)
+ {
+ var content = (laneCount * laneHeight) + (Math.Max(0, laneCount - 1) * laneGap) + (rowPadding * 2);
+ return Math.Max(minRowHeight, content);
+ }
+
+ var hasUnassigned = perResource.TryGetValue(_unassignedKey, out var u) && u.Count > 0;
+ var unassignedLaneCount = hasUnassigned ? perResource[_unassignedKey].Count : 1;
+
+ // If today falls inside the active month, scroll horizontally to today's day cell.
+ var todayIdx = Array.FindIndex(monthDays, d => d.Date == DateTime.Today);
+}
+
+
+
+
+
+ @for (var di = 0; di < monthDays.Length; di++)
+ {
+ var dayIndex = di;
+ var d = monthDays[dayIndex];
+ var isToday = d.Date == DateTime.Today;
+ var dayNum = BitFullCalendarHelpers.GetCulturalDayOfMonth(d, culture);
+ var dowInitial = culture.DateTimeFormat.GetShortestDayName(d.DayOfWeek);
+ var isScrollTarget = dayIndex == todayIdx;
+
+ @dayNum @dowInitial
+
+ }
+
+
+
+
+ @{ var rowKey = resource.Id; }
+ @for (var di = 0; di < daysInMonth; di++)
+ {
+ var dayIndex = di;
+ var day = monthDays[dayIndex];
+ var leftPx = dayIndex * dayWidth;
+ var isPreview = _dragResourceId == rowKey && _dragDay == day.Date;
+
+
+
+ @Texts.AddEventHoverHint
+
+
+ }
+
+ @if (perResource.TryGetValue(rowKey, out var lanes))
+ {
+ @RenderLanes(lanes, monthStart, daysInMonth)
+ }
+
+
+
+ @{ var rowKey = _unassignedKey; }
+ @for (var di = 0; di < daysInMonth; di++)
+ {
+ var dayIndex = di;
+ var day = monthDays[dayIndex];
+ var leftPx = dayIndex * dayWidth;
+ var isPreview = _dragResourceId == rowKey && _dragDay == day.Date;
+
+ }
+ @if (hasUnassigned)
+ {
+ @RenderLanes(perResource[_unassignedKey], monthStart, daysInMonth)
+ }
+
+
+
+@if (_showAddDialog)
+{
+
+}
+
+@if (_selectedEvent != null)
+{
+
+}
+
+@code {
+ [CascadingParameter] public BitFullCalendarState State { get; set; } = default!;
+ [CascadingParameter] public BitFullCalendarTexts Texts { get; set; } = default!;
+ [CascadingParameter] public BitFullCalendarChangeNotifier Notifier { get; set; } = default!;
+ [CascadingParameter(Name = "OnAddClick")] public EventCallback OnAddClick { get; set; }
+ [CascadingParameter(Name = "OnEventClick")] public EventCallback OnEventClick { get; set; }
+
+ [Parameter] public List Events { get; set; } = [];
+ [Parameter] public RenderFragment? EventTemplate { get; set; }
+
+ private const string _unassignedKey = "__bfc_unassigned__";
+ private const int _laneHeight = 40;
+ private const int _laneGap = 4;
+ private const int _rowPadding = 4;
+ private const string _scrollContainerId = "bfc-tl-month-scroll";
+
+ private string? _scrollSignature;
+
+ private BitFullCalendarEvent? _selectedEvent;
+ private bool _showAddDialog;
+ private DateTime _addStartDate;
+ private int _addStartHour;
+
+ private string? _dragResourceId;
+ private DateTime? _dragDay;
+
+ private RenderFragment RenderLanes(List> lanes, DateTime monthStart, int daysInMonth) => builder =>
+ {
+ var inv = System.Globalization.CultureInfo.InvariantCulture;
+ const int dayWidth = BitFullCalendarHelpers.TimelineDayWidthPx;
+ var monthEnd = monthStart.AddDays(daysInMonth);
+
+ for (var li = 0; li < lanes.Count; li++)
+ {
+ var laneTop = _rowPadding + (li * (_laneHeight + _laneGap));
+ foreach (var ev in lanes[li])
+ {
+ var clippedStart = ev.StartDate < monthStart ? monthStart : ev.StartDate;
+ var clippedEnd = ev.EndDate > monthEnd ? monthEnd : ev.EndDate;
+ if (clippedEnd <= clippedStart) continue;
+
+ // Use full-day boundaries for span (start of start day → start of next-after-end day).
+ var startDayIdx = (int)(clippedStart.Date - monthStart.Date).TotalDays;
+ var endExclusiveIdx = (int)(clippedEnd.Date - monthStart.Date).TotalDays + (clippedEnd.TimeOfDay > TimeSpan.Zero ? 1 : 0);
+ if (endExclusiveIdx <= startDayIdx) endExclusiveIdx = startDayIdx + 1;
+
+ var leftPx = startDayIdx * dayWidth;
+ var widthPx = (endExclusiveIdx - startDayIdx) * dayWidth - 2; // -2 for visual gap
+
+ var style = $"left:{leftPx.ToString("F2", inv)}px;width:{Math.Max(widthPx, 12).ToString("F2", inv)}px;top:{laneTop}px;height:{_laneHeight}px;";
+ builder.OpenElement(0, "div");
+ builder.AddAttribute(1, "class", "bfc-tl-event-anchor");
+ builder.AddAttribute(2, "style", style);
+ builder.OpenComponent(3);
+ builder.AddAttribute(4, "Event", ev);
+ builder.AddAttribute(5, "OnSelected", EventCallback.Factory.Create(this, SelectEvent));
+ builder.AddAttribute(6, "EventTemplate", EventTemplate);
+ builder.AddAttribute(7, "PixelsPerMinute", dayWidth / 1440.0);
+ builder.AddAttribute(8, "SnapMinutes", 1440);
+ builder.AddAttribute(9, "MinDurationMinutes", 1440);
+ builder.AddAttribute(10, "PreviewAsDate", true);
+ builder.CloseComponent();
+ builder.CloseElement();
+ }
+ }
+ };
+
+ private async Task SelectEvent(BitFullCalendarEvent ev)
+ {
+ if (OnEventClick.HasDelegate)
+ {
+ await OnEventClick.InvokeAsync(ev);
+ return;
+ }
+ _selectedEvent = ev;
+ }
+
+ private void CloseEventDetails() => _selectedEvent = null;
+
+ private async Task OnSlotClickAsync(string resourceId, DateTime day)
+ {
+ if (OnAddClick.HasDelegate)
+ {
+ var draft = BitFullCalendarHelpers.CreateDraftEventForTimeSlot(day, DateTime.Now.Hour);
+ draft.Resource = resourceId == _unassignedKey ? null : resourceId;
+ await OnAddClick.InvokeAsync(draft);
+ return;
+ }
+
+ _addStartDate = day;
+ _addStartHour = DateTime.Now.Hour;
+ _showAddDialog = true;
+ }
+
+ private void OnDragEnter(string resourceId, DateTime day)
+ {
+ if (!State.IsDragging) return;
+ _dragResourceId = resourceId;
+ _dragDay = day.Date;
+ }
+
+ private async Task OnDrop(string resourceId, DateTime day)
+ {
+ _dragResourceId = null;
+ _dragDay = null;
+ var newResourceId = resourceId == _unassignedKey ? null : resourceId;
+ // Day-precision drop: keep the original time of day (passing null hour/minute makes
+ // HandleResourceDropAsync preserve the dragged event's time).
+ await Notifier.HandleResourceDropAsync(day, hour: null, minute: null, newResourceId);
+ }
+
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ var sig = $"{State.SelectedDate:yyyy-MM}|{DateTime.Today:yyyy-MM-dd}";
+ if (sig == _scrollSignature) return;
+
+ if (await BitFcTimelineScrollInterop.TryScrollToTargetAsync(JS, _scrollContainerId))
+ _scrollSignature = sig;
+ }
+}
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/FullCalendar/Views/TimelineMode/BitFcTimelineWeekView.razor b/src/BlazorUI/Bit.BlazorUI.Extras/Components/FullCalendar/Views/TimelineMode/BitFcTimelineWeekView.razor
new file mode 100644
index 0000000000..ce90e3e356
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/FullCalendar/Views/TimelineMode/BitFcTimelineWeekView.razor
@@ -0,0 +1,296 @@
+@namespace Bit.BlazorUI
+@inject IJSRuntime JS
+
+@*
+ Timeline mode - Week view.
+ Resources × (7 days × 24 hours) hour-precision columns.
+ Two-row time header: top row spans each day, bottom row shows hourly slots.
+*@
+
+@{
+ const int hourWidth = BitFullCalendarHelpers.TimelineHourWidthPx;
+ const int laneHeight = 44;
+ const int laneGap = 4;
+ const int rowPadding = 4;
+ const int minRowHeight = 60;
+
+ var weekStart = BitFullCalendarHelpers.StartOfWeek(State.SelectedDate, State.Culture);
+ var weekDays = Enumerable.Range(0, 7).Select(i => weekStart.AddDays(i)).ToArray();
+
+ var resources = State.Resources;
+ var resourceIds = resources.Select(r => r.Id).Where(id => !string.IsNullOrEmpty(id)).ToList();
+
+ // Lanes per (resourceId, dayIndex)
+ var perDay = weekDays.Select(d =>
+ BitFullCalendarHelpers.GroupEventsByResourceForDay(Events, d, resourceIds, _unassignedKey)
+ ).ToArray();
+
+ int LaneCountFor(string resourceId)
+ {
+ var max = 1;
+ foreach (var dayMap in perDay)
+ {
+ if (dayMap.TryGetValue(resourceId, out var lanes) && lanes.Count > max)
+ max = lanes.Count;
+ }
+ return max;
+ }
+
+ int RowHeight(int laneCount)
+ {
+ var content = (laneCount * laneHeight) + (Math.Max(0, laneCount - 1) * laneGap) + (rowPadding * 2);
+ return Math.Max(minRowHeight, content);
+ }
+
+ var hasUnassigned = perDay.Any(m => m.TryGetValue(_unassignedKey, out var l) && l.Count > 0);
+ var unassignedLaneCount = hasUnassigned ? LaneCountFor(_unassignedKey) : 1;
+ var totalColumns = 7 * 24;
+
+ // Pick the day and hour cell that should be in view after render: today's day if it falls
+ // inside the visible week, otherwise the first day. Within that day, the start-of-day hour.
+ var todayIdx = Array.FindIndex(weekDays, d => d.Date == DateTime.Today);
+ var scrollDayIdx = todayIdx >= 0 ? todayIdx : 0;
+ var scrollHour = State.StartOfDayHour;
+}
+
+
+
+
+
+ @foreach (var d in weekDays)
+ {
+ var isToday = d.Date == DateTime.Today;
+
+ @foreach (var monthDate in months)
+ {
+ var cells = BitFullCalendarHelpers.GetCalendarCells(monthDate, State.Culture);
+ var monthIndex = cal.GetMonth(monthDate);
+ var monthName = dtf.GetMonthName(monthIndex);
+
+
+ @monthName
+
+
+ @foreach (var wd in yearWeekDayHeaders)
+ {
+
@(wd.Length > 2 ? wd[..2] : wd)
+ }
+
+
+ @foreach (var cell in cells)
+ {
+ var cellCulturalMonth = cal.GetMonth(cell.Date);
+ var isCurrentMonth = cellCulturalMonth == monthIndex
+ && cal.GetYear(cell.Date) == culturalYear;
+ var isToday = cell.Date.Date == DateTime.Today;
+ var dayEvents = allEvents.Where(e => e.StartDate.Date == cell.Date.Date).ToList();
+ var hasEvents = isCurrentMonth && dayEvents.Count > 0;
+
+
+ @cell.Day
+ @if (hasEvents)
+ {
+
+ @foreach (var ev in dayEvents.Take(3))
+ {
+
+ }
+
+ }
+
+ }
+
+
+ }
+
+
+@if (_showEventList)
+{
+
+}
+
+@code {
+ [CascadingParameter] public BitFullCalendarState State { get; set; } = default!;
+ [Parameter] public List SingleDayEvents { get; set; } = [];
+ [Parameter] public List MultiDayEvents { get; set; } = [];
+
+ private bool _showEventList;
+ private DateTime _eventListDate;
+ private List _eventListEvents = [];
+
+ private void GoToMonth(DateTime month)
+ {
+ State.SetSelectedDate(month);
+ State.SetView(BitFullCalendarView.Month);
+ }
+
+ private void ShowEventsForDay(DateTime date, List events)
+ {
+ _eventListDate = date;
+ _eventListEvents = events;
+ _showEventList = true;
+ }
+}
+
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Styles/extra-components.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Styles/extra-components.scss
index ca854411fa..24e1d480eb 100644
--- a/src/BlazorUI/Bit.BlazorUI.Extras/Styles/extra-components.scss
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/Styles/extra-components.scss
@@ -4,6 +4,7 @@
@import "../Components/DataGrid/Pagination/BitDataGridPaginator.scss";
@import "../Components/ErrorBoundary/BitErrorBoundary.scss";
@import "../Components/Flag/BitFlag.scss";
+@import "../Components/FullCalendar/BitFullCalendar.scss";
@import "../Components/InfiniteScrolling/BitInfiniteScrolling.scss";
@import "../Components/Map/BitMap.scss";
@import "../Components/MarkdownEditor/BitMarkdownEditor.scss";
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/FullCalendar/BitFullCalendarDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/FullCalendar/BitFullCalendarDemo.razor
new file mode 100644
index 0000000000..fbbc5237b6
--- /dev/null
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/FullCalendar/BitFullCalendarDemo.razor
@@ -0,0 +1,123 @@
+@page "/components/fullcalendar"
+
+
+
+
+
+
+ To use this component, you need to install the
+
+
+
+ nuget package, as described in the Optional steps of the
+ Getting started page.
+
+
+
+
+ The BitFullCalendar brings a complete scheduling experience to Blazor: multiple view modes
+ (day, week, month, year, agenda, and a resource timeline), built-in event create/edit/delete,
+ drag-and-drop, resize, filtering, theming that follows the Bit theme (including dark mode),
+ and culture-aware date rendering.
+ Explore a live calendar below — switch views, add events, and drag them around.
+
+
+
+
+
+
+
The simplest usage of a BitFullCalendar is by passing a list of events.
+
+
+
+
+
+
+ BitFullCalendar follows the application's Bit theme automatically. Switch the Bit theme
+ (for example to a dark theme) and the calendar surfaces, text, and accent colors update
+ with it — there is no component-level theme or dark-mode switch.
+
+
+
+
+
+
+
+ Drive initial preferences from code with the Options parameter — 12/24-hour
+ time format, day start hour, badge variant, and agenda grouping.
+
+
+
+
+
+
+
Customize the event card content for each view with the per-view templates.
+
+
+
+
+
+
+ Supply Resources to enable the Timeline mode, where rows are resources (rooms, machines,
+ people) and columns are time. Drag events between rows to reassign their resource.
+
+
+
+
+
+
+
The OnChange callback is raised whenever a user adds, edits, or deletes an event.
+
+
+
+ Last change: @(lastChange ?? "—")
+
+
+
+
+ Render the calendar with a localized culture (here Persian, fa-IR) and
+ override UI strings with a customized BitFullCalendarTexts instance.
+
+
+
+
+
+
+
+ Hide the built-in color/attendee filters and the settings gear to provide your own
+ external controls or a minimal header.
+