Table of Contents

Class TwCalendar<T>

Namespace
TwBlazor.Components
Assembly
TwBlazor.dll

A Day/Week/Month schedule/agenda component. Composes TwCalendarDayView<T>, TwCalendarWeekView<T>, and TwCalendarMonthView<T> for its three views, and owns opening the built-in TwCalendarEventDialog<T> for creating/editing/viewing events.

public class TwCalendar<T> : TwBlazorComponentBase, IComponent, IHandleEvent, IHandleAfterRender, ITwComponent, IDisposable

Type Parameters

T

The type of Value for the events shown.

Inheritance
TwCalendar<T>
Implements
Inherited Members

Constructors

TwCalendar() 

public TwCalendar()

Properties

DialogProperties

The properties of Value the event dialog shows, as property name to label. Each one appears as a labeled value in the read-only dialog and as an editor in the create/edit dialog, matched to the property's type: text, number, switch (bool), date and time picker, or select (enum). Properties without a public setter, or of any other type, show as read-only text. Names that don't match a public property are ignored. An empty label falls back to the property name split into words. Entries render in dictionary order.

[Parameter]
public IReadOnlyDictionary<string, string>? DialogProperties { get; set; }

Property Value

IReadOnlyDictionary<string, string>

Remarks

Resolved with reflection on T. New events need a public parameterless constructor on T so the dialog has something to edit. The dialog works on a shallow copy of Value, so cancelling never changes the original.

Editable

Global gate for editing: shows the header's "+" add button, opens the event dialog in edit mode (rather than read-only) for events that don't set their own ReadOnly, and lets events be dragged to reschedule them (see the Day/Week/Month view remarks on exactly what dragging does in each).

[Parameter]
public bool Editable { get; set; }

Property Value

bool

EnabledViews

The views the user can switch between, shown as buttons in the header. null or empty (the default) enables all three. With one view enabled the switcher is hidden. If View isn't in the list, the calendar shows the first enabled view instead.

[Parameter]
public IReadOnlyCollection<TwCalendarView>? EnabledViews { get; set; }

Property Value

IReadOnlyCollection<TwCalendarView>

EventContentTemplate

Optional custom rendering for an event's chip/block content across all three views; defaults to just Name.

[Parameter]
public RenderFragment<Schedule<T>>? EventContentTemplate { get; set; }

Property Value

RenderFragment<Schedule<T>>

EventDialogContent

Optional extra fields rendered inside the built-in create/edit dialog, after Name/Start/End/Color and any DialogProperties - for data the dialog can't generate an editor for on its own. The template's context is the dialog's working Schedule<T> copy, whose Value is a shallow copy of the original, so mutating it in place is safe until Save.

[Parameter]
public RenderFragment<Schedule<T>>? EventDialogContent { get; set; }

Property Value

RenderFragment<Schedule<T>>

MaxHeight

The CSS max-height (e.g. "40rem", "600px") of the Day/Week views' scrollable time grid. Not used by the Month view, which never scrolls.

[Parameter]
public string MaxHeight { get; set; }

Property Value

string

OnEventCreated

Invoked with the new entry after the built-in dialog creates one.

[Parameter]
public EventCallback<Schedule<T>> OnEventCreated { get; set; }

Property Value

EventCallback<Schedule<T>>

OnEventDeleted

Invoked with the removed entry after the built-in dialog deletes it.

[Parameter]
public EventCallback<Schedule<T>> OnEventDeleted { get; set; }

Property Value

EventCallback<Schedule<T>>

OnEventUpdated

Invoked with the updated entry after the built-in dialog saves edits to an existing one.

[Parameter]
public EventCallback<Schedule<T>> OnEventUpdated { get; set; }

Property Value

EventCallback<Schedule<T>>

OnSearch

When set, shows a search icon button in the header that invokes this callback. No search logic lives in TwCalendar<T> itself - the search UI (and navigating to a found event via SelectedDate/View) is left entirely to the caller, since what "search" means depends on the caller's own data and T.

[Parameter]
public EventCallback OnSearch { get; set; }

Property Value

EventCallback

Schedules

The schedule entries shown across all three views.

[Parameter]
public List<Schedule<T>> Schedules { get; set; }

Property Value

List<Schedule<T>>

SchedulesChanged

The bound Schedules value; invoked whenever the built-in event dialog creates, edits, or deletes an entry.

[Parameter]
public EventCallback<List<Schedule<T>>> SchedulesChanged { get; set; }

Property Value

EventCallback<List<Schedule<T>>>

ScrollToTime

The time of day the Day/Week views' time grid is scrolled to the first time it mounts (e.g. TimeSpan.FromHours(8) for 8am, the default). Only applied once per mount - navigating between dates while staying on the same view preserves whatever the user has since scrolled to, rather than resetting it on every date change. Not used by the Month view, which never scrolls.

[Parameter]
public TimeSpan ScrollToTime { get; set; }

Property Value

TimeSpan

SelectedDate

The date driving the main view: the day shown in Day view, or the week/month containing it in Week/Month view.

[Parameter]
public DateTime SelectedDate { get; set; }

Property Value

DateTime

SelectedDateChanged

The bound SelectedDate value; invoked whenever navigation (Previous/Today/Next, or a day click in Week/Month view) moves it.

[Parameter]
public EventCallback<DateTime> SelectedDateChanged { get; set; }

Property Value

EventCallback<DateTime>

View

The currently displayed view.

[Parameter]
public TwCalendarView View { get; set; }

Property Value

TwCalendarView

ViewChanged

The bound View value; invoked whenever the view switcher, or a day click that drills into the Day view, changes it.

[Parameter]
public EventCallback<TwCalendarView> ViewChanged { get; set; }

Property Value

EventCallback<TwCalendarView>

Methods

BuildRenderTree(RenderTreeBuilder)

Renders the component to the supplied RenderTreeBuilder.

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

__builder RenderTreeBuilder

Dispose() 

public void Dispose()

Dispose(bool)

Releases the highlight timer's CancellationTokenSource.

protected virtual void Dispose(bool disposing)

Parameters

disposing bool

true when called from Dispose().

OnAfterRenderAsync(bool)

Method invoked after each time the component has been rendered interactively and the UI has finished updating (for example, after elements have been added to the browser DOM). Any ElementReference fields will be populated by the time this runs.

This method is not invoked during prerendering or server-side rendering, because those processes are not attached to any live browser DOM and are already complete before the DOM is updated.

Note that the component does not automatically re-render after the completion of any returned Task, because that would cause an infinite render loop.

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

firstRender bool

Set to true if this is the first time OnAfterRender(bool) has been invoked on this component instance; otherwise false.

Returns

Task

A Task representing any asynchronous operation.

Remarks

The OnAfterRender(bool) and OnAfterRenderAsync(bool) lifecycle methods are useful for performing interop, or interacting with values received from @ref. Use the firstRender parameter to ensure that initialization work is only performed once.

Edit this page