FullCalendar
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
Settings
Event layout
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").
Event templates
Resource timeline
OnChange
Last change: -
Binding
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.
View: Week | Mode: Event | Date: 2026-07-11
Last calendar event: Range 2026-07-05 → 2026-07-11 (Week)
Localization
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.
Hide filters & settings
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 |
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.
- On this page