FullCalendar


Scheduler



BitFullCalendar is a feature-rich, interactive calendar component with day, week, month, year, agenda, and resource timeline views, event CRUD, drag-and-drop, resize, and culture-aware date handling.

Notes

To use this component, you need to install the
Bit.BlazorUI.Extras
nuget package, as described in the Optional steps of the Getting started page.

Introduction

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.

Usage

Basic

The simplest usage of a BitFullCalendar is by passing a list of events.

July 2026
S
M
T
W
T
F
S
28
29
30
1
2
3
4
5
6
7
8
Quarterly Review
10:00
9
Product Demo
14:00
10
11
Team Standup
09:00
Design Review
10:00
1:1 with Manager
10:30
12
Tech Conference
Client Onboarding
10:00
13
Architecture Review
14:00
14
17:00
15
16
Company Retreat
17
18
16:00
19
20
21
22
23
24
25
26
27
28
29
30
31
1

Settings

Drive initial preferences from code with the Settings parameter - 12/24-hour time format, day start hour, badge variant, and agenda grouping.

July 2026
S
M
T
W
T
F
S
28
29
30
1
2
3
4
5
6
7
8
Quarterly Review
10:00 AM
9
Product Demo
2:00 PM
10
11
Team Standup
9:00 AM
Design Review
10:00 AM
1:1 with Manager
10:30 AM
12
Tech Conference
Client Onboarding
10:00 AM
13
Architecture Review
2:00 PM
14
5:00 PM
15
16
Company Retreat
17
18
4:00 PM
19
20
21
22
23
24
25
26
27
28
29
30
31
1

Event layout

Choose how overlapping event cards are arranged in the day and week views with Settings.EventLayout. Overlap (default) cascades the cards on top of each other, while Stack places them side by side in equal-width columns. Switch to the Day or Week view to see the difference - pick a layout below, or toggle it from the settings gear ("Stack overlapping events").


July 2026
S
M
T
W
T
F
S
28
29
30
1
2
3
4
5
6
7
8
Quarterly Review
10:00
9
Product Demo
14:00
10
11
Team Standup
09:00
Design Review
10:00
1:1 with Manager
10:30
12
Tech Conference
Client Onboarding
10:00
13
Architecture Review
14:00
14
17:00
15
16
Company Retreat
17
18
16:00
19
20
21
22
23
24
25
26
27
28
29
30
31
1

Event templates

Customize the event card content for each view with the per-view templates.

July 2026
S
M
T
W
T
F
S
28
29
30
1
2
3
4
5
6
7
8
📌 Quarterly Review
9
📌 Product Demo
10
11
📌 Team Standup
📌 Design Review
📌 1:1 with Manager
12
📌 Tech Conference
📌 Client Onboarding
13
📌 Tech Conference
📌 Architecture Review
14
📌 Tech Conference
15
16
📌 Company Retreat
17
📌 Company Retreat
18
📌 Company Retreat
19
20
21
22
23
24
25
26
27
28
29
30
31
1

Resource timeline

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.

July 2026
Resource
1 W
2 T
3 F
4 S
5 S
6 M
7 T
8 W
9 T
10 F
11 S
12 S
13 M
14 T
15 W
16 T
17 F
18 S
19 S
20 M
21 T
22 W
23 T
24 F
25 S
26 S
27 M
28 T
29 W
30 T
31 F
HQ - Bay Wing
Headquarters
Design Review
10:00 - 11:00
Workshop
14:00 - 16:00
The Garden
Headquarters
Standup
09:00 - 09:30
War Room (B1)
Basement
Incident Bridge
13:00 - 15:00

OnChange

The OnChange callback is raised whenever a user adds, edits, or deletes an event.

July 2026
S
M
T
W
T
F
S
28
29
30
1
2
3
4
5
6
7
8
Quarterly Review
10:00
9
Product Demo
14:00
10
11
Team Standup
09:00
Design Review
10:00
1:1 with Manager
10:30
12
Tech Conference
Client Onboarding
10:00
13
Architecture Review
14:00
14
17:00
15
16
Company Retreat
17
18
16:00
19
20
21
22
23
24
25
26
27
28
29
30
31
1

Last change: -

Binding

The View, Mode, and Date parameters are two-way bound, so you can drive the calendar from outside and react to user-driven changes through OnViewChange, OnModeChange, and OnDateChange. The DefaultView, DefaultMode, and DefaultDate parameters set the initial values that are used when their two-way counterparts are not bound.


Jul 5, 2026 - Jul 11, 2026
Weekly view is not recommended on smaller devices. Please switch to a desktop device or use the daily view instead.
Sun 5
Mon 6
Tue 7
Wed 8
Thu 9
Fri 10
Sat 11
01:00
02:00
03:00
04:00
05:00
06:00
07:00
08:00
09:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
18:00
19:00
20:00
21:00
22:00
23:00
Standup
09:00 - 09:30
Design Review
10:00 - 11:00
Incident Bridge
13:00 - 15:00
Workshop
14:00 - 16:00
15:23

View: Week | Mode: Event | Date: 2026-07-11
Last calendar event: Range 2026-07-05 → 2026-07-11 (Week)

Localization

Render the calendar with a localized culture (here Persian, fa-IR) and override the UI strings through a customized BitFullCalendarTexts instance. This example translates most of the available strings - toolbar, view/mode tabs, filters, settings panel, search/agenda, dialogs, form fields, validation messages, and resource labels.

1405 تیر
ش
ی
د
س
چ
پ
ج
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Quarterly Review
10:00
18
Product Demo
14:00
19
20
Team Standup
09:00
Design Review
10:00
1:1 with Manager
10:30
21
Tech Conference
Client Onboarding
10:00
22
Architecture Review
14:00
23
17:00
24
25
Company Retreat
26
27
16:00
28
29
30
31
1
2

Hide filters & settings

Hide the built-in color/attendee filters and the settings gear to provide your own external controls or a minimal header.

July 2026
S
M
T
W
T
F
S
28
29
30
1
2
3
4
5
6
7
8
Quarterly Review
10:00
9
Product Demo
14:00
10
11
Team Standup
09:00
Design Review
10:00
1:1 with Manager
10:30
12
Tech Conference
Client Onboarding
10:00
13
Architecture Review
14:00
14
17:00
15
16
Company Retreat
17
18
16:00
19
20
21
22
23
24
25
26
27
28
29
30
31
1

API

BitFullCalendar parameters

Name Type Default value Description
Culture CultureInfo? CultureInfo.CurrentUICulture Sets calendar/date rendering and formatting. Do not use with @rendermode="InteractiveServer" - use CultureName instead.
CultureName string? null Culture name shortcut (e.g. "fa-IR", "ar-SA", "fr-FR"). Takes precedence over Culture when both are supplied.
Date DateTime DateTime.Today The currently selected (anchor) date of the calendar that determines the visible date range. (two-way bound)
DayEventTemplate RenderFragment<BitFullCalendarEvent>? null Replaces the default event card content inside day-view time-grid blocks.
DefaultDate DateTime? null The default selected date used initially when the Date parameter is not set. Determines the date range shown on first render.
DefaultMode BitFullCalendarMode? null The default layout mode used initially when the Mode parameter is not set. Event shows the day/week/month/year/agenda views. Timeline shows a resources × time grid (requires Resources to be non-empty) and supports only the day, week, and month layouts - Year and Agenda fall back to the week layout in Timeline mode.
DefaultView BitFullCalendarView? null The default view used initially when the View parameter is not set. In Event mode any of Day, Week, Month, Year, or Agenda apply; in Timeline mode only Day, Week, and Month are supported (Year and Agenda fall back to the week layout).
EventColorOptions IReadOnlyList<BitFullCalendarColorOption>? null Ordered list of event colors shown in pickers, filters, agenda headers, badges, and bullets.
Events List<BitFullCalendarEvent>? null List of calendar events to display.
HideFilters bool false When true, hides the built-in color and attendee filter dropdowns. Consumers provide their own filter UI and pass pre-filtered events.
HideSettings bool false When true, hides the built-in settings gear button. Settings can still be driven programmatically through the Settings parameter.
Mode BitFullCalendarMode BitFullCalendarMode.Event The currently active layout mode of the calendar (Event or Timeline). Timeline requires Resources to be non-empty and only supports the Day, Week, and Month views (Year and Agenda fall back to the week layout). (two-way bound)
MonthEventTemplate RenderFragment<BitFullCalendarEvent>? null Replaces the default event badge content inside month-view cells.
OnAddClick EventCallback<BitFullCalendarEvent?> When assigned, the built-in add dialog is suppressed. Receives a draft event with the start/end dates pre-filled from the calendar's selected date and configured start hour (or the clicked slot when adding from a time grid).
OnChange EventCallback<BitFullCalendarChangeEventArgs> Raised when a user adds, edits, or deletes an event (Kind: Add, Edit, Delete; Source: Dialog, Drag, Resize).
OnDateChange EventCallback<BitFullCalendarDateChangeEventArgs> Raised when the visible date range changes after prev/next/today navigation or a view switch. Payload includes inclusive Start/End and the active View.
OnEventClick EventCallback<BitFullCalendarEvent> When assigned, the built-in event details dialog is suppressed when an event is clicked. Receives the clicked event.
OnModeChange EventCallback<BitFullCalendarMode> Raised when the active layout mode changes (switching between the Event and Timeline tabs).
OnViewChange EventCallback<BitFullCalendarView> Raised when the active view changes (selecting a view tab or navigating from the year overview into a month).
Resources IReadOnlyList<BitFullCalendarResource>? null Resources displayed as rows in Timeline mode. Each event's Resource property is matched against the resource Id. The Timeline mode tab is hidden when null or empty.
Settings BitFullCalendarSettings new() Initial preferences - 12/24-hour time format, badge variant, day start hour, agenda grouping, and event card layout.
Texts BitFullCalendarTexts new() Custom UI strings for labels, placeholders, action buttons, aria labels, and validation messages.
TimelineEventTemplate RenderFragment<BitFullCalendarEvent>? null Replaces the default event card content inside Timeline mode blocks.
View BitFullCalendarView BitFullCalendarView.Month The currently active view of the calendar (Day, Week, Month, Year, Agenda). In Timeline mode only Day, Week, and Month are supported (Year and Agenda fall back to the week layout). (two-way bound)
WeekEventTemplate RenderFragment<BitFullCalendarEvent>? null Replaces the default event card content inside week-view time-grid blocks.

BitComponentBase parameters

Name Type Default value Description
AriaLabel string? null Gets or sets the accessible label for the component, used by assistive technologies.
Class string? null Gets or sets the CSS class name(s) to apply to the rendered element.
Dir BitDir? null Gets or sets the text directionality for the component's content.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters.
Id string? null Gets or sets the unique identifier for the component's root element.
IsEnabled bool true Gets or sets a value indicating whether the component is enabled and can respond to user interaction.
Style string? null Gets or sets the CSS style string to apply to the rendered element.
TabIndex string? null Gets or sets the tab order index for the component when navigating with the keyboard.
Visibility BitVisibility BitVisibility.Visible Gets or sets the visibility state (visible, hidden, or collapsed) of the component.

BitComponentBase public members

Name Type Default value Description
UniqueId Guid Guid.NewGuid() Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed.
RootElement ElementReference Gets the reference to the root HTML element associated with this component.

BitFullCalendarEvent properties

Represents a single calendar event rendered across the day, week, month, year, agenda, and timeline views.

Name Type Default value Description
Id string string.Empty Unique identifier of the event.
Title string string.Empty Event title shown on the event card, badge, and dialogs.
Description string string.Empty Event description shown in the details and add/edit dialogs.
StartDate DateTime Start date and time of the event.
EndDate DateTime End date and time of the event.
Color string BitFullCalendarColorScheme.FallbackColorId Identifier of the color matching a BitFullCalendarColorOption.Id from the configured palette.
Attendees List<BitFullCalendarAttendee> [] People attending the event.
Resource string? null Optional resource identifier linking this event to a BitFullCalendarResource. Used by the timeline view to place the event on the matching resource row. null or empty means the event is unassigned.
IsSingleDay bool Read-only. True when the event starts and ends on the same date.
IsMultiDay bool Read-only. True when the event spans more than one date.
Duration TimeSpan Read-only. The difference between EndDate and StartDate.
Data object? null Optional consumer-defined payload available to templates and click handlers.

BitFullCalendarAttendee properties

Represents a person attending an event, shown in the event details and add/edit dialogs.

Name Type Default value Description
FirstName string string.Empty First name of the attendee.
LastName string string.Empty Last name of the attendee.
Id string? null Optional identifier of the attendee.
FullName string Read-only. The combined and trimmed first and last name.
Initials string Read-only. The uppercased initials derived from the first and last name.

BitFullCalendarColorOption properties

Describes one selectable event color shown in the picker, filters, agenda headers, badges, bullets, and swatches. Events reference a color through its Id.

Name Type Default value Description
Id string string.Empty Stable identifier of the color matched against BitFullCalendarEvent.Color (case-insensitive). Use a short, slug-style value such as "blue" or "skyblue".
Title string string.Empty Display label shown in pickers, filters, agenda headers, and event details. Used as-is with no localization.
Value string string.Empty CSS color value used for swatches, bullets, badge accents, and chip surfaces. Any valid CSS color such as hex, rgb(), hsl(), or a named color. Badge background, border, and text contrast tints are derived from this value at runtime.
Defaults static IReadOnlyList<BitFullCalendarColorOption> Built-in palette (blue, green, red, yellow, purple, orange) used when EventColorOptions is null or empty.

BitFullCalendarResource properties

A schedulable resource shown as a row in the resource timeline view (for example a meeting room, a person, or a piece of equipment). Events are linked to a resource through BitFullCalendarEvent.Resource matching Id.

Name Type Default value Description
Id string Required. Stable, non-blank identifier matched against BitFullCalendarEvent.Resource. Cannot be null, empty, or whitespace - a blank id is rejected at assignment time.
Title string string.Empty Display name for the resource (for example "Bay Wing", "Alice Johnson", "Meeting Room 3B").
Subtitle string? null Optional subtitle shown below the resource title (for example building or department).
Data object? null Optional consumer-defined payload available to templates and click handlers.

BitFullCalendarSettings properties

Configuration settings applied as initial defaults when the component mounts, or whenever a new instance is assigned to the Settings parameter.

Name Type Default value Description
Use24HourFormat bool true Uses 24-hour time format instead of 12-hour (AM/PM).
BadgeVariant BitFullCalendarBadgeVariant BitFullCalendarBadgeVariant.Colored Badge display style in the month view.
StartOfDayHour int 8 Hour (0–16) at which the day/week time grid begins.
AgendaModeGroupBy BitFullCalendarAgendaGroupBy BitFullCalendarAgendaGroupBy.Date How events are grouped in the agenda view.
EventLayout BitFullCalendarEventLayout BitFullCalendarEventLayout.Overlap How overlapping event cards are positioned in the day and week views.
ShowDayViewCalendar bool true Renders the mini calendar shown in the day view sidebar.

BitFullCalendarChangeEventArgs properties

Provides details about a user-applied calendar event change, passed to the OnChange callback.

Name Type Default value Description
Event BitFullCalendarEvent The current event snapshot after the change for Add/Edit, or the removed event snapshot for Delete.
Kind BitFullCalendarChangeKind The change type that occurred (Add, Edit, Delete).
OldEvent BitFullCalendarEvent? null The event snapshot before the change for Edit/Delete. Null for Add.
Source BitFullCalendarChangeSource The UI source that triggered this change (Dialog, Drag, Resize).

BitFullCalendarDateChangeEventArgs properties

Provides details about a date range change, fired when the user navigates (prev/next/today) or switches views. Passed to the OnDateChange callback.

Name Type Default value Description
Start DateTime Start of the visible date range (inclusive).
End DateTime End of the visible date range (inclusive).
View BitFullCalendarView The active calendar view when the change occurred.

BitFullCalendarTexts properties

Custom UI strings for labels, placeholders, action buttons, aria labels, and validation messages. Used for localization and customization of all built-in text.

Name Type Default value Description
ViewDay string "Day" Label for the day view tab.
ViewWeek string "Week" Label for the week view tab.
ViewMonth string "Month" Label for the month view tab.
ViewYear string "Year" Label for the year view tab.
ViewAgenda string "Agenda" Label for the agenda view tab.
ModeEvent string "Events" Label for the event mode tab.
ModeTimeline string "Timeline" Label for the timeline mode tab.
BitFcTodayButton string "Today" Label for the today navigation button.
AddEventButton string "Add Event" Label for the add event button.
AddEventHoverHint string "Add event" Tooltip shown when hovering the add event affordance.
PreviousButtonTitle string "Previous" Title for the previous navigation button.
NextButtonTitle string "Next" Title for the next navigation button.
PreviousMonthAriaLabel string "Previous month" Aria label for the mini calendar previous month navigation button.
NextMonthAriaLabel string "Next month" Aria label for the mini calendar next month navigation button.
SettingsButtonTitle string "Settings" Title for the settings gear button.
FilterByColorAriaLabel string "Filter events by color" Aria label for the color filter dropdown.
FilterByPersonAriaLabel string "Filter events by person in current view" Aria label for the attendee filter dropdown.
AllColorsOption string "All colors" Option text for clearing the color filter.
AllPeopleOption string "All people" Option text for clearing the attendee filter.
UnnamedAttendee string "(Unnamed)" Fallback text for an attendee with no name.
CalendarSettingsLabel string "Calendar settings" Heading for the settings panel.
DotBadgeLabel string "Dot badge" Label for the dot badge setting toggle.
TwentyFourHourFormatLabel string "24-hour format" Label for the 24-hour format setting toggle.
DayStartsAtLabel string "Day starts at" Label for the day start hour setting.
HourSuffix string "h" Suffix appended to hour values in the settings.
AgendaGroupByLabel string "Agenda group by" Label for the agenda grouping setting.
AgendaGroupByDate string "Date" Option text for grouping the agenda by date.
AgendaGroupByColor string "Color" Option text for grouping the agenda by color.
StackedEventsLabel string "Stack overlapping events" Label for the overlapping events layout toggle.
ShowDayViewCalendarLabel string "Show calendar in day view" Label for the day view mini calendar toggle.
WeekMobileWarning string "Weekly view is not recommended..." Warning shown when using the week view on small devices.
HappeningNowTitle string "Happening now" Title for the happening-now indicator.
NoAppointmentsNow string "No appointments at the moment" Text shown when there are no current appointments.
SearchEventsPlaceholder string "Search events..." Placeholder for the agenda search box.
NoEventsFound string "No events found." Text shown when a search returns no events.
EventListTitleFormat string "Events on {0}" Format template for the event list dialog title; {0} is the formatted date.
EventListCountFormat string "{0} event(s)" Format template for the event count in the event list dialog; {0} is the count.
MoreEventsFormat string "+{0} more" Format template for the "+N more" affordance in month cells; {0} is the hidden-event count.
AddEventDialogTitle string "Add New Event" Title for the add event dialog.
EditEventDialogTitle string "Edit Event" Title for the edit event dialog.
AddEventDialogSubtitle string "Create a new event for your calendar." Subtitle for the add event dialog.
EditEventDialogSubtitle string "Modify your existing event." Subtitle for the edit event dialog.
CloseAriaLabel string "Close" Aria label for the dialog close button.
CloseButton string "Close" Label for the close button.
CancelButton string "Cancel" Label for the cancel button.
EditButton string "Edit" Label for the edit button.
DeleteButton string "Delete" Label for the delete button.
CreateEventButton string "Create Event" Label for the create event button.
SaveChangesButton string "Save Changes" Label for the save changes button.
TitleLabel string "Title" Label for the event title field.
EventTitlePlaceholder string "Event title" Placeholder for the event title field.
StartDateTimeLabel string "Start Date & Time" Label for the start date and time field.
EndDateTimeLabel string "End Date & Time" Label for the end date and time field.
ColorLabel string "Color" Label for the color field.
EventColorAriaLabel string "Event color" Aria label for the color picker.
DescriptionLabel string "Description" Label for the description field.
EventDescriptionPlaceholder string "Event description" Placeholder for the description field.
AttendeesLabel string "Attendees" Label for the attendees field.
NoAttendeesText string "No attendees" Text shown when an event has no attendees.
FirstNamePlaceholder string "First name" Placeholder for the attendee first name field.
LastNamePlaceholder string "Last name" Placeholder for the attendee last name field.
IdOptionalPlaceholder string "ID (optional)" Placeholder for the optional attendee id field.
AddButton string "Add" Label for the add attendee button.
RemoveAttendeeAriaLabel string "Remove attendee" Aria label for the remove attendee button on an attendee chip.
StartDateLabel string "Start Date" Label for the start date in the event details.
EndDateLabel string "End Date" Label for the end date in the event details.
AtWord string "at" Connector word between date and time in the event details.
ValidationTitleRequired string "Title is required" Validation message when the title is empty.
ValidationDescriptionRequired string "Description is required" Validation message when the description is empty.
ValidationEndAfterStart string "End date must be after start date" Validation message when the end date is not after the start date.
ValidationAttendeeNameRequired string "First name or last name is required" Validation message when an attendee has no name.
ResizePreviewAriaLabel string "New time range" Aria label for the resize preview indicator.
ResourceLabel string "Resource" Label for the resource field in the add/edit dialog.
ResourceColumnHeader string "Resource" Header for the resource column in the timeline view.
NoResourceLabel string "Unassigned" Label for events not assigned to a resource.
NoResourceOption string "(none)" Option text for clearing the resource assignment.
NoResourcesMessage string "No resources to display." Message shown when there are no resources in the timeline view.
GetViewLabel(BitFullCalendarView) string Method that returns the localized label for the given view.
GetModeLabel(BitFullCalendarMode) string Method that returns the localized label for the given mode.

BitFullCalendarMode enum

Name Value Description
Event 0 Day, week, month, year, and agenda views on a date grid.
Timeline 1 Resource-centric layout (resources × time grid); requires Resources. Supports only the day, week, and month layouts.

BitFullCalendarView enum

Name Value Description
Day 0 Single-day detailed view.
Week 1 7-day view with hourly time slots.
Month 2 Month grid with multi-day events.
Year 3 12-month overview. Event mode only - falls back to the week layout in Timeline mode.
Agenda 4 Searchable list grouped by date or color. Event mode only - falls back to the week layout in Timeline mode.

BitFullCalendarBadgeVariant enum

Name Value Description
Colored 0 Colored badge.
Dot 1 Colored dot bullet.

BitFullCalendarAgendaGroupBy enum

Name Value Description
Date 0 Group agenda items by date.
Color 1 Group agenda items by color.

BitFullCalendarEventLayout enum

Name Value Description
Overlap 0 Overlapping cards cascade on top of each other, each offset to the right and extending to the column edge.
Stack 1 Overlapping cards are placed side by side in equal-width columns with no overlap.

BitFullCalendarChangeKind enum

Name Value Description
Add 0 An event was added.
Edit 1 An event was edited.
Delete 2 An event was deleted.

BitFullCalendarChangeSource enum

Name Value Description
Dialog 0 From the add/edit dialog.
Drag 1 From a drag-and-drop move.
Resize 2 From resizing an event block.

BitVisibility enum

Name Value Description
Visible 0 The content of the component is visible.
Hidden 1 The content of the component is hidden, but the space it takes on the page remains (visibility:hidden).
Collapsed 2 The component is hidden (display:none).

BitDir enum

Name Value Description
Ltr 0 Ltr (left to right) is to be used for languages that are written from the left to the right (like English).
Rtl 1 Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic).
Auto 2 Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.

Feedback

You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.


Or you can review / edit this page on GitHub.


Or you can review / edit this component on GitHub.

  • On this page