# FullCalendar
**Also known as:** Scheduler
## Description
BitFullCalendar is a full-featured scheduling calendar: day, week, month, year, agenda, and resource timeline views; recurring and all-day events; built-in create, edit and delete; drag-and-drop, edge resizing, and range selection; a configurable time grid with business hours, a work week, and booking rules; filtering, templating, keyboard navigation, and culture-aware, right-to-left-ready date rendering.
## 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. |
| HideHeader | `bool` | false | When true, the whole toolbar is removed - navigation, mode and view tabs, filters, the Add Event button, and the settings gear - so the calendar can be driven entirely from the consumer's own chrome through the bound View/Mode/Date parameters or the navigation methods. |
| HideSettings | `bool` | false | When true, hides the built-in settings gear button. Settings can still be driven programmatically through the Settings parameter. |
| MaxDate | `DateTime?` | null | The latest date the calendar can navigate to and display. Navigation past it is refused, the next button is disabled, and a bound Date beyond it is pulled back. |
| MinDate | `DateTime?` | null | The earliest date the calendar can navigate to and display. Navigation before it is refused, the previous button is disabled, and a bound Date before it is pulled forward. A window whose bounds are inverted is ignored. |
| 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). |
| OnRefused | `EventCallback<BitFullCalendarChangeRefusal>` | | Raised when the calendar refuses a user-driven change: an overlap while Settings.AllowEventOverlap is false, a target outside the MinDate/MaxDate window, or an event marked IsReadOnly. |
| OnViewChange | `EventCallback<BitFullCalendarView>` | | Raised when the active view changes (selecting a view tab or navigating from the year overview into a month). |
| ReadOnly | `bool` | false | When true, the calendar becomes presentation-only: the add button and per-cell add affordances are hidden, drag-and-drop and resizing are disabled, and the edit/delete actions are removed from the event details dialog. Navigation, view/mode switching, filtering, and reading event details keep working. |
| 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) |
| Views | `IReadOnlyList<BitFullCalendarView>?` | null | The views the calendar offers, in the order the view tabs render them. When null or empty, every view (Day, Week, Month, Year, Agenda) is offered in that order; unknown and repeated entries are ignored. Excluded views are unreachable - the tabs omit them and View, DefaultView, and the indirect navigation paths are clamped into the list. The tab strip is hidden when a single view is left, and Timeline mode is unavailable when none of Day, Week, or Month is listed. |
| WeekEventTemplate | `RenderFragment<BitFullCalendarEvent>?` | null | Replaces the default event card content inside week-view time-grid blocks. |
| 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. |
| ForceAnimation | `bool` | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| 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. |
## 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. |
## Enums
### 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. |
### BitFullCalendarRecurrenceFrequency Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Daily | 0 | Repeats every Interval days. |
| Weekly | 1 | Repeats every Interval weeks, on the weekdays listed in DaysOfWeek (the start date's own weekday when none are listed). |
| Monthly | 2 | Repeats every Interval months on the start date's day of the month. A month too short for that day is skipped rather than shifted. With WeekOfMonth set it repeats on a weekday of the month instead (the third Tuesday). |
| Yearly | 3 | Repeats every Interval years on the start date's month and day. A 29 February series only occurs in leap years. With WeekOfMonth set it repeats on a weekday of the start date's month instead (the fourth Thursday of November). |
### BitFullCalendarWeekOfMonth Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| First | 0 | The first such weekday of the month (days 1 to 7). |
| Second | 1 | The second such weekday of the month (days 8 to 14). |
| Third | 2 | The third such weekday of the month (days 15 to 21). |
| Fourth | 3 | The fourth such weekday of the month (days 22 to 28). |
| Last | 4 | The last such weekday of the month, whether that is its fourth or its fifth. |
### BitFullCalendarChangeRefusal Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| None | 0 | The change was applied (or there was nothing to apply). |
| ReadOnly | 1 | The calendar - or the single event - is read-only, so nothing was changed. |
| Overlap | 2 | The resulting range would overlap another event on the same resource while Settings.AllowEventOverlap is false. |
| OutOfRange | 3 | The resulting range falls outside the MinDate/MaxDate window the calendar is allowed to show. |
| OutsideBusinessHours | 4 | The resulting range is not fully contained in the business hours while Settings.RestrictToBusinessHours is true. |
### 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. |
## Sub Classes
### 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. |
| IsAllDay | `bool` | false | Marks the event as lasting the whole day (or span of days) rather than a time range. It renders in the all-day row above the day and week time grids and its badge shows no clock time. |
| IsReadOnly | `bool` | false | Locks this single event: it cannot be dragged, resized, edited, or deleted even while the calendar itself is editable. Reading its details keeps working. |
| CssClass | `string?` | null | Extra CSS class(es) applied to every element that renders this event - the month badge, the day/week block, and the timeline block. |
| Recurrence | `BitFullCalendarRecurrence?` | null | Repeat rule that turns this event into a series master. The calendar expands it into occurrences across the visible range; the master itself is never rendered once it has one. |
| SeriesId | `string?` | null | Set on a generated occurrence to the Id of the series master it came from. Null on every event a consumer supplied. |
| OccurrenceDate | `DateTime?` | null | Set on a generated occurrence to the date it falls on, so a click handler can tell which one of a series the user picked. |
| IsOccurrence | `bool` | | Read-only. True when this event was generated by expanding a recurrence rule. |
| 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. |
| IsAllDayOrMultiDay | `bool` | | Read-only. True when the event belongs in the all-day row: either it is marked IsAllDay or it 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. |
### BitFullCalendarRecurrence Properties
The repeat rule of a recurring event. The event it sits on is the series master: it defines the first occurrence's date, time, and length, and every later occurrence repeats that same length. Recurrence is computed on the Gregorian calendar, independent of the culture the calendar renders in.
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Frequency | `BitFullCalendarRecurrenceFrequency` | BitFullCalendarRecurrenceFrequency.Daily | How often the event repeats. |
| Interval | `int` | 1 | Number of frequency units between two occurrences - 2 with a weekly frequency means every other week. Values below 1 are treated as 1. |
| DaysOfWeek | `IReadOnlyList<DayOfWeek>?` | null | Weekdays the series occurs on: every week for a weekly series, or on that week of the month for a monthly or yearly series with a WeekOfMonth. When null or empty the series follows the start date's own weekday. Ignored by the other frequencies. |
| WeekOfMonth | `BitFullCalendarWeekOfMonth?` | null | Places a monthly or yearly series on a weekday of the month instead of the start date's day number - Third with DaysOfWeek set to Tuesday is the third Tuesday. A yearly series stays in the start date's month. Ignored by the other frequencies. |
| Count | `int?` | null | Total number of occurrences the pattern produces, counting the first. Null leaves the series open-ended unless Until closes it; when both are set, whichever ends the series first wins. |
| Until | `DateTime?` | null | Last date the pattern may occur on (inclusive). Null leaves the series open-ended unless Count closes it. |
| ExceptionDates | `IReadOnlyList<DateTime>?` | null | Dates the series skips - a cancelled occurrence, a holiday. Only the date part is compared, a skipped date still counts against Count, and it also removes an AdditionalDates entry on the same date. |
| AdditionalDates | `IReadOnlyList<DateTime>?` | null | Dates the series also occurs on outside its pattern - a make-up session. Each repeats the master's time of day and length, neither counts against Count nor stops at Until, and a date the pattern already produces is not doubled. |
### 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 the day/week time grid scrolls to on first render. Clamped into the VisibleStartHour/VisibleEndHour window. |
| VisibleStartHour | `int` | 0 | First hour rendered by the day, week, and timeline day/week time grids (0–23). Equivalent to slotMinTime in other calendar libraries. |
| VisibleEndHour | `int` | 24 | Exclusive last hour rendered by the day, week, and timeline day/week time grids (1–24). Equivalent to slotMaxTime. A value at or below VisibleStartHour is corrected to one hour past it. |
| SlotDurationMinutes | `int` | 30 | Length in minutes of one slot inside an hour, and the granularity drag-and-drop and resizing snap to. Only divisors of 60 are accepted (5, 6, 10, 12, 15, 20, 30, 60); other values round to the nearest accepted one. |
| HiddenDays | `IReadOnlyList<DayOfWeek>?` | null | Days of the week removed from every date grid (week, month, year, and the timeline week layout). Use it to render a work week. A list that would hide every day is ignored. |
| BusinessDays | `IReadOnlyList<DayOfWeek>?` | null | The weekdays business hours run on. null means Monday to Friday; an empty list means no day is a business day. |
| BusinessStartHour | `int` | 9 | First hour of the business day (0–23). |
| BusinessEndHour | `int` | 17 | Exclusive last hour of the business day (1–24). A value at or below BusinessStartHour is corrected to one hour past it. |
| HighlightBusinessHours | `bool` | false | Shades everything outside the business hours - the off-hours slots of the day, week, and timeline grids and the non-business month cells. Also toggleable from the built-in settings panel. |
| RestrictToBusinessHours | `bool` | false | Refuses any drag, resize, or dialog save whose resulting range is not fully contained in the business hours, reported as BitFullCalendarChangeRefusal.OutsideBusinessHours. |
| FixedWeekCount | `bool` | false | Always renders six week rows in the month grid, so the calendar keeps the same height across months. |
| ShowNonCurrentDates | `bool` | true | Renders the leading and trailing days the month grid borrows from the neighbouring months. When false those cells stay blank and inert. |
| NavLinks | `bool` | false | Turns the month day numbers, the week-view column headers, and the month week numbers into links that navigate to the matching day or week view. A link whose target view is excluded by Views only selects the date. |
| FirstDayOfWeek | `DayOfWeek?` | null | Overrides the day the week starts on. When null the active culture's DateTimeFormat.FirstDayOfWeek is used. |
| ShowWeekNumbers | `bool` | false | Renders the ISO-8601 week number in the month grid and in the week view's time gutter. |
| ShowCurrentTimeIndicator | `bool` | true | Renders the current time indicator line on the day and week time grids. |
| MaxEventsPerDayCell | `int` | 3 | Number of event badges a month-grid cell renders before the rest collapse behind the "+N more" affordance. Clamped to 1–10. |
| RequireEventDescription | `bool` | false | Makes the description field of the built-in add/edit dialog mandatory. Only the title is required by default. |
| AllowEventOverlap | `bool` | true | Allows two events on the same resource to occupy the same time range. When false, a drag, resize, or dialog save that would create an overlap is refused. |
| AllowRangeSelection | `bool` | true | Lets the user press and drag across the day or week time grid to select a range of slots, which opens the new event already spanning it. A plain click still creates a one-slot event. |
| 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. |
| TodayButton | `string` | "Today" | Label for the today navigation button. |
| BitFcTodayButton | `string` | "Today" | Obsolete alias of TodayButton; it forwards to it and will be removed in a future release. |
| 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. |
| ShowWeekNumbersLabel | `string` | "Show week numbers" | Label for the week numbers setting toggle. |
| ShowCurrentTimeIndicatorLabel | `string` | "Show current time" | Label for the current time indicator setting toggle. |
| SlotDurationLabel | `string` | "Slot duration" | Label for the slot duration setting. |
| MinuteSuffix | `string` | "min" | Suffix appended to minute values in the settings. |
| 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. |
| AllDayLabel | `string` | "All day" | Label of the all-day switch in the add/edit dialog, and of an all-day event's badge and details. |
| WeekNumberFormat | `string` | "W{0}" | Format template of the week-number cell; {0} is the ISO-8601 week number. |
| WeekNumberAriaLabelFormat | `string` | "Week {0}" | Accessible name of a week-number cell; {0} is the ISO-8601 week number. |
| EventOverlapMessage | `string` | "This time range is already taken on that resource." | Notice shown when a move, resize, or save is refused because it would overlap another event. |
| OutOfRangeMessage | `string` | "That date is outside the allowed range." | Notice shown when a move or resize is refused because it falls outside the allowed date range. |
| OutsideBusinessHoursMessage | `string` | "That time is outside business hours." | Notice shown when a move, resize, or save is refused because it falls outside the business hours. |
| HighlightBusinessHoursLabel | `string` | "Highlight business hours" | Label for the business-hours toggle in the settings panel. |
| NavLinkDayAriaLabelFormat | `string` | "Go to {0}" | Accessible name of a day number or column header that navigates to that day; {0} is the formatted date. |
| NavLinkWeekAriaLabelFormat | `string` | "Go to week {0}" | Accessible name of a week number that navigates to that week; {0} is the ISO-8601 week number. |
| 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. |
| RepeatsLabel | `string` | "Repeats" | Label of the repeat-rule row in the event details dialog. |
| RepeatsDaily | `string` | "Daily" | Name of a daily repeat rule. |
| RepeatsWeekly | `string` | "Weekly" | Name of a weekly repeat rule. |
| RepeatsMonthly | `string` | "Monthly" | Name of a monthly repeat rule. |
| RepeatsYearly | `string` | "Yearly" | Name of a yearly repeat rule. |
| RepeatsIntervalFormat | `string` | "every {0}" | Appended to the frequency when the rule repeats every N units; {0} is the interval. |
| RepeatsCountFormat | `string` | "{0} times" | Appended when the series is closed by a number of occurrences; {0} is the count. |
| RepeatsUntilFormat | `string` | "until {0}" | Appended when the series is closed by a date; {0} is the formatted date. |
| RepeatsOnDaysFormat | `string` | "on {0}" | Appended when a weekly series names its weekdays; {0} is the abbreviated weekday names joined with ListSeparator. |
| RepeatsOnWeekOfMonthFormat | `string` | "on the {0} {1}" | Appended when a monthly or yearly series lands on a weekday of the month; {0} is the week of the month, {1} the weekday names. |
| ListSeparator | `string` | ", " | Separator between the items of a list in a summary, such as weekday names. |
| WeekOfMonthFirst | `string` | "first" | Name of BitFullCalendarWeekOfMonth.First. |
| WeekOfMonthSecond | `string` | "second" | Name of BitFullCalendarWeekOfMonth.Second. |
| WeekOfMonthThird | `string` | "third" | Name of BitFullCalendarWeekOfMonth.Third. |
| WeekOfMonthFourth | `string` | "fourth" | Name of BitFullCalendarWeekOfMonth.Fourth. |
| WeekOfMonthLast | `string` | "last" | Name of BitFullCalendarWeekOfMonth.Last. |
| RepeatLabel | `string` | "Repeat" | Label of the repeat picker in the add/edit dialog. |
| DoesNotRepeatOption | `string` | "Does not repeat" | The repeat picker's option for a one-off event. |
| RepeatEveryLabel | `string` | "Repeat every" | Label of the interval field in the add/edit dialog. |
| RepeatDaysUnit | `string` | "day(s)" | Unit shown after the interval of a daily series. |
| RepeatWeeksUnit | `string` | "week(s)" | Unit shown after the interval of a weekly series. |
| RepeatMonthsUnit | `string` | "month(s)" | Unit shown after the interval of a monthly series. |
| RepeatYearsUnit | `string` | "year(s)" | Unit shown after the interval of a yearly series. |
| RepeatOnLabel | `string` | "Repeat on" | Label of the weekday and day-of-the-month choices in the add/edit dialog. |
| RepeatOnDayOfMonthFormat | `string` | "Day {0}" | The option that keeps a monthly series on the start date's day number; {0} is that day. |
| RepeatOnWeekOfMonthFormat | `string` | "The {0}" | The option that moves a monthly or yearly series onto a weekday of the month; {0} is the week of the month. The weekdays are picked beside it. |
| EndsLabel | `string` | "Ends" | Label of the field that decides when a series ends. |
| EndsNeverOption | `string` | "Never" | The option for an open-ended series. |
| EndsOnDateOption | `string` | "On date" | The option for a series that ends on a date. |
| EndsAfterOption | `string` | "After" | The option for a series that ends after a number of occurrences. |
| OccurrencesLabel | `string` | "occurrence(s)" | Shown after the occurrence count of a series that ends after a number of occurrences. |
| RepeatExceptionsLabel | `string` | "Exceptions" | Label of the skipped and added dates of a series in the add/edit dialog. |
| SkipDateButton | `string` | "Skip date" | Button that adds the picked date to the dates a series skips. |
| AddDateButton | `string` | "Add date" | Button that adds the picked date to the dates a series also occurs on. |
| SkippedDatesLabel | `string` | "Skipped" | Caption of the dates a series skips. |
| AddedDatesLabel | `string` | "Added" | Caption of the dates a series also occurs on. |
| RemoveDateAriaLabel | `string` | "Remove date" | Accessible name of the button that removes a skipped or added date. |
| ValidationRepeatAtLeastOne | `string` | "Must be at least 1" | Validation message when an interval or an occurrence count is below 1. |
| ValidationUntilBeforeStart | `string` | "The series cannot end before it starts" | Validation message when a series is set to end before it starts. |
| RecurringEditTitle | `string` | "Edit recurring event" | Title of the prompt that asks whether an edit applies to one occurrence or the series. |
| RecurringDeleteTitle | `string` | "Delete recurring event" | Title of the prompt that asks whether a delete applies to one occurrence or the series. |
| ThisOccurrenceOption | `string` | "This event" | The choice that applies an edit or delete to the opened occurrence only. |
| AllOccurrencesOption | `string` | "All events in the series" | The choice that applies an edit or delete to the whole series. |
| OkButton | `string` | "OK" | Label of the button that confirms a prompt. |
| GetWeekOfMonthLabel(BitFullCalendarWeekOfMonth) | `string` | | Method that returns the localized name of a week of the month. |
| GetRecurrenceSummary(BitFullCalendarRecurrence, CultureInfo?, DateTime?) | `string` | | Method that returns the one-line repeat summary shown in the event details dialog. Pass the master's start so a rule that names no weekday can still be described. |
| 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. |
## Examples
\n**Basic**:
```razor
events = CreateEvents();
private static List CreateEvents()
{
var today = DateTime.Today;
var id = 0;
return
[
new() { Id = (++id).ToString(), Title = "Team Standup", Description = "Daily sync with engineering.", StartDate = today.AddHours(9), EndDate = today.AddHours(9).AddMinutes(45), Color = "blue" },
new() { Id = (++id).ToString(), Title = "Design Review", Description = "Dashboard mockups v2.", StartDate = today.AddHours(10), EndDate = today.AddHours(11), Color = "purple" },
new() { Id = (++id).ToString(), Title = "1:1 with Manager", Description = "Career and sprint check-in.", StartDate = today.AddHours(10).AddMinutes(30), EndDate = today.AddHours(11).AddMinutes(15), Color = "yellow" },
new() { Id = (++id).ToString(), Title = "Lunch with Client", Description = "Q3 roadmap discussion.", StartDate = today.AddHours(12), EndDate = today.AddHours(13).AddMinutes(30), Color = "green" },
new() { Id = (++id).ToString(), Title = "Sprint Planning", Description = "Next sprint goals and capacity.", StartDate = today.AddHours(14), EndDate = today.AddHours(15).AddMinutes(30), Color = "orange" },
new() { Id = (++id).ToString(), Title = "Code Review", Description = "Auth module PRs.", StartDate = today.AddHours(16), EndDate = today.AddHours(17), Color = "red" },
new() { Id = (++id).ToString(), Title = "Tech Conference", Description = "Keynotes and workshops.", StartDate = today.AddDays(1).AddHours(9), EndDate = today.AddDays(3).AddHours(17), Color = "blue" },
new() { Id = (++id).ToString(), Title = "Client Onboarding", Description = "Platform walkthrough.", StartDate = today.AddDays(1).AddHours(10), EndDate = today.AddDays(1).AddHours(11).AddMinutes(30), Color = "yellow" },
new() { Id = (++id).ToString(), Title = "Architecture Review", Description = "Migration plan.", StartDate = today.AddDays(2).AddHours(14), EndDate = today.AddDays(2).AddHours(16), Color = "red" },
new() { Id = (++id).ToString(), Title = "Company Retreat", Description = "Strategy and team building.", StartDate = today.AddDays(5), EndDate = today.AddDays(7).AddHours(16), Color = "purple" },
new() { Id = (++id).ToString(), Title = "Quarterly Review", Description = "Company-wide QBR.", StartDate = today.AddDays(-3).AddHours(10), EndDate = today.AddDays(-3).AddHours(12), Color = "red" },
new() { Id = (++id).ToString(), Title = "Product Demo", Description = "Stakeholder walkthrough.", StartDate = today.AddDays(-2).AddHours(14), EndDate = today.AddDays(-2).AddHours(15), Color = "orange" },
];
}
}
```
\n**Settings**:
```razor
events = CreateEvents();
private static List CreateEvents()
{
var today = DateTime.Today;
var id = 0;
return
[
new() { Id = (++id).ToString(), Title = "Team Standup", Description = "Daily sync with engineering.", StartDate = today.AddHours(9), EndDate = today.AddHours(9).AddMinutes(45), Color = "blue" },
new() { Id = (++id).ToString(), Title = "Design Review", Description = "Dashboard mockups v2.", StartDate = today.AddHours(10), EndDate = today.AddHours(11), Color = "purple" },
new() { Id = (++id).ToString(), Title = "1:1 with Manager", Description = "Career and sprint check-in.", StartDate = today.AddHours(10).AddMinutes(30), EndDate = today.AddHours(11).AddMinutes(15), Color = "yellow" },
new() { Id = (++id).ToString(), Title = "Lunch with Client", Description = "Q3 roadmap discussion.", StartDate = today.AddHours(12), EndDate = today.AddHours(13).AddMinutes(30), Color = "green" },
new() { Id = (++id).ToString(), Title = "Sprint Planning", Description = "Next sprint goals and capacity.", StartDate = today.AddHours(14), EndDate = today.AddHours(15).AddMinutes(30), Color = "orange" },
new() { Id = (++id).ToString(), Title = "Code Review", Description = "Auth module PRs.", StartDate = today.AddHours(16), EndDate = today.AddHours(17), Color = "red" },
new() { Id = (++id).ToString(), Title = "Tech Conference", Description = "Keynotes and workshops.", StartDate = today.AddDays(1).AddHours(9), EndDate = today.AddDays(3).AddHours(17), Color = "blue" },
new() { Id = (++id).ToString(), Title = "Client Onboarding", Description = "Platform walkthrough.", StartDate = today.AddDays(1).AddHours(10), EndDate = today.AddDays(1).AddHours(11).AddMinutes(30), Color = "yellow" },
new() { Id = (++id).ToString(), Title = "Architecture Review", Description = "Migration plan.", StartDate = today.AddDays(2).AddHours(14), EndDate = today.AddDays(2).AddHours(16), Color = "red" },
new() { Id = (++id).ToString(), Title = "Company Retreat", Description = "Strategy and team building.", StartDate = today.AddDays(5), EndDate = today.AddDays(7).AddHours(16), Color = "purple" },
new() { Id = (++id).ToString(), Title = "Quarterly Review", Description = "Company-wide QBR.", StartDate = today.AddDays(-3).AddHours(10), EndDate = today.AddDays(-3).AddHours(12), Color = "red" },
new() { Id = (++id).ToString(), Title = "Product Demo", Description = "Stakeholder walkthrough.", StartDate = today.AddDays(-2).AddHours(14), EndDate = today.AddDays(-2).AddHours(15), Color = "orange" },
];
}
}
```
\n**Time grid**:
```razor
events = CreateEvents();
private static List CreateEvents()
{
var today = DateTime.Today;
var id = 0;
return
[
new() { Id = (++id).ToString(), Title = "Team Standup", Description = "Daily sync with engineering.", StartDate = today.AddHours(9), EndDate = today.AddHours(9).AddMinutes(45), Color = "blue" },
new() { Id = (++id).ToString(), Title = "Design Review", Description = "Dashboard mockups v2.", StartDate = today.AddHours(10), EndDate = today.AddHours(11), Color = "purple" },
new() { Id = (++id).ToString(), Title = "1:1 with Manager", Description = "Career and sprint check-in.", StartDate = today.AddHours(10).AddMinutes(30), EndDate = today.AddHours(11).AddMinutes(15), Color = "yellow" },
new() { Id = (++id).ToString(), Title = "Lunch with Client", Description = "Q3 roadmap discussion.", StartDate = today.AddHours(12), EndDate = today.AddHours(13).AddMinutes(30), Color = "green" },
new() { Id = (++id).ToString(), Title = "Sprint Planning", Description = "Next sprint goals and capacity.", StartDate = today.AddHours(14), EndDate = today.AddHours(15).AddMinutes(30), Color = "orange" },
new() { Id = (++id).ToString(), Title = "Code Review", Description = "Auth module PRs.", StartDate = today.AddHours(16), EndDate = today.AddHours(17), Color = "red" },
new() { Id = (++id).ToString(), Title = "Tech Conference", Description = "Keynotes and workshops.", StartDate = today.AddDays(1).AddHours(9), EndDate = today.AddDays(3).AddHours(17), Color = "blue" },
new() { Id = (++id).ToString(), Title = "Client Onboarding", Description = "Platform walkthrough.", StartDate = today.AddDays(1).AddHours(10), EndDate = today.AddDays(1).AddHours(11).AddMinutes(30), Color = "yellow" },
new() { Id = (++id).ToString(), Title = "Architecture Review", Description = "Migration plan.", StartDate = today.AddDays(2).AddHours(14), EndDate = today.AddDays(2).AddHours(16), Color = "red" },
new() { Id = (++id).ToString(), Title = "Company Retreat", Description = "Strategy and team building.", StartDate = today.AddDays(5), EndDate = today.AddDays(7).AddHours(16), Color = "purple" },
new() { Id = (++id).ToString(), Title = "Quarterly Review", Description = "Company-wide QBR.", StartDate = today.AddDays(-3).AddHours(10), EndDate = today.AddDays(-3).AddHours(12), Color = "red" },
new() { Id = (++id).ToString(), Title = "Product Demo", Description = "Stakeholder walkthrough.", StartDate = today.AddDays(-2).AddHours(14), EndDate = today.AddDays(-2).AddHours(15), Color = "orange" },
];
}
}
```
\n**Work week**:
```razor
events = CreateEvents();
private static List CreateEvents()
{
var today = DateTime.Today;
var id = 0;
return
[
new() { Id = (++id).ToString(), Title = "Team Standup", Description = "Daily sync with engineering.", StartDate = today.AddHours(9), EndDate = today.AddHours(9).AddMinutes(45), Color = "blue" },
new() { Id = (++id).ToString(), Title = "Design Review", Description = "Dashboard mockups v2.", StartDate = today.AddHours(10), EndDate = today.AddHours(11), Color = "purple" },
new() { Id = (++id).ToString(), Title = "1:1 with Manager", Description = "Career and sprint check-in.", StartDate = today.AddHours(10).AddMinutes(30), EndDate = today.AddHours(11).AddMinutes(15), Color = "yellow" },
new() { Id = (++id).ToString(), Title = "Lunch with Client", Description = "Q3 roadmap discussion.", StartDate = today.AddHours(12), EndDate = today.AddHours(13).AddMinutes(30), Color = "green" },
new() { Id = (++id).ToString(), Title = "Sprint Planning", Description = "Next sprint goals and capacity.", StartDate = today.AddHours(14), EndDate = today.AddHours(15).AddMinutes(30), Color = "orange" },
new() { Id = (++id).ToString(), Title = "Code Review", Description = "Auth module PRs.", StartDate = today.AddHours(16), EndDate = today.AddHours(17), Color = "red" },
new() { Id = (++id).ToString(), Title = "Tech Conference", Description = "Keynotes and workshops.", StartDate = today.AddDays(1).AddHours(9), EndDate = today.AddDays(3).AddHours(17), Color = "blue" },
new() { Id = (++id).ToString(), Title = "Client Onboarding", Description = "Platform walkthrough.", StartDate = today.AddDays(1).AddHours(10), EndDate = today.AddDays(1).AddHours(11).AddMinutes(30), Color = "yellow" },
new() { Id = (++id).ToString(), Title = "Architecture Review", Description = "Migration plan.", StartDate = today.AddDays(2).AddHours(14), EndDate = today.AddDays(2).AddHours(16), Color = "red" },
new() { Id = (++id).ToString(), Title = "Company Retreat", Description = "Strategy and team building.", StartDate = today.AddDays(5), EndDate = today.AddDays(7).AddHours(16), Color = "purple" },
new() { Id = (++id).ToString(), Title = "Quarterly Review", Description = "Company-wide QBR.", StartDate = today.AddDays(-3).AddHours(10), EndDate = today.AddDays(-3).AddHours(12), Color = "red" },
new() { Id = (++id).ToString(), Title = "Product Demo", Description = "Stakeholder walkthrough.", StartDate = today.AddDays(-2).AddHours(14), EndDate = today.AddDays(-2).AddHours(15), Color = "orange" },
];
}
}
```
\n**All-day events**:
```razor
events = CreateAllDayEvents();
private static List CreateAllDayEvents()
{
var today = DateTime.Today;
var id = 200;
return
[
new() { Id = (++id).ToString(), Title = "Company Holiday", Description = "Offices closed.", StartDate = today, EndDate = today.AddDays(1), Color = "green", IsAllDay = true },
new() { Id = (++id).ToString(), Title = "Release Freeze", Description = "No deploys this week.", StartDate = today.AddDays(1), EndDate = today.AddDays(4), Color = "red", IsAllDay = true },
new() { Id = (++id).ToString(), Title = "Alice on leave", StartDate = today.AddDays(-1), EndDate = today.AddDays(2), Color = "yellow", IsAllDay = true },
new() { Id = (++id).ToString(), Title = "Team Standup", Description = "Daily sync with engineering.", StartDate = today.AddHours(9), EndDate = today.AddHours(9).AddMinutes(30), Color = "blue" },
new() { Id = (++id).ToString(), Title = "Sprint Planning", Description = "Next sprint goals.", StartDate = today.AddHours(14), EndDate = today.AddHours(15).AddMinutes(30), Color = "purple" },
];
}
}
```
\n**Event layout**:
```razor
events = CreateEvents();
private static List CreateEvents()
{
var today = DateTime.Today;
var id = 0;
return
[
new() { Id = (++id).ToString(), Title = "Team Standup", Description = "Daily sync with engineering.", StartDate = today.AddHours(9), EndDate = today.AddHours(9).AddMinutes(45), Color = "blue" },
new() { Id = (++id).ToString(), Title = "Design Review", Description = "Dashboard mockups v2.", StartDate = today.AddHours(10), EndDate = today.AddHours(11), Color = "purple" },
new() { Id = (++id).ToString(), Title = "1:1 with Manager", Description = "Career and sprint check-in.", StartDate = today.AddHours(10).AddMinutes(30), EndDate = today.AddHours(11).AddMinutes(15), Color = "yellow" },
new() { Id = (++id).ToString(), Title = "Lunch with Client", Description = "Q3 roadmap discussion.", StartDate = today.AddHours(12), EndDate = today.AddHours(13).AddMinutes(30), Color = "green" },
new() { Id = (++id).ToString(), Title = "Sprint Planning", Description = "Next sprint goals and capacity.", StartDate = today.AddHours(14), EndDate = today.AddHours(15).AddMinutes(30), Color = "orange" },
new() { Id = (++id).ToString(), Title = "Code Review", Description = "Auth module PRs.", StartDate = today.AddHours(16), EndDate = today.AddHours(17), Color = "red" },
new() { Id = (++id).ToString(), Title = "Tech Conference", Description = "Keynotes and workshops.", StartDate = today.AddDays(1).AddHours(9), EndDate = today.AddDays(3).AddHours(17), Color = "blue" },
new() { Id = (++id).ToString(), Title = "Client Onboarding", Description = "Platform walkthrough.", StartDate = today.AddDays(1).AddHours(10), EndDate = today.AddDays(1).AddHours(11).AddMinutes(30), Color = "yellow" },
new() { Id = (++id).ToString(), Title = "Architecture Review", Description = "Migration plan.", StartDate = today.AddDays(2).AddHours(14), EndDate = today.AddDays(2).AddHours(16), Color = "red" },
new() { Id = (++id).ToString(), Title = "Company Retreat", Description = "Strategy and team building.", StartDate = today.AddDays(5), EndDate = today.AddDays(7).AddHours(16), Color = "purple" },
new() { Id = (++id).ToString(), Title = "Quarterly Review", Description = "Company-wide QBR.", StartDate = today.AddDays(-3).AddHours(10), EndDate = today.AddDays(-3).AddHours(12), Color = "red" },
new() { Id = (++id).ToString(), Title = "Product Demo", Description = "Stakeholder walkthrough.", StartDate = today.AddDays(-2).AddHours(14), EndDate = today.AddDays(-2).AddHours(15), Color = "orange" },
];
}
}
```
\n**Event templates**:
```razor
EventCard => ev =>
@ MonthBadge => ev => @📌 @ev.Title;
private readonly List events = CreateEvents();
private static List CreateEvents()
{
var today = DateTime.Today;
var id = 0;
return
[
new() { Id = (++id).ToString(), Title = "Team Standup", Description = "Daily sync with engineering.", StartDate = today.AddHours(9), EndDate = today.AddHours(9).AddMinutes(45), Color = "blue" },
new() { Id = (++id).ToString(), Title = "Design Review", Description = "Dashboard mockups v2.", StartDate = today.AddHours(10), EndDate = today.AddHours(11), Color = "purple" },
new() { Id = (++id).ToString(), Title = "1:1 with Manager", Description = "Career and sprint check-in.", StartDate = today.AddHours(10).AddMinutes(30), EndDate = today.AddHours(11).AddMinutes(15), Color = "yellow" },
new() { Id = (++id).ToString(), Title = "Lunch with Client", Description = "Q3 roadmap discussion.", StartDate = today.AddHours(12), EndDate = today.AddHours(13).AddMinutes(30), Color = "green" },
new() { Id = (++id).ToString(), Title = "Sprint Planning", Description = "Next sprint goals and capacity.", StartDate = today.AddHours(14), EndDate = today.AddHours(15).AddMinutes(30), Color = "orange" },
new() { Id = (++id).ToString(), Title = "Code Review", Description = "Auth module PRs.", StartDate = today.AddHours(16), EndDate = today.AddHours(17), Color = "red" },
new() { Id = (++id).ToString(), Title = "Tech Conference", Description = "Keynotes and workshops.", StartDate = today.AddDays(1).AddHours(9), EndDate = today.AddDays(3).AddHours(17), Color = "blue" },
new() { Id = (++id).ToString(), Title = "Client Onboarding", Description = "Platform walkthrough.", StartDate = today.AddDays(1).AddHours(10), EndDate = today.AddDays(1).AddHours(11).AddMinutes(30), Color = "yellow" },
new() { Id = (++id).ToString(), Title = "Architecture Review", Description = "Migration plan.", StartDate = today.AddDays(2).AddHours(14), EndDate = today.AddDays(2).AddHours(16), Color = "red" },
new() { Id = (++id).ToString(), Title = "Company Retreat", Description = "Strategy and team building.", StartDate = today.AddDays(5), EndDate = today.AddDays(7).AddHours(16), Color = "purple" },
new() { Id = (++id).ToString(), Title = "Quarterly Review", Description = "Company-wide QBR.", StartDate = today.AddDays(-3).AddHours(10), EndDate = today.AddDays(-3).AddHours(12), Color = "red" },
new() { Id = (++id).ToString(), Title = "Product Demo", Description = "Stakeholder walkthrough.", StartDate = today.AddDays(-2).AddHours(14), EndDate = today.AddDays(-2).AddHours(15), Color = "orange" },
];
}
}
```
\n**Resource timeline**:
```razor
resources =
[
new() { Id = "room-bay", Title = "HQ - Bay Wing", Subtitle = "Headquarters" },
new() { Id = "room-garden", Title = "The Garden", Subtitle = "Headquarters" },
new() { Id = "room-war", Title = "War Room (B1)", Subtitle = "Basement" },
];
private readonly List events = CreateResourceEvents();
private static List CreateResourceEvents()
{
var today = DateTime.Today;
var id = 100;
return
[
new() { Id = (++id).ToString(), Title = "Design Review", StartDate = today.AddHours(10), EndDate = today.AddHours(11), Resource = "room-bay", Color = "purple" },
new() { Id = (++id).ToString(), Title = "Standup", StartDate = today.AddHours(9), EndDate = today.AddHours(9).AddMinutes(30), Resource = "room-garden", Color = "blue" },
new() { Id = (++id).ToString(), Title = "Incident Bridge", StartDate = today.AddHours(13), EndDate = today.AddHours(15), Resource = "room-war", Color = "red" },
new() { Id = (++id).ToString(), Title = "Workshop", StartDate = today.AddHours(14), EndDate = today.AddHours(16), Resource = "room-bay", Color = "orange" },
];
}
}
```
\n**Date bounds**:
```razor
events = CreateEvents();
private static List CreateEvents()
{
var today = DateTime.Today;
var id = 0;
return
[
new() { Id = (++id).ToString(), Title = "Team Standup", Description = "Daily sync with engineering.", StartDate = today.AddHours(9), EndDate = today.AddHours(9).AddMinutes(45), Color = "blue" },
new() { Id = (++id).ToString(), Title = "Design Review", Description = "Dashboard mockups v2.", StartDate = today.AddHours(10), EndDate = today.AddHours(11), Color = "purple" },
new() { Id = (++id).ToString(), Title = "1:1 with Manager", Description = "Career and sprint check-in.", StartDate = today.AddHours(10).AddMinutes(30), EndDate = today.AddHours(11).AddMinutes(15), Color = "yellow" },
new() { Id = (++id).ToString(), Title = "Lunch with Client", Description = "Q3 roadmap discussion.", StartDate = today.AddHours(12), EndDate = today.AddHours(13).AddMinutes(30), Color = "green" },
new() { Id = (++id).ToString(), Title = "Sprint Planning", Description = "Next sprint goals and capacity.", StartDate = today.AddHours(14), EndDate = today.AddHours(15).AddMinutes(30), Color = "orange" },
new() { Id = (++id).ToString(), Title = "Code Review", Description = "Auth module PRs.", StartDate = today.AddHours(16), EndDate = today.AddHours(17), Color = "red" },
new() { Id = (++id).ToString(), Title = "Tech Conference", Description = "Keynotes and workshops.", StartDate = today.AddDays(1).AddHours(9), EndDate = today.AddDays(3).AddHours(17), Color = "blue" },
new() { Id = (++id).ToString(), Title = "Client Onboarding", Description = "Platform walkthrough.", StartDate = today.AddDays(1).AddHours(10), EndDate = today.AddDays(1).AddHours(11).AddMinutes(30), Color = "yellow" },
new() { Id = (++id).ToString(), Title = "Architecture Review", Description = "Migration plan.", StartDate = today.AddDays(2).AddHours(14), EndDate = today.AddDays(2).AddHours(16), Color = "red" },
new() { Id = (++id).ToString(), Title = "Company Retreat", Description = "Strategy and team building.", StartDate = today.AddDays(5), EndDate = today.AddDays(7).AddHours(16), Color = "purple" },
new() { Id = (++id).ToString(), Title = "Quarterly Review", Description = "Company-wide QBR.", StartDate = today.AddDays(-3).AddHours(10), EndDate = today.AddDays(-3).AddHours(12), Color = "red" },
new() { Id = (++id).ToString(), Title = "Product Demo", Description = "Stakeholder walkthrough.", StartDate = today.AddDays(-2).AddHours(14), EndDate = today.AddDays(-2).AddHours(15), Color = "orange" },
];
}
}
```
\n**Booking rules**:
```razor
Last refusal: @(lastRefusal ?? "-")
@code {
private readonly BitFullCalendarSettings rulesSettings = new()
{
AllowEventOverlap = false,
VisibleStartHour = 8,
VisibleEndHour = 18
};
private bool allowOverlap
{
get => rulesSettings.AllowEventOverlap;
set => rulesSettings.AllowEventOverlap = value;
}
private string? lastRefusal;
private void HandleRefused(BitFullCalendarChangeRefusal refusal) => lastRefusal = refusal.ToString();
private readonly List events = CreateRuleEvents();
private static List CreateRuleEvents()
{
var today = DateTime.Today;
var id = 300;
return
[
new() { Id = (++id).ToString(), Title = "Payroll run", Description = "Locked - cannot be moved.", StartDate = today.AddHours(9), EndDate = today.AddHours(10), Color = "red", IsReadOnly = true },
new() { Id = (++id).ToString(), Title = "Design Review", Description = "Try dragging this onto the locked slot.", StartDate = today.AddHours(11), EndDate = today.AddHours(12), Color = "purple" },
new() { Id = (++id).ToString(), Title = "Retro", Description = "Sprint retrospective.", StartDate = today.AddHours(15), EndDate = today.AddHours(16), Color = "blue" },
];
}
}
```
\n**OnChange**:
```razor
Last change: @(lastChange ?? "-")
@code {
private string? lastChange;
private Task HandleChange(BitFullCalendarChangeEventArgs args)
{
lastChange = $"{args.Kind} ({args.Source}): {args.Event.Title}";
// Keep the bound list in sync with the calendar's internal state so changes are not lost on re-render.
switch (args.Kind)
{
case BitFullCalendarChangeKind.Add:
events.Add(args.Event);
break;
case BitFullCalendarChangeKind.Edit:
var index = events.FindIndex(e => e.Id == args.Event.Id);
if (index >= 0)
events[index] = args.Event;
else
events.Add(args.Event);
break;
case BitFullCalendarChangeKind.Delete:
events.RemoveAll(e => e.Id == args.Event.Id);
break;
}
return InvokeAsync(StateHasChanged);
}
private readonly List events = CreateEvents();
private static List CreateEvents()
{
var today = DateTime.Today;
var id = 0;
return
[
new() { Id = (++id).ToString(), Title = "Team Standup", Description = "Daily sync with engineering.", StartDate = today.AddHours(9), EndDate = today.AddHours(9).AddMinutes(45), Color = "blue" },
new() { Id = (++id).ToString(), Title = "Design Review", Description = "Dashboard mockups v2.", StartDate = today.AddHours(10), EndDate = today.AddHours(11), Color = "purple" },
new() { Id = (++id).ToString(), Title = "1:1 with Manager", Description = "Career and sprint check-in.", StartDate = today.AddHours(10).AddMinutes(30), EndDate = today.AddHours(11).AddMinutes(15), Color = "yellow" },
new() { Id = (++id).ToString(), Title = "Lunch with Client", Description = "Q3 roadmap discussion.", StartDate = today.AddHours(12), EndDate = today.AddHours(13).AddMinutes(30), Color = "green" },
new() { Id = (++id).ToString(), Title = "Sprint Planning", Description = "Next sprint goals and capacity.", StartDate = today.AddHours(14), EndDate = today.AddHours(15).AddMinutes(30), Color = "orange" },
new() { Id = (++id).ToString(), Title = "Code Review", Description = "Auth module PRs.", StartDate = today.AddHours(16), EndDate = today.AddHours(17), Color = "red" },
new() { Id = (++id).ToString(), Title = "Tech Conference", Description = "Keynotes and workshops.", StartDate = today.AddDays(1).AddHours(9), EndDate = today.AddDays(3).AddHours(17), Color = "blue" },
new() { Id = (++id).ToString(), Title = "Client Onboarding", Description = "Platform walkthrough.", StartDate = today.AddDays(1).AddHours(10), EndDate = today.AddDays(1).AddHours(11).AddMinutes(30), Color = "yellow" },
new() { Id = (++id).ToString(), Title = "Architecture Review", Description = "Migration plan.", StartDate = today.AddDays(2).AddHours(14), EndDate = today.AddDays(2).AddHours(16), Color = "red" },
new() { Id = (++id).ToString(), Title = "Company Retreat", Description = "Strategy and team building.", StartDate = today.AddDays(5), EndDate = today.AddDays(7).AddHours(16), Color = "purple" },
new() { Id = (++id).ToString(), Title = "Quarterly Review", Description = "Company-wide QBR.", StartDate = today.AddDays(-3).AddHours(10), EndDate = today.AddDays(-3).AddHours(12), Color = "red" },
new() { Id = (++id).ToString(), Title = "Product Demo", Description = "Stakeholder walkthrough.", StartDate = today.AddDays(-2).AddHours(14), EndDate = today.AddDays(-2).AddHours(15), Color = "orange" },
];
}
}
```
\n**Binding**:
```razor
Prev day
Today
Next day
View: @bindingView | Mode: @bindingMode | Date: @bindingDate.ToString("yyyy-MM-dd")
Last calendar event: @(bindingLog ?? "-")
@code {
private BitFullCalendarView bindingView = BitFullCalendarView.Week;
private BitFullCalendarMode _bindingMode = BitFullCalendarMode.Event;
private BitFullCalendarMode bindingMode
{
get => _bindingMode;
set
{
_bindingMode = value;
if (value == BitFullCalendarMode.Timeline && bindingView is BitFullCalendarView.Year or BitFullCalendarView.Agenda)
bindingView = BitFullCalendarView.Week;
}
}
private DateTime bindingDate = DateTime.Today;
private string? bindingLog;
private void HandleViewChange(BitFullCalendarView view) => bindingLog = $"View changed to {view}";
private void HandleModeChange(BitFullCalendarMode mode) => bindingLog = $"Mode changed to {mode}";
private void HandleDateChange(BitFullCalendarDateChangeEventArgs args)
=> bindingLog = $"Range {args.Start:yyyy-MM-dd} → {args.End:yyyy-MM-dd} ({args.View})";
private readonly List resources =
[
new() { Id = "room-bay", Title = "HQ - Bay Wing", Subtitle = "Headquarters" },
new() { Id = "room-garden", Title = "The Garden", Subtitle = "Headquarters" },
new() { Id = "room-war", Title = "War Room (B1)", Subtitle = "Basement" },
];
private readonly List events = CreateResourceEvents();
private static List CreateResourceEvents()
{
var today = DateTime.Today;
var id = 100;
return
[
new() { Id = (++id).ToString(), Title = "Design Review", StartDate = today.AddHours(10), EndDate = today.AddHours(11), Resource = "room-bay", Color = "purple" },
new() { Id = (++id).ToString(), Title = "Standup", StartDate = today.AddHours(9), EndDate = today.AddHours(9).AddMinutes(30), Resource = "room-garden", Color = "blue" },
new() { Id = (++id).ToString(), Title = "Incident Bridge", StartDate = today.AddHours(13), EndDate = today.AddHours(15), Resource = "room-war", Color = "red" },
new() { Id = (++id).ToString(), Title = "Workshop", StartDate = today.AddHours(14), EndDate = today.AddHours(16), Resource = "room-bay", Color = "orange" },
];
}
}
```
\n**Programmatic control**:
```razor
Previous
Today
Next
Day view
Month view
Read visible range
Visible range: @(range ?? "-")
@code {
private BitFullCalendar? calendar;
private string? range;
private void ShowVisibleRange()
{
if (calendar is null) return;
var (start, end) = calendar.GetVisibleRange();
range = $"{start:yyyy-MM-dd} → {end:yyyy-MM-dd}";
}
private readonly List events = CreateEvents();
private static List CreateEvents()
{
var today = DateTime.Today;
var id = 0;
return
[
new() { Id = (++id).ToString(), Title = "Team Standup", Description = "Daily sync with engineering.", StartDate = today.AddHours(9), EndDate = today.AddHours(9).AddMinutes(45), Color = "blue" },
new() { Id = (++id).ToString(), Title = "Design Review", Description = "Dashboard mockups v2.", StartDate = today.AddHours(10), EndDate = today.AddHours(11), Color = "purple" },
new() { Id = (++id).ToString(), Title = "1:1 with Manager", Description = "Career and sprint check-in.", StartDate = today.AddHours(10).AddMinutes(30), EndDate = today.AddHours(11).AddMinutes(15), Color = "yellow" },
new() { Id = (++id).ToString(), Title = "Lunch with Client", Description = "Q3 roadmap discussion.", StartDate = today.AddHours(12), EndDate = today.AddHours(13).AddMinutes(30), Color = "green" },
new() { Id = (++id).ToString(), Title = "Sprint Planning", Description = "Next sprint goals and capacity.", StartDate = today.AddHours(14), EndDate = today.AddHours(15).AddMinutes(30), Color = "orange" },
new() { Id = (++id).ToString(), Title = "Code Review", Description = "Auth module PRs.", StartDate = today.AddHours(16), EndDate = today.AddHours(17), Color = "red" },
new() { Id = (++id).ToString(), Title = "Tech Conference", Description = "Keynotes and workshops.", StartDate = today.AddDays(1).AddHours(9), EndDate = today.AddDays(3).AddHours(17), Color = "blue" },
new() { Id = (++id).ToString(), Title = "Client Onboarding", Description = "Platform walkthrough.", StartDate = today.AddDays(1).AddHours(10), EndDate = today.AddDays(1).AddHours(11).AddMinutes(30), Color = "yellow" },
new() { Id = (++id).ToString(), Title = "Architecture Review", Description = "Migration plan.", StartDate = today.AddDays(2).AddHours(14), EndDate = today.AddDays(2).AddHours(16), Color = "red" },
new() { Id = (++id).ToString(), Title = "Company Retreat", Description = "Strategy and team building.", StartDate = today.AddDays(5), EndDate = today.AddDays(7).AddHours(16), Color = "purple" },
new() { Id = (++id).ToString(), Title = "Quarterly Review", Description = "Company-wide QBR.", StartDate = today.AddDays(-3).AddHours(10), EndDate = today.AddDays(-3).AddHours(12), Color = "red" },
new() { Id = (++id).ToString(), Title = "Product Demo", Description = "Stakeholder walkthrough.", StartDate = today.AddDays(-2).AddHours(14), EndDate = today.AddDays(-2).AddHours(15), Color = "orange" },
];
}
}
```
\n**Localization**:
```razor
events = CreateEvents();
private static List CreateEvents()
{
var today = DateTime.Today;
var id = 0;
return
[
new() { Id = (++id).ToString(), Title = "Team Standup", Description = "Daily sync with engineering.", StartDate = today.AddHours(9), EndDate = today.AddHours(9).AddMinutes(45), Color = "blue" },
new() { Id = (++id).ToString(), Title = "Design Review", Description = "Dashboard mockups v2.", StartDate = today.AddHours(10), EndDate = today.AddHours(11), Color = "purple" },
new() { Id = (++id).ToString(), Title = "1:1 with Manager", Description = "Career and sprint check-in.", StartDate = today.AddHours(10).AddMinutes(30), EndDate = today.AddHours(11).AddMinutes(15), Color = "yellow" },
new() { Id = (++id).ToString(), Title = "Lunch with Client", Description = "Q3 roadmap discussion.", StartDate = today.AddHours(12), EndDate = today.AddHours(13).AddMinutes(30), Color = "green" },
new() { Id = (++id).ToString(), Title = "Sprint Planning", Description = "Next sprint goals and capacity.", StartDate = today.AddHours(14), EndDate = today.AddHours(15).AddMinutes(30), Color = "orange" },
new() { Id = (++id).ToString(), Title = "Code Review", Description = "Auth module PRs.", StartDate = today.AddHours(16), EndDate = today.AddHours(17), Color = "red" },
new() { Id = (++id).ToString(), Title = "Tech Conference", Description = "Keynotes and workshops.", StartDate = today.AddDays(1).AddHours(9), EndDate = today.AddDays(3).AddHours(17), Color = "blue" },
new() { Id = (++id).ToString(), Title = "Client Onboarding", Description = "Platform walkthrough.", StartDate = today.AddDays(1).AddHours(10), EndDate = today.AddDays(1).AddHours(11).AddMinutes(30), Color = "yellow" },
new() { Id = (++id).ToString(), Title = "Architecture Review", Description = "Migration plan.", StartDate = today.AddDays(2).AddHours(14), EndDate = today.AddDays(2).AddHours(16), Color = "red" },
new() { Id = (++id).ToString(), Title = "Company Retreat", Description = "Strategy and team building.", StartDate = today.AddDays(5), EndDate = today.AddDays(7).AddHours(16), Color = "purple" },
new() { Id = (++id).ToString(), Title = "Quarterly Review", Description = "Company-wide QBR.", StartDate = today.AddDays(-3).AddHours(10), EndDate = today.AddDays(-3).AddHours(12), Color = "red" },
new() { Id = (++id).ToString(), Title = "Product Demo", Description = "Stakeholder walkthrough.", StartDate = today.AddDays(-2).AddHours(14), EndDate = today.AddDays(-2).AddHours(15), Color = "orange" },
];
}
}
```
\n**Toolbar**:
```razor
Previous
Today
Next
}
events = CreateEvents();
private static List CreateEvents()
{
var today = DateTime.Today;
var id = 0;
return
[
new() { Id = (++id).ToString(), Title = "Team Standup", Description = "Daily sync with engineering.", StartDate = today.AddHours(9), EndDate = today.AddHours(9).AddMinutes(45), Color = "blue" },
new() { Id = (++id).ToString(), Title = "Design Review", Description = "Dashboard mockups v2.", StartDate = today.AddHours(10), EndDate = today.AddHours(11), Color = "purple" },
new() { Id = (++id).ToString(), Title = "1:1 with Manager", Description = "Career and sprint check-in.", StartDate = today.AddHours(10).AddMinutes(30), EndDate = today.AddHours(11).AddMinutes(15), Color = "yellow" },
new() { Id = (++id).ToString(), Title = "Lunch with Client", Description = "Q3 roadmap discussion.", StartDate = today.AddHours(12), EndDate = today.AddHours(13).AddMinutes(30), Color = "green" },
new() { Id = (++id).ToString(), Title = "Sprint Planning", Description = "Next sprint goals and capacity.", StartDate = today.AddHours(14), EndDate = today.AddHours(15).AddMinutes(30), Color = "orange" },
new() { Id = (++id).ToString(), Title = "Code Review", Description = "Auth module PRs.", StartDate = today.AddHours(16), EndDate = today.AddHours(17), Color = "red" },
new() { Id = (++id).ToString(), Title = "Tech Conference", Description = "Keynotes and workshops.", StartDate = today.AddDays(1).AddHours(9), EndDate = today.AddDays(3).AddHours(17), Color = "blue" },
new() { Id = (++id).ToString(), Title = "Client Onboarding", Description = "Platform walkthrough.", StartDate = today.AddDays(1).AddHours(10), EndDate = today.AddDays(1).AddHours(11).AddMinutes(30), Color = "yellow" },
new() { Id = (++id).ToString(), Title = "Architecture Review", Description = "Migration plan.", StartDate = today.AddDays(2).AddHours(14), EndDate = today.AddDays(2).AddHours(16), Color = "red" },
new() { Id = (++id).ToString(), Title = "Company Retreat", Description = "Strategy and team building.", StartDate = today.AddDays(5), EndDate = today.AddDays(7).AddHours(16), Color = "purple" },
new() { Id = (++id).ToString(), Title = "Quarterly Review", Description = "Company-wide QBR.", StartDate = today.AddDays(-3).AddHours(10), EndDate = today.AddDays(-3).AddHours(12), Color = "red" },
new() { Id = (++id).ToString(), Title = "Product Demo", Description = "Stakeholder walkthrough.", StartDate = today.AddDays(-2).AddHours(14), EndDate = today.AddDays(-2).AddHours(15), Color = "orange" },
];
}
}
```
\n**Views**:
```razor
events = CreateEvents();
private static List CreateEvents()
{
var today = DateTime.Today;
var id = 0;
return
[
new() { Id = (++id).ToString(), Title = "Team Standup", Description = "Daily sync with engineering.", StartDate = today.AddHours(9), EndDate = today.AddHours(9).AddMinutes(45), Color = "blue" },
new() { Id = (++id).ToString(), Title = "Design Review", Description = "Dashboard mockups v2.", StartDate = today.AddHours(10), EndDate = today.AddHours(11), Color = "purple" },
new() { Id = (++id).ToString(), Title = "1:1 with Manager", Description = "Career and sprint check-in.", StartDate = today.AddHours(10).AddMinutes(30), EndDate = today.AddHours(11).AddMinutes(15), Color = "yellow" },
new() { Id = (++id).ToString(), Title = "Lunch with Client", Description = "Q3 roadmap discussion.", StartDate = today.AddHours(12), EndDate = today.AddHours(13).AddMinutes(30), Color = "green" },
new() { Id = (++id).ToString(), Title = "Sprint Planning", Description = "Next sprint goals and capacity.", StartDate = today.AddHours(14), EndDate = today.AddHours(15).AddMinutes(30), Color = "orange" },
new() { Id = (++id).ToString(), Title = "Code Review", Description = "Auth module PRs.", StartDate = today.AddHours(16), EndDate = today.AddHours(17), Color = "red" },
new() { Id = (++id).ToString(), Title = "Tech Conference", Description = "Keynotes and workshops.", StartDate = today.AddDays(1).AddHours(9), EndDate = today.AddDays(3).AddHours(17), Color = "blue" },
new() { Id = (++id).ToString(), Title = "Client Onboarding", Description = "Platform walkthrough.", StartDate = today.AddDays(1).AddHours(10), EndDate = today.AddDays(1).AddHours(11).AddMinutes(30), Color = "yellow" },
new() { Id = (++id).ToString(), Title = "Architecture Review", Description = "Migration plan.", StartDate = today.AddDays(2).AddHours(14), EndDate = today.AddDays(2).AddHours(16), Color = "red" },
new() { Id = (++id).ToString(), Title = "Company Retreat", Description = "Strategy and team building.", StartDate = today.AddDays(5), EndDate = today.AddDays(7).AddHours(16), Color = "purple" },
new() { Id = (++id).ToString(), Title = "Quarterly Review", Description = "Company-wide QBR.", StartDate = today.AddDays(-3).AddHours(10), EndDate = today.AddDays(-3).AddHours(12), Color = "red" },
new() { Id = (++id).ToString(), Title = "Product Demo", Description = "Stakeholder walkthrough.", StartDate = today.AddDays(-2).AddHours(14), EndDate = today.AddDays(-2).AddHours(15), Color = "orange" },
];
}
}
```
\n**Read-only**:
```razor
events = CreateEvents();
private static List CreateEvents()
{
var today = DateTime.Today;
var id = 0;
return
[
new() { Id = (++id).ToString(), Title = "Team Standup", Description = "Daily sync with engineering.", StartDate = today.AddHours(9), EndDate = today.AddHours(9).AddMinutes(45), Color = "blue" },
new() { Id = (++id).ToString(), Title = "Design Review", Description = "Dashboard mockups v2.", StartDate = today.AddHours(10), EndDate = today.AddHours(11), Color = "purple" },
new() { Id = (++id).ToString(), Title = "1:1 with Manager", Description = "Career and sprint check-in.", StartDate = today.AddHours(10).AddMinutes(30), EndDate = today.AddHours(11).AddMinutes(15), Color = "yellow" },
new() { Id = (++id).ToString(), Title = "Lunch with Client", Description = "Q3 roadmap discussion.", StartDate = today.AddHours(12), EndDate = today.AddHours(13).AddMinutes(30), Color = "green" },
new() { Id = (++id).ToString(), Title = "Sprint Planning", Description = "Next sprint goals and capacity.", StartDate = today.AddHours(14), EndDate = today.AddHours(15).AddMinutes(30), Color = "orange" },
new() { Id = (++id).ToString(), Title = "Code Review", Description = "Auth module PRs.", StartDate = today.AddHours(16), EndDate = today.AddHours(17), Color = "red" },
new() { Id = (++id).ToString(), Title = "Tech Conference", Description = "Keynotes and workshops.", StartDate = today.AddDays(1).AddHours(9), EndDate = today.AddDays(3).AddHours(17), Color = "blue" },
new() { Id = (++id).ToString(), Title = "Client Onboarding", Description = "Platform walkthrough.", StartDate = today.AddDays(1).AddHours(10), EndDate = today.AddDays(1).AddHours(11).AddMinutes(30), Color = "yellow" },
new() { Id = (++id).ToString(), Title = "Architecture Review", Description = "Migration plan.", StartDate = today.AddDays(2).AddHours(14), EndDate = today.AddDays(2).AddHours(16), Color = "red" },
new() { Id = (++id).ToString(), Title = "Company Retreat", Description = "Strategy and team building.", StartDate = today.AddDays(5), EndDate = today.AddDays(7).AddHours(16), Color = "purple" },
new() { Id = (++id).ToString(), Title = "Quarterly Review", Description = "Company-wide QBR.", StartDate = today.AddDays(-3).AddHours(10), EndDate = today.AddDays(-3).AddHours(12), Color = "red" },
new() { Id = (++id).ToString(), Title = "Product Demo", Description = "Stakeholder walkthrough.", StartDate = today.AddDays(-2).AddHours(14), EndDate = today.AddDays(-2).AddHours(15), Color = "orange" },
];
}
}
```
\n**Recurring events**:
```razor
events = CreateRecurringEvents();
private static List CreateRecurringEvents()
{
var today = DateTime.Today;
var id = 400;
return
[
new()
{
Id = (++id).ToString(),
Title = "Daily Standup",
Description = "Every weekday at 09:00.",
StartDate = today.AddHours(9),
EndDate = today.AddHours(9).AddMinutes(15),
Color = "blue",
Recurrence = new()
{
Frequency = BitFullCalendarRecurrenceFrequency.Weekly,
DaysOfWeek = [DayOfWeek.Monday, DayOfWeek.Tuesday, DayOfWeek.Wednesday, DayOfWeek.Thursday, DayOfWeek.Friday],
// The one on the third day from now was cancelled.
ExceptionDates = [today.AddDays(3)]
}
},
new()
{
Id = (++id).ToString(),
Title = "Sprint Review",
Description = "Every other Friday, six times.",
StartDate = today.AddHours(15),
EndDate = today.AddHours(16),
Color = "purple",
Recurrence = new()
{
Frequency = BitFullCalendarRecurrenceFrequency.Weekly,
Interval = 2,
DaysOfWeek = [DayOfWeek.Friday],
Count = 6
}
},
new()
{
Id = (++id).ToString(),
Title = "Board Meeting",
Description = "The third Tuesday of every month for six months, plus one extra session.",
StartDate = today.AddHours(11),
EndDate = today.AddHours(12),
Color = "red",
Recurrence = new()
{
Frequency = BitFullCalendarRecurrenceFrequency.Monthly,
WeekOfMonth = BitFullCalendarWeekOfMonth.Third,
DaysOfWeek = [DayOfWeek.Tuesday],
Until = today.AddMonths(6),
// A make-up session outside the pattern.
AdditionalDates = [today.AddDays(10)]
}
},
new()
{
Id = (++id).ToString(),
Title = "Backup Check",
Description = "Every 15 days.",
StartDate = today.AddHours(8),
EndDate = today.AddHours(8).AddMinutes(30),
Color = "green",
Recurrence = new()
{
Frequency = BitFullCalendarRecurrenceFrequency.Daily,
Interval = 15
}
},
new()
{
Id = (++id).ToString(),
Title = "Month-end Report",
Description = "The last Friday of every month.",
StartDate = today.AddHours(16),
EndDate = today.AddHours(17),
Color = "orange",
Recurrence = new()
{
Frequency = BitFullCalendarRecurrenceFrequency.Monthly,
WeekOfMonth = BitFullCalendarWeekOfMonth.Last,
DaysOfWeek = [DayOfWeek.Friday]
}
},
];
}
}
```
\n**Business hours**:
```razor
Last refusal: @(lastRefusal ?? "-")
@code {
private readonly BitFullCalendarSettings settings = new()
{
HighlightBusinessHours = true,
BusinessDays = [DayOfWeek.Monday, DayOfWeek.Tuesday, DayOfWeek.Wednesday, DayOfWeek.Thursday, DayOfWeek.Friday],
BusinessStartHour = 9,
BusinessEndHour = 17,
VisibleStartHour = 6,
VisibleEndHour = 21
};
// The settings object is mutated in place: the calendar diffs it against the values it last
// applied, so only what actually changed is pushed back into the live state.
private bool highlightBusiness
{
get => settings.HighlightBusinessHours;
set => settings.HighlightBusinessHours = value;
}
private bool restrictBusiness
{
get => settings.RestrictToBusinessHours;
set => settings.RestrictToBusinessHours = value;
}
private string? lastRefusal;
private void HandleRefused(BitFullCalendarChangeRefusal refusal) => lastRefusal = refusal.ToString();
private readonly List events = CreateEvents();
private static List CreateEvents()
{
var today = DateTime.Today;
var id = 0;
return
[
new() { Id = (++id).ToString(), Title = "Team Standup", Description = "Daily sync with engineering.", StartDate = today.AddHours(9), EndDate = today.AddHours(9).AddMinutes(45), Color = "blue" },
new() { Id = (++id).ToString(), Title = "Design Review", Description = "Dashboard mockups v2.", StartDate = today.AddHours(10), EndDate = today.AddHours(11), Color = "purple" },
new() { Id = (++id).ToString(), Title = "1:1 with Manager", Description = "Career and sprint check-in.", StartDate = today.AddHours(10).AddMinutes(30), EndDate = today.AddHours(11).AddMinutes(15), Color = "yellow" },
new() { Id = (++id).ToString(), Title = "Lunch with Client", Description = "Q3 roadmap discussion.", StartDate = today.AddHours(12), EndDate = today.AddHours(13).AddMinutes(30), Color = "green" },
new() { Id = (++id).ToString(), Title = "Sprint Planning", Description = "Next sprint goals and capacity.", StartDate = today.AddHours(14), EndDate = today.AddHours(15).AddMinutes(30), Color = "orange" },
new() { Id = (++id).ToString(), Title = "Code Review", Description = "Auth module PRs.", StartDate = today.AddHours(16), EndDate = today.AddHours(17), Color = "red" },
new() { Id = (++id).ToString(), Title = "Tech Conference", Description = "Keynotes and workshops.", StartDate = today.AddDays(1).AddHours(9), EndDate = today.AddDays(3).AddHours(17), Color = "blue" },
new() { Id = (++id).ToString(), Title = "Client Onboarding", Description = "Platform walkthrough.", StartDate = today.AddDays(1).AddHours(10), EndDate = today.AddDays(1).AddHours(11).AddMinutes(30), Color = "yellow" },
new() { Id = (++id).ToString(), Title = "Architecture Review", Description = "Migration plan.", StartDate = today.AddDays(2).AddHours(14), EndDate = today.AddDays(2).AddHours(16), Color = "red" },
new() { Id = (++id).ToString(), Title = "Company Retreat", Description = "Strategy and team building.", StartDate = today.AddDays(5), EndDate = today.AddDays(7).AddHours(16), Color = "purple" },
new() { Id = (++id).ToString(), Title = "Quarterly Review", Description = "Company-wide QBR.", StartDate = today.AddDays(-3).AddHours(10), EndDate = today.AddDays(-3).AddHours(12), Color = "red" },
new() { Id = (++id).ToString(), Title = "Product Demo", Description = "Stakeholder walkthrough.", StartDate = today.AddDays(-2).AddHours(14), EndDate = today.AddDays(-2).AddHours(15), Color = "orange" },
];
}
}
```
\n**Month grid**:
```razor
events = CreateEvents();
private static List CreateEvents()
{
var today = DateTime.Today;
var id = 0;
return
[
new() { Id = (++id).ToString(), Title = "Team Standup", Description = "Daily sync with engineering.", StartDate = today.AddHours(9), EndDate = today.AddHours(9).AddMinutes(45), Color = "blue" },
new() { Id = (++id).ToString(), Title = "Design Review", Description = "Dashboard mockups v2.", StartDate = today.AddHours(10), EndDate = today.AddHours(11), Color = "purple" },
new() { Id = (++id).ToString(), Title = "1:1 with Manager", Description = "Career and sprint check-in.", StartDate = today.AddHours(10).AddMinutes(30), EndDate = today.AddHours(11).AddMinutes(15), Color = "yellow" },
new() { Id = (++id).ToString(), Title = "Lunch with Client", Description = "Q3 roadmap discussion.", StartDate = today.AddHours(12), EndDate = today.AddHours(13).AddMinutes(30), Color = "green" },
new() { Id = (++id).ToString(), Title = "Sprint Planning", Description = "Next sprint goals and capacity.", StartDate = today.AddHours(14), EndDate = today.AddHours(15).AddMinutes(30), Color = "orange" },
new() { Id = (++id).ToString(), Title = "Code Review", Description = "Auth module PRs.", StartDate = today.AddHours(16), EndDate = today.AddHours(17), Color = "red" },
new() { Id = (++id).ToString(), Title = "Tech Conference", Description = "Keynotes and workshops.", StartDate = today.AddDays(1).AddHours(9), EndDate = today.AddDays(3).AddHours(17), Color = "blue" },
new() { Id = (++id).ToString(), Title = "Client Onboarding", Description = "Platform walkthrough.", StartDate = today.AddDays(1).AddHours(10), EndDate = today.AddDays(1).AddHours(11).AddMinutes(30), Color = "yellow" },
new() { Id = (++id).ToString(), Title = "Architecture Review", Description = "Migration plan.", StartDate = today.AddDays(2).AddHours(14), EndDate = today.AddDays(2).AddHours(16), Color = "red" },
new() { Id = (++id).ToString(), Title = "Company Retreat", Description = "Strategy and team building.", StartDate = today.AddDays(5), EndDate = today.AddDays(7).AddHours(16), Color = "purple" },
new() { Id = (++id).ToString(), Title = "Quarterly Review", Description = "Company-wide QBR.", StartDate = today.AddDays(-3).AddHours(10), EndDate = today.AddDays(-3).AddHours(12), Color = "red" },
new() { Id = (++id).ToString(), Title = "Product Demo", Description = "Stakeholder walkthrough.", StartDate = today.AddDays(-2).AddHours(14), EndDate = today.AddDays(-2).AddHours(15), Color = "orange" },
];
}
}
```
\n**Navigation links**:
```razor
events = CreateEvents();
private static List CreateEvents()
{
var today = DateTime.Today;
var id = 0;
return
[
new() { Id = (++id).ToString(), Title = "Team Standup", Description = "Daily sync with engineering.", StartDate = today.AddHours(9), EndDate = today.AddHours(9).AddMinutes(45), Color = "blue" },
new() { Id = (++id).ToString(), Title = "Design Review", Description = "Dashboard mockups v2.", StartDate = today.AddHours(10), EndDate = today.AddHours(11), Color = "purple" },
new() { Id = (++id).ToString(), Title = "1:1 with Manager", Description = "Career and sprint check-in.", StartDate = today.AddHours(10).AddMinutes(30), EndDate = today.AddHours(11).AddMinutes(15), Color = "yellow" },
new() { Id = (++id).ToString(), Title = "Lunch with Client", Description = "Q3 roadmap discussion.", StartDate = today.AddHours(12), EndDate = today.AddHours(13).AddMinutes(30), Color = "green" },
new() { Id = (++id).ToString(), Title = "Sprint Planning", Description = "Next sprint goals and capacity.", StartDate = today.AddHours(14), EndDate = today.AddHours(15).AddMinutes(30), Color = "orange" },
new() { Id = (++id).ToString(), Title = "Code Review", Description = "Auth module PRs.", StartDate = today.AddHours(16), EndDate = today.AddHours(17), Color = "red" },
new() { Id = (++id).ToString(), Title = "Tech Conference", Description = "Keynotes and workshops.", StartDate = today.AddDays(1).AddHours(9), EndDate = today.AddDays(3).AddHours(17), Color = "blue" },
new() { Id = (++id).ToString(), Title = "Client Onboarding", Description = "Platform walkthrough.", StartDate = today.AddDays(1).AddHours(10), EndDate = today.AddDays(1).AddHours(11).AddMinutes(30), Color = "yellow" },
new() { Id = (++id).ToString(), Title = "Architecture Review", Description = "Migration plan.", StartDate = today.AddDays(2).AddHours(14), EndDate = today.AddDays(2).AddHours(16), Color = "red" },
new() { Id = (++id).ToString(), Title = "Company Retreat", Description = "Strategy and team building.", StartDate = today.AddDays(5), EndDate = today.AddDays(7).AddHours(16), Color = "purple" },
new() { Id = (++id).ToString(), Title = "Quarterly Review", Description = "Company-wide QBR.", StartDate = today.AddDays(-3).AddHours(10), EndDate = today.AddDays(-3).AddHours(12), Color = "red" },
new() { Id = (++id).ToString(), Title = "Product Demo", Description = "Stakeholder walkthrough.", StartDate = today.AddDays(-2).AddHours(14), EndDate = today.AddDays(-2).AddHours(15), Color = "orange" },
];
}
}
```
\n**Style & Class**:
```razor
events = CreateEvents();
private static List CreateEvents()
{
var today = DateTime.Today;
var id = 0;
return
[
new() { Id = (++id).ToString(), Title = "Team Standup", Description = "Daily sync with engineering.", StartDate = today.AddHours(9), EndDate = today.AddHours(9).AddMinutes(45), Color = "blue" },
new() { Id = (++id).ToString(), Title = "Design Review", Description = "Dashboard mockups v2.", StartDate = today.AddHours(10), EndDate = today.AddHours(11), Color = "purple" },
new() { Id = (++id).ToString(), Title = "1:1 with Manager", Description = "Career and sprint check-in.", StartDate = today.AddHours(10).AddMinutes(30), EndDate = today.AddHours(11).AddMinutes(15), Color = "yellow" },
new() { Id = (++id).ToString(), Title = "Lunch with Client", Description = "Q3 roadmap discussion.", StartDate = today.AddHours(12), EndDate = today.AddHours(13).AddMinutes(30), Color = "green" },
new() { Id = (++id).ToString(), Title = "Sprint Planning", Description = "Next sprint goals and capacity.", StartDate = today.AddHours(14), EndDate = today.AddHours(15).AddMinutes(30), Color = "orange" },
new() { Id = (++id).ToString(), Title = "Code Review", Description = "Auth module PRs.", StartDate = today.AddHours(16), EndDate = today.AddHours(17), Color = "red" },
new() { Id = (++id).ToString(), Title = "Tech Conference", Description = "Keynotes and workshops.", StartDate = today.AddDays(1).AddHours(9), EndDate = today.AddDays(3).AddHours(17), Color = "blue" },
new() { Id = (++id).ToString(), Title = "Client Onboarding", Description = "Platform walkthrough.", StartDate = today.AddDays(1).AddHours(10), EndDate = today.AddDays(1).AddHours(11).AddMinutes(30), Color = "yellow" },
new() { Id = (++id).ToString(), Title = "Architecture Review", Description = "Migration plan.", StartDate = today.AddDays(2).AddHours(14), EndDate = today.AddDays(2).AddHours(16), Color = "red" },
new() { Id = (++id).ToString(), Title = "Company Retreat", Description = "Strategy and team building.", StartDate = today.AddDays(5), EndDate = today.AddDays(7).AddHours(16), Color = "purple" },
new() { Id = (++id).ToString(), Title = "Quarterly Review", Description = "Company-wide QBR.", StartDate = today.AddDays(-3).AddHours(10), EndDate = today.AddDays(-3).AddHours(12), Color = "red" },
new() { Id = (++id).ToString(), Title = "Product Demo", Description = "Stakeholder walkthrough.", StartDate = today.AddDays(-2).AddHours(14), EndDate = today.AddDays(-2).AddHours(15), Color = "orange" },
];
}
}
```
\n**RTL**:
```razor
events = CreateEvents();
private static List CreateEvents()
{
var today = DateTime.Today;
var id = 0;
return
[
new() { Id = (++id).ToString(), Title = "Team Standup", Description = "Daily sync with engineering.", StartDate = today.AddHours(9), EndDate = today.AddHours(9).AddMinutes(45), Color = "blue" },
new() { Id = (++id).ToString(), Title = "Design Review", Description = "Dashboard mockups v2.", StartDate = today.AddHours(10), EndDate = today.AddHours(11), Color = "purple" },
new() { Id = (++id).ToString(), Title = "1:1 with Manager", Description = "Career and sprint check-in.", StartDate = today.AddHours(10).AddMinutes(30), EndDate = today.AddHours(11).AddMinutes(15), Color = "yellow" },
new() { Id = (++id).ToString(), Title = "Lunch with Client", Description = "Q3 roadmap discussion.", StartDate = today.AddHours(12), EndDate = today.AddHours(13).AddMinutes(30), Color = "green" },
new() { Id = (++id).ToString(), Title = "Sprint Planning", Description = "Next sprint goals and capacity.", StartDate = today.AddHours(14), EndDate = today.AddHours(15).AddMinutes(30), Color = "orange" },
new() { Id = (++id).ToString(), Title = "Code Review", Description = "Auth module PRs.", StartDate = today.AddHours(16), EndDate = today.AddHours(17), Color = "red" },
new() { Id = (++id).ToString(), Title = "Tech Conference", Description = "Keynotes and workshops.", StartDate = today.AddDays(1).AddHours(9), EndDate = today.AddDays(3).AddHours(17), Color = "blue" },
new() { Id = (++id).ToString(), Title = "Client Onboarding", Description = "Platform walkthrough.", StartDate = today.AddDays(1).AddHours(10), EndDate = today.AddDays(1).AddHours(11).AddMinutes(30), Color = "yellow" },
new() { Id = (++id).ToString(), Title = "Architecture Review", Description = "Migration plan.", StartDate = today.AddDays(2).AddHours(14), EndDate = today.AddDays(2).AddHours(16), Color = "red" },
new() { Id = (++id).ToString(), Title = "Company Retreat", Description = "Strategy and team building.", StartDate = today.AddDays(5), EndDate = today.AddDays(7).AddHours(16), Color = "purple" },
new() { Id = (++id).ToString(), Title = "Quarterly Review", Description = "Company-wide QBR.", StartDate = today.AddDays(-3).AddHours(10), EndDate = today.AddDays(-3).AddHours(12), Color = "red" },
new() { Id = (++id).ToString(), Title = "Product Demo", Description = "Stakeholder walkthrough.", StartDate = today.AddDays(-2).AddHours(14), EndDate = today.AddDays(-2).AddHours(15), Color = "orange" },
];
}
}
```
@ev.Title
@if (!string.IsNullOrWhiteSpace(ev.Description))
{
@ev.Description
}
;
private RenderFragment