Eine Monatsansicht mit Terminen, die man auf einen Blick lesen kann. Mehrtägige Termine erscheinen an jedem Tag, den sie abdecken, und ein voller Tag zeigt einen Link +n weitere.
Warum es hilft
- Termine auf einem Monatsraster
- Mehrtägige Termine
- Überlauf behandelt
Wo es passt
- Teamkalender
- Feiertage
- Veranstaltungslisten
Beispiel
<EventCalendar Events="_events" @bind-Month="_month" OnEventClick="@(e => _last = e.Title)" OnDayClick="DayClicked" />
<span>Last click: @_last</span>
@code {
private DateTime _month = new(DateTime.Today.Year, DateTime.Today.Month, 1);
private string _last = "none";
private readonly List<CalendarEvent> _events = Build();
private void DayClicked(DateTime day) => _last = day.ToString("D");
private static List<CalendarEvent> Build()
{
var first = new DateTime(DateTime.Today.Year, DateTime.Today.Month, 1);
return
[
new("Planning", first.AddDays(2).AddHours(9)),
new("Release", first.AddDays(9), null, Severity.Success),
new("Conference", first.AddDays(11), first.AddDays(13), Severity.Warning),
new("Incident review", first.AddDays(11).AddHours(14), null, Severity.Error),
new("Team lunch", first.AddDays(11).AddHours(12), null, Severity.Neutral),
new("Demo", first.AddDays(11).AddHours(16)),
new("Retro", first.AddDays(20))
];
}
}Ein kurzes Fragment. Fügen Sie @using RayCraft.Blazor.Components zu Ihrer Seite hinzu und nutzen Sie einen interaktiven Render-Modus.
In RayCraft Free enthalten. Funktionierende Beispiele finden Sie im GitHub-Repository (MIT); es enthält Beispiel- und Democode, nicht den Code der Bibliothek.