Data
TwCalendar
TwCalendar is a Blazor Day, Week and Month calendar with drag and drop, all-day events, a built-in create and edit dialog, and configurable event details.
Last updated
Please be aware this component is new, may have bugs and/or be subject to change. Please report any bugs at
https://github.com/twblazor/twblazor/issues.
Views
Bind
Click an event to see its details. This calendar isn't editable, so every event opens read-only, and the extra details come from
SelectedDate and View to switch between Day, Week and Month.
The header names what you're looking at: the day, the week or the month. "Today" is on the
left and the previous and next buttons are on the right. Events that overlap in time sit side
by side. The Day and Week grids scroll once they pass MaxHeight (40rem
by default), and you can pass any CSS length, such as "30rem" or "600px".
They open scrolled to ScrollToTime, 8am by default, so you land on the working day
instead of midnight.
Click an event to see its details. This calendar isn't editable, so every event opens read-only, and the extra details come from
DialogProperties (see "Event Details in the Dialog"
below).
18 Oct 2026 - 24 Oct 2026
Week 4
October 2026
All day
12 AM
1 AM
2 AM
3 AM
4 AM
5 AM
6 AM
7 AM
8 AM
9 AM
10 AM
11 AM
12 PM
1 PM
2 PM
3 PM
4 PM
5 PM
6 PM
7 PM
8 PM
9 PM
10 PM
11 PM
Choosing which views to offer
All three views are available by default. Pass
EnabledViews an array of
TwCalendarView values to offer only some of them. The switcher in the header only
shows the views you list, always in the order Day, Week, Month. With a single view the switcher
disappears, and the calendar just shows that view. If View isn't in the list, the
first enabled view is shown instead. When the Day view is turned off, clicking a day in the Week
or Month view only selects the date. This example offers just Week and Month.
18 Oct 2026 - 24 Oct 2026
Week 4
October 2026
All day
12 AM
1 AM
2 AM
3 AM
4 AM
5 AM
6 AM
7 AM
8 AM
9 AM
10 AM
11 AM
12 PM
1 PM
2 PM
3 PM
4 PM
5 PM
6 PM
7 PM
8 PM
9 PM
10 PM
11 PM
All-day and multi-day events
An event that runs from midnight to midnight is an all-day event, and anything that lasts a day
or longer is treated the same way. In the Day and Week views these sit in an "All day" strip
above the time grid, like Microsoft Teams, so they don't cover the hours below. An event that
covers several days is one bar across those days. In the Month view every event that covers
more than one day is drawn as a bar across its days too, and it breaks at the end of each week
and carries on in the next. An event that crosses midnight but lasts less than a day stays in the
time grid and shows on both days.
To make an event all day, turn on "All day" in the edit dialog, or set it to start and end at midnight yourself. The dialog then asks for dates instead of times, and the end date is the last day you want to cover. You can drag an all-day event onto another day, and it keeps its length. In the example below, "Company holiday", "Product conference" and "Release weekend" are all-day events.
To make an event all day, turn on "All day" in the edit dialog, or set it to start and end at midnight yourself. The dialog then asks for dates instead of times, and the end date is the last day you want to cover. You can drag an all-day event onto another day, and it keeps its length. In the example below, "Company holiday", "Product conference" and "Release weekend" are all-day events.
18 Oct 2026 - 24 Oct 2026
Week 4
October 2026
All day
12 AM
1 AM
2 AM
3 AM
4 AM
5 AM
6 AM
7 AM
8 AM
9 AM
10 AM
11 AM
12 PM
1 PM
2 PM
3 PM
4 PM
5 PM
6 PM
7 PM
8 PM
9 PM
10 PM
11 PM
Adding & editing events
Set
Editable to get the "+" button in the header and let people open events in an
edit dialog. Click an empty time slot to create an event there, or click an existing event to
change it. An event with ReadOnly set always opens read-only, like "Lunch" and
"Payroll run" below, even when Editable is on. Editable events can also be dragged.
Move them between time slots (and between days in Week view), or between days in Month view,
where the time of day stays the same. A dashed placeholder shows where the event will land, even
over a slot that already has an event. The dialog's color picker sets
Schedule<T>.Color, which tints the event in every view. Leave it empty to use
the theme color.
Sunday, October 18, 2026
Week 4
18 Oct 2026 - 24 Oct 2026
12 AM
1 AM
2 AM
3 AM
4 AM
5 AM
6 AM
7 AM
8 AM
9 AM
10 AM
11 AM
12 PM
1 PM
2 PM
3 PM
4 PM
5 PM
6 PM
7 PM
8 PM
9 PM
10 PM
11 PM
Event details in the dialog
Your own data lives in
The dialog finds properties with reflection. Your type needs a public parameterless constructor so new events have something to edit, and the dialog works on a shallow copy of
Schedule<T>.Value. To show it in the dialog, pass
DialogProperties: a dictionary that maps a property name on your type to the label
you want. The read-only dialog lists each value that isn't empty. The edit dialog gives each
property an editor that fits its type: a text field for strings, a number field for numbers, a
switch for bool, a date and time picker for dates, and a select for enums. A
property with no public setter shows as plain text. Names that don't match a property are
skipped, and an empty label turns OrderNumber into "Order number". The properties
appear in the order you list them, after Name, Start, End and Color.
The dialog finds properties with reflection. Your type needs a public parameterless constructor so new events have something to edit, and the dialog works on a shallow copy of
Value, so cancelling never changes the original. If you need something this can't
express, such as a field that depends on another, use EventDialogContent to add
your own markup. In this example, the empty label for Priority falls back to
"Priority" and Attendees is relabeled "Guests".
Sunday, October 18, 2026
Week 4
18 Oct 2026 - 24 Oct 2026
12 AM
1 AM
2 AM
3 AM
4 AM
5 AM
6 AM
7 AM
8 AM
9 AM
10 AM
11 AM
12 PM
1 PM
2 PM
3 PM
4 PM
5 PM
6 PM
7 PM
8 PM
9 PM
10 PM
11 PM
Custom event content
Use
EventContentTemplate to change how each event looks in all three views.
18 Oct 2026 - 24 Oct 2026
Week 4
October 2026
All day
12 AM
1 AM
2 AM
3 AM
4 AM
5 AM
6 AM
7 AM
8 AM
9 AM
10 AM
11 AM
12 PM
1 PM
2 PM
3 PM
4 PM
5 PM
6 PM
7 PM
8 PM
9 PM
10 PM
11 PM
Search events
TwCalendar has no search of its own. Set OnSearch and the header shows
a search icon that calls your handler. This example opens a small dialog, built like any other
TwDialog content, that filters Schedules by name. When you pick a
result, it jumps to that event by setting @bind-SelectedDate and
@bind-View on the calendar.
18 Oct 2026 - 24 Oct 2026
Week 4
October 2026
All day
12 AM
1 AM
2 AM
3 AM
4 AM
5 AM
6 AM
7 AM
8 AM
9 AM
10 AM
11 AM
12 PM
1 PM
2 PM
3 PM
4 PM
5 PM
6 PM
7 PM
8 PM
9 PM
10 PM
11 PM
Theme configuration
Styling is controlled by
TwBlazorTheme.Components (a TwCalendarTheme), configured via the
AddTwBlazor() options callback described on the Get Started page.
Every property is a set of Tailwind classes, so changes are picked up by your own Tailwind build.
Full reference: TwCalendarTheme on the API docs.