FullCalendar
Calendar
Scheduler
Calendar
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.
June 2026
S
M
T
W
T
F
S
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Quarterly Review
10:0017
Product Demo
14:0018
19
Team Standup
09:00Design Review
10:001:1 with Manager
10:30
+3 more
20
Tech Conference
Client Onboarding
10:0021
Architecture Review
14:0022
09:00
23
24
Company Retreat
25
26
00:00
27
28
29
30
1
2
3
4
Usage
Basic
The simplest usage of a BitFullCalendar is by passing a list of events.
June 2026
S
M
T
W
T
F
S
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Quarterly Review
10:0017
Product Demo
14:0018
19
Team Standup
09:00Design Review
10:001:1 with Manager
10:30
+3 more
20
Tech Conference
Client Onboarding
10:0021
Architecture Review
14:0022
09:00
23
24
Company Retreat
25
26
00:00
27
28
29
30
1
2
3
4
Theme
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.
June 2026
S
M
T
W
T
F
S
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Quarterly Review
10:0017
Product Demo
14:0018
19
Team Standup
09:00Design Review
10:001:1 with Manager
10:30
+3 more
20
Tech Conference
Client Onboarding
10:0021
Architecture Review
14:0022
09:00
23
24
Company Retreat
25
26
00:00
27
28
29
30
1
2
3
4
Options
Drive initial preferences from code with the Options parameter — 12/24-hour
time format, day start hour, badge variant, and agenda grouping.
June 2026
S
M
T
W
T
F
S
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Quarterly Review
10:00 AM17
Product Demo
2:00 PM18
19
Team Standup
9:00 AMDesign Review
10:00 AM1:1 with Manager
10:30 AM
+3 more
20
Tech Conference
Client Onboarding
10:00 AM21
Architecture Review
2:00 PM22
9:00 AM
23
24
Company Retreat
25
26
12:00 AM
27
28
29
30
1
2
3
4
Event templates
Customize the event card content for each view with the per-view templates.
June 2026
S
M
T
W
T
F
S
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
📌 Quarterly Review
17
📌 Product Demo
18
19
📌 Team Standup
📌 Design Review
📌 1:1 with Manager
+3 more
20
📌 Tech Conference
📌 Client Onboarding
21
📌 Tech Conference
📌 Architecture Review
22
📌 Tech Conference
23
24
📌 Company Retreat
25
📌 Company Retreat
26
📌 Company Retreat
27
28
29
30
1
2
3
4
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.
June 2026
Resource
1 M
2 T
3 W
4 T
5 F
6 S
7 S
8 M
9 T
10 W
11 T
12 F
13 S
14 S
15 M
16 T
17 W
18 T
19 F
20 S
21 S
22 M
23 T
24 W
25 T
26 F
27 S
28 S
29 M
30 T
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.
June 2026
S
M
T
W
T
F
S
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Quarterly Review
10:0017
Product Demo
14:0018
19
Team Standup
09:00Design Review
10:001:1 with Manager
10:30
+3 more
20
Tech Conference
Client Onboarding
10:0021
Architecture Review
14:0022
09:00
23
24
Company Retreat
25
26
00:00
27
28
29
30
1
2
3
4
Last change: —
Localization
Render the calendar with a localized culture (here Persian,
fa-IR) and
override UI strings with a customized BitFullCalendarTexts instance.
خرداد 1405
ش
ی
د
س
چ
پ
ج
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
Quarterly Review
10:0027
Product Demo
14:0028
29
Team Standup
09:00Design Review
10:001:1 with Manager
10:30
+3 more
30
Tech Conference
Client Onboarding
10:0031
Architecture Review
14:001
09:00
2
3
Company Retreat
4
5
00:00
Hide filters & settings
Hide the built-in color/attendee filters and the settings gear to provide your own
external controls or a minimal header.
June 2026
S
M
T
W
T
F
S
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Quarterly Review
10:0017
Product Demo
14:0018
19
Team Standup
09:00Design Review
10:001:1 with Manager
10:30
+3 more
20
Tech Conference
Client Onboarding
10:0021
Architecture Review
14:0022
09:00
23
24
Company Retreat
25
26
00:00
27
28
29
30
1
2
3
4
API
BitFullCalendar parameters
Name |
Type |
Default value |
Description |
|---|---|---|---|
| Events | List<BitFullCalendarEvent>? | null | List of calendar events to display. |
| 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. |
| Texts | BitFullCalendarTexts | new() | Custom UI strings for labels, placeholders, action buttons, aria labels, and validation messages. |
| EventColorOptions | IReadOnlyList<BitFullCalendarColorOption>? | null | Ordered list of event colors shown in pickers, filters, agenda headers, badges, and bullets. |
| 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. |
| InitialMode | BitFullCalendarMode? | null | Initial layout mode. Event shows day/week/month/year/agenda views. Timeline shows resources × time grid and requires Resources to be non-empty. |
| OnChange | EventCallback<BitFullCalendarChangeEventArgs> | Raised when a user adds, edits, or deletes an event (Kind: Add, Edit, Delete; Source: Dialog, Drag, Resize, Delete). | |
| OnAddClick | EventCallback<BitFullCalendarEvent?> | When assigned, the built-in add dialog is suppressed. Receives a draft event with pre-filled dates from the clicked slot. | |
| OnEventClick | EventCallback<BitFullCalendarEvent> | When assigned, the built-in event details dialog is suppressed when an event is clicked. Receives the clicked event. | |
| 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. | |
| 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 Options. |
| Options | BitFullCalendarOptions | new() | Initial preferences — 12/24-hour time format, badge variant, day start hour, and agenda grouping. |
| DayEventTemplate | RenderFragment<BitFullCalendarEvent>? | null | Replaces the default event card content inside day-view time-grid blocks. |
| WeekEventTemplate | RenderFragment<BitFullCalendarEvent>? | null | Replaces the default event card content inside week-view time-grid blocks. |
| MonthEventTemplate | RenderFragment<BitFullCalendarEvent>? | null | Replaces the default event badge content inside month-view cells. |
| TimelineEventTemplate | RenderFragment<BitFullCalendarEvent>? | null | Replaces the default event card content inside Timeline mode 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. |
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. |
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. |
| Agenda | 4 | Searchable list grouped by date or color. |
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. |
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. |
| Delete | 3 | From the delete action. |
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