Table of Contents

Class TwCalendarDayColumn<T>

Namespace
TwBlazor.Components
Assembly
TwBlazor.dll

Renders one day's 30-minute time-slot grid and its absolutely-positioned events. Shared by TwCalendarDayView<T> (a single instance) and TwCalendarWeekView<T> (seven instances side by side) - it renders no time labels or date header of its own, since those only need to appear once per view, not once per day column.

public class TwCalendarDayColumn<T> : TwBlazorComponentBase, IComponent, IHandleEvent, IHandleAfterRender, ITwComponent, IAsyncDisposable

Type Parameters

T

The type of Value for the events shown.

Inheritance
TwCalendarDayColumn<T>
Implements
Inherited Members

Remarks

Event positioning is expressed in rem rather than percentages: each of the 48 half-hour rows is exactly 3rem tall (matching the h-12 baked into SlotRow), so an event's offset from midnight converts directly to a top/height in the same unit without needing the container's total height to be sized explicitly. Overriding SlotRow with a different row height would need the constants below updated to match.

Constructors

TwCalendarDayColumn() 

public TwCalendarDayColumn()

Properties

Compact

Gets or sets whether event chips tighten up on a phone. Set by the Week view, where seven columns share the screen; the Day view's single column has room for the full chip.

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

Property Value

bool

Date

The day this column represents (only the date component is used).

[Parameter]
[EditorRequired]
public DateTime Date { get; set; }

Property Value

DateTime

DraggedEvent

The event currently being dragged, once the drag is live; null otherwise. While set, chips ignore pointer events so the slots beneath them (for example the slot of an event already sitting at the target time) can receive the drag and drop.

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

Property Value

Schedule<T>

DropPreview

Where DraggedEvent would land if released now. The placeholder only renders when this falls on Date.

[Parameter]
public DateTime? DropPreview { get; set; }

Property Value

DateTime?

Editable

When true, empty slots are clickable (invoking OnSlotClick) to start creating a new event at that time.

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

Property Value

bool

EventContentTemplate

Optional custom rendering for an event's chip content; defaults to just Name.

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

Property Value

RenderFragment<Schedule<T>>

Events

The events to render for this day. The caller is expected to have already filtered Schedules down to events starting on Date - events spanning multiple days aren't specially clipped/split across day columns in this first pass.

[Parameter]
public IReadOnlyList<Schedule<T>> Events { get; set; }

Property Value

IReadOnlyList<Schedule<T>>

JSRuntime 

[Inject]
public IJSRuntime JSRuntime { get; set; }

Property Value

IJSRuntime

OnEventClick

Invoked with the event when one of its chips is activated.

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

Property Value

EventCallback<Schedule<T>>

OnEventDragEnd

Invoked when a drag that started on one of this column's chips ends, whether or not it was dropped on a valid target.

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

Property Value

EventCallback

OnEventDragOver

Invoked with the start of the slot the dragged event is currently hovering, so the owner can track where it would land (see DropPreview).

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

Property Value

EventCallback<DateTime>

OnEventDragStart

Invoked with an event when dragging it starts (native HTML5 drag-and-drop). Only meaningful when Editable and the event isn't ReadOnly - see TwCalendar<T>'s draggedEvent field, which tracks this across day columns.

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

Property Value

EventCallback<Schedule<T>>

OnEventDrop

Invoked with a slot's start date/time when a dragged event is dropped there.

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

Property Value

EventCallback<DateTime>

OnSlotClick

Invoked with the clicked slot's start date/time when an empty slot is activated while Editable.

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

Property Value

EventCallback<DateTime>

OnSlotFocused

Invoked with the 0-based slot index whenever a slot in this column gains focus (by click, Tab, or arrow-key movement). TwCalendarWeekView<T> tracks this across its seven columns so an ArrowLeft/ArrowRight press knows which row to continue at in the neighboring column.

[Parameter]
public EventCallback<int> OnSlotFocused { get; set; }

Property Value

EventCallback<int>

Methods

BuildRenderTree(RenderTreeBuilder)

Renders the component to the supplied RenderTreeBuilder.

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

__builder RenderTreeBuilder

DisposeAsync() 

public ValueTask DisposeAsync()

Returns

ValueTask

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.

OnParametersSet()

Invoked when the component's parameters have been set. Ensures that the component has a unique identifier by generating one if none is provided.

protected override void OnParametersSet()

Remarks

If the component's identifier is not set, a unique ID is generated based on the component's type name (with a 'Tw' prefix removed if present) and a GUID. This helps ensure that each component instance can be uniquely identified, which is useful for scenarios such as associating labels with form elements or targeting elements in client-side scripts.

Edit this page