blazor-calendar/BlazorApp/Pages/Calendar.razor

@page "/calendars/{id:int}"
@inject Data.CalendarService _calendarService

<a href="/">
    <span class="oi oi-arrow-left"></span> Back
</a>

@if (_calendar == null || _events == null)
{
    <p>
        <em>Loading...</em>
    </p>
}
else
{
    <h1>Calendar "@_calendar.Name"</h1>
    @foreach (var @event in _events)
    {
        <div class="event">
            <a href="/calendars/@Id/events/@(@event.Uid)">
                <h2>@(@event.Summary)</h2>
            </a>

            @if (@event.DtStart != null)
            {
                <div>
                    <strong>Start:</strong> @(@event.DtStart)
                </div>
            }
            
            @if (@event.CalculatedEnd != null)
            {
                <div>
                    <strong>End:</strong> @(@event.CalculatedEnd)
                </div>
            }
            
            <div class="event-description-short">@(@event.Description)</div>
        </div>
    }
}

@code
{
    [Parameter]
    public int Id { get; set; }

    private Data.Calendar _calendar;
    private List<Data.Event> _events;

    protected override async Task OnInitializedAsync()
    {
        _calendar = await Data.CalendarService.GetCalendarById(Id);
        _events = await _calendar.GetEvents();
    }
}