Table of Contents

Class TwCalendarTheme

Namespace
TwBlazor.Configuration.Components
Assembly
TwBlazor.dll

Theme configuration for the schedule/agenda component (TwCalendar<T>). Override any property to customize schedule styles globally.

[ExcludeFromCodeCoverage]
public class TwCalendarTheme
Inheritance
TwCalendarTheme
Inherited Members

Constructors

TwCalendarTheme() 

public TwCalendarTheme()

Properties

AddButton

Gets or sets the classes for the "add event" button shown when Editable is true.

public required string AddButton { get; set; }

Property Value

string

AllDayChipInset

Gets or sets the classes that inset an all-day bar slightly from its column edges, so bars on neighboring days don't touch.

public required string AllDayChipInset { get; set; }

Property Value

string

AllDayGrid

Gets or sets the classes for the strip's grid of day columns and event bars.

public required string AllDayGrid { get; set; }

Property Value

string

AllDayLabel

Gets or sets the classes for the strip's "All day" label, which sits in the same left-hand column as TimeGutter so the strip lines up with the time grid beneath it.

public required string AllDayLabel { get; set; }

Property Value

string

AllDayRow

Gets or sets the classes for the all-day strip above the Day/Week time grid (TwCalendarAllDayRow<T>): its bottom divider.

public required string AllDayRow { get; set; }

Property Value

string

Container

Gets or sets the classes for the root container.

public required string Container { get; set; }

Property Value

string

DayColumnDivider

Gets or sets the classes for the vertical divider between adjacent day columns in the Week view.

public required string DayColumnDivider { get; set; }

Property Value

string

DayColumnHeader

Gets or sets the classes for a day column's header in the Week view (e.g. "Mon 16").

public required string DayColumnHeader { get; set; }

Property Value

string

DayColumnHeaderCompact

Gets or sets the classes for the Week view header's compact label, shown only on a phone: the weekday stacked over the day number, so seven columns fit across a narrow screen.

public required string DayColumnHeaderCompact { get; set; }

Property Value

string

DayColumnHeaderDayNumber

Gets or sets the classes for the day number in the compact header label.

public required string DayColumnHeaderDayNumber { get; set; }

Property Value

string

DayColumnHeaderDayNumberToday

Gets or sets the classes layered on DayColumnHeaderDayNumber for today's date.

public required string DayColumnHeaderDayNumberToday { get; set; }

Property Value

string

DayColumnHeaderLabel

Gets or sets the classes for the Week view header's full label (e.g. "Mon 16"). On a phone it is visually hidden, staying as the button's accessible name, and the compact label is shown instead.

public required string DayColumnHeaderLabel { get; set; }

Property Value

string

DayColumnHeaderWeekday

Gets or sets the classes for the short weekday name in the compact header label.

public required string DayColumnHeaderWeekday { get; set; }

Property Value

string

DropPlaceholder

Gets or sets the classes for the dashed placeholder shown where a dragged event will land when released, in the Day/Week time grid and the Month view's day cells. Positioning and pointer-events-none are applied by the views themselves.

public required string DropPlaceholder { get; set; }

Property Value

string

EventChip

Gets or sets the classes for an event card rendered in the Day/Week time grid - a rounded, left-accent-bordered, top-left-aligned card (default styling; overridden per-event via inline style when Color is set - see TwBlazor.Components.TwCalendarColors).

public required string EventChip { get; set; }

Property Value

string

EventChipCompact

Gets or sets the classes layered on EventChip in the Week view, where a column is only a few characters wide on a phone: a thinner accent edge and tighter padding below the sm breakpoint.

public required string EventChipCompact { get; set; }

Property Value

string

EventChipDraggable

Gets or sets the classes layered onto EventChip/MonthEventRow for an event that can be dragged to reschedule it (Editable and not ReadOnly).

public required string EventChipDraggable { get; set; }

Property Value

string

EventChipReadOnly

Gets or sets the classes layered onto EventChip for a read-only event.

public required string EventChipReadOnly { get; set; }

Property Value

string

EventChipTime

Gets or sets the classes for an event card's subtitle line (its start time).

public required string EventChipTime { get; set; }

Property Value

string

EventChipTimeCompact

Gets or sets the classes layered on EventChipTime in the Week view: the start time is hidden on a phone, where the chip's position shows it and its accessible name still states it.

public required string EventChipTimeCompact { get; set; }

Property Value

string

EventChipTitle

Gets or sets the classes for an event card's title line (the event's name).

public required string EventChipTitle { get; set; }

Property Value

string

EventChipTitleCompact

Gets or sets the classes layered on EventChipTitle in the Week view: smaller text on a phone.

public required string EventChipTitleCompact { get; set; }

Property Value

string

EventDialogAccent

Gets or sets the classes for the thin accent bar at the top of the edit dialog's form. Its background switches to the event's own Color via inline style as the user picks one, so this only needs to carry the fallback color.

public required string EventDialogAccent { get; set; }

Property Value

string

EventDialogActions

Gets or sets the classes for the event dialog's footer button row.

public required string EventDialogActions { get; set; }

Property Value

string

EventDialogDateRow

Gets or sets the classes for the Start/End row in the edit dialog: one column on narrow screens, two side by side from the sm breakpoint.

public required string EventDialogDateRow { get; set; }

Property Value

string

EventDialogFields

Gets or sets the classes for the field stack in the built-in event create/edit/view dialog (TwCalendarEventDialog<T>).

public required string EventDialogFields { get; set; }

Property Value

string

EventDialogReadOnlyField

Gets or sets the classes for one label/value pair (e.g. "Start") in the read-only event dialog's body.

public required string EventDialogReadOnlyField { get; set; }

Property Value

string

EventDialogReadOnlyLabel

Gets or sets the classes for a read-only field's label text.

public required string EventDialogReadOnlyLabel { get; set; }

Property Value

string

EventDialogReadOnlyValue

Gets or sets the classes for a read-only field's value text.

public required string EventDialogReadOnlyValue { get; set; }

Property Value

string

EventDialogSummary

Gets or sets the classes for the read-only dialog's highlight card holding the event's date and time: a rounded, left-accent-bordered, tinted block (tinted with the event's color via inline style when one is set).

public required string EventDialogSummary { get; set; }

Property Value

string

EventDialogSummaryIcon

Gets or sets the classes for the calendar icon inside EventDialogSummary.

public required string EventDialogSummaryIcon { get; set; }

Property Value

string

Header

Gets or sets the classes for the header row (date label, search/nav/view/add controls).

public required string Header { get; set; }

Property Value

string

HeaderDateGroup

Gets or sets the classes for the header's left-hand date/title block.

public required string HeaderDateGroup { get; set; }

Property Value

string

HeaderSubtitle

Gets or sets the classes for the header's subtitle showing the current week's date range (e.g. "14 Sep 2026 - 20 Sep 2026").

public required string HeaderSubtitle { get; set; }

Property Value

string

HeaderTitle

Gets or sets the classes for the header's title (e.g. "September 2026").

public required string HeaderTitle { get; set; }

Property Value

string

HeaderTitleRow

Gets or sets the classes for the row pairing the header's title with its week-number TwChip.

public required string HeaderTitleRow { get; set; }

Property Value

string

MonthCell

Gets or sets the classes for a single day cell in the Month view.

public required string MonthCell { get; set; }

Property Value

string

MonthCellPrevNext

Gets or sets the classes layered onto MonthCell for a lead-in/trailing day from the previous or next month.

public required string MonthCellPrevNext { get; set; }

Property Value

string

MonthDayNumber

Gets or sets the classes for a Month view cell's day-of-month number - block-level, so it always sits on its own row above the cell's event list rather than inline with it.

public required string MonthDayNumber { get; set; }

Property Value

string

MonthEventList

Gets or sets the classes for the column stacking a Month view cell's events below its day number.

public required string MonthEventList { get; set; }

Property Value

string

MonthEventName

Gets or sets the classes for a Month view event row's name text, which is smaller on a phone.

public required string MonthEventName { get; set; }

Property Value

string

MonthEventRow

Gets or sets the classes for a single event row inside MonthEventList: a rounded, left-accent-bordered, tinted card (matching EventChip's default styling; overridden per-event via inline style when Color is set - see TwBlazor.Components.TwCalendarColors) holding the event's name and start time on one truncated line.

public required string MonthEventRow { get; set; }

Property Value

string

MonthEventTime

Gets or sets the classes for a Month view event row's start-time text. It is hidden on a phone, where a cell is only a few characters wide; the row's accessible name still states the time.

public required string MonthEventTime { get; set; }

Property Value

string

MonthGrid

Gets or sets the classes for the Month view's <table> grid.

public required string MonthGrid { get; set; }

Property Value

string

MonthOverflowLabel

Gets or sets the classes for the "+N more" overflow label shown in a Month view cell.

public required string MonthOverflowLabel { get; set; }

Property Value

string

NavButton

Gets or sets the classes for the Previous/Next navigation icon buttons.

public required string NavButton { get; set; }

Property Value

string

NowIndicatorDot

Gets or sets the classes for the dot marking today's column on NowIndicatorLine (only meaningfully distinct from the line's own left edge in the Week view, where the line spans every day column but the dot marks specifically which one is today).

public required string NowIndicatorDot { get; set; }

Property Value

string

NowIndicatorLabel

Gets or sets the classes for the current-time label overlaid on TimeGutter (e.g. "4:09 pm") when today falls within the displayed Day/Week view - see TwCalendarDayView<T>/TwCalendarWeekView<T>.

public required string NowIndicatorLabel { get; set; }

Property Value

string

NowIndicatorLine

Gets or sets the classes for the current-time horizontal line drawn across the Day/Week view's time grid.

public required string NowIndicatorLine { get; set; }

Property Value

string

ScrollContainer

Gets or sets the classes for the Day/Week view's scrollable time-grid area. Combined with an inline max-height derived from MaxHeight, so this should only carry the scroll behavior itself (e.g. overflow-y-auto), not a fixed height.

public required string ScrollContainer { get; set; }

Property Value

string

SearchButton

Gets or sets the classes for the search icon button shown when OnSearch has a delegate.

public required string SearchButton { get; set; }

Property Value

string

SegmentContinuesAfter

Gets or sets the classes for a bar that continues past the last day shown (for example into the next week): a square right edge.

public required string SegmentContinuesAfter { get; set; }

Property Value

string

SegmentContinuesBefore

Gets or sets the classes for a bar that continues from an earlier day than the first one shown (for example from the previous week): a square left edge.

public required string SegmentContinuesBefore { get; set; }

Property Value

string

SegmentSpacer

Gets or sets the classes for the invisible placeholder that keeps a Month view cell's own events below the multi-day bar passing through it. Its height must match MonthEventRow's rendered height.

public required string SegmentSpacer { get; set; }

Property Value

string

SegmentSpan

Gets or sets the classes layered onto MonthEventRow for a bar that spans several days (in the all-day strip or the Month view) so it paints above the cells it crosses.

public required string SegmentSpan { get; set; }

Property Value

string

SlotRow

Gets or sets the classes for a single 30-minute slot row's background/divider.

public required string SlotRow { get; set; }

Property Value

string

SlotRowHover

Gets or sets the classes added to a slot row on hover/focus when it's clickable (i.e. Editable is true).

public required string SlotRowHover { get; set; }

Property Value

string

TimeGutter

Gets or sets the classes for the Day/Week view's left-hand time-of-day label gutter.

public required string TimeGutter { get; set; }

Property Value

string

TimeGutterLabel

Gets or sets the classes for a single time label within TimeGutter.

public required string TimeGutterLabel { get; set; }

Property Value

string

TodayHighlight

Gets or sets the classes layered onto today's Week view column or Month view cell for a couple of seconds after "Today" is pressed: a tint plus a pulse animation to draw the eye to it.

public required string TodayHighlight { get; set; }

Property Value

string

ViewButtonActive

Gets or sets the classes layered onto NavButton for the active view's icon in the Day/Week/Month view switcher.

public required string ViewButtonActive { get; set; }

Property Value

string
Edit this page