**Calendar** The calendar control lets people select and view a single date or a range of dates in their calendar. It’s made up of 3 separate views: the month view, year view, and decade view.
**Basic**:
calendarEvents =
[
new() { Title = "Team standup",
Body = "Daily sync with the engineering team.",
Date = DateOnly.FromDateTime(DateTime.Today),
StartTime = new TimeOnly(9, 0),
EndTime = new TimeOnly(9, 30) },
new() { Title = "Product review",
Body = "Quarterly product review \u2014 prepare slides beforehand.",
Date = DateOnly.FromDateTime(DateTime.Today),
StartTime = new TimeOnly(14, 0),
EndTime = new TimeOnly(15, 0) },
new() { Title = "All-day workshop",
Body = "Full-day frontend architecture workshop.",
Date = DateOnly.FromDateTime(DateTime.Today.AddDays(3)) },
new() { Title = "Client call",
Body = "Introductory call with the new client.",
Date = DateOnly.FromDateTime(DateTime.Today.AddDays(7)),
StartTime = new TimeOnly(11, 30) }
];
**Validation**:
Submit
Reset
@if (string.IsNullOrEmpty(SuccessMessage) is false)
{
@SuccessMessage
}
public class BitCalendarValidationModel
{
[Required]
public DateTimeOffset? Date { get; set; }
}
private string SuccessMessage = string.Empty;
private BitCalendarValidationModel validationModel = new();
private async Task HandleValidSubmit()
{
SuccessMessage = "Form was submitted successfully!";
await Task.Delay(3000);
SuccessMessage = string.Empty;
StateHasChanged();
}
private void HandleInvalidSubmit()
{
SuccessMessage = string.Empty;
}
**Templates**:
@context.Day
@if (context.Day % 5 is 0)
{
}
@context
AC
**External Icons**:
Selected date: @timeZoneDate1?.ToString()
@{
TimeZoneInfo? timeZoneInfo = null;
var allTimeZones = TimeZoneInfo.GetSystemTimeZones();
if (allTimeZones.Count > 0)
{
timeZoneInfo = allTimeZones[0];
}
}
@if (timeZoneInfo is not null) {
"@timeZoneInfo.Id" TimeZone:
Selected date: @timeZoneDate2?.ToString()
}
private DateTimeOffset? timeZoneDate1;
private DateTimeOffset? timeZoneDate2;
**Binding**:
Selected date: @selectedDate.ToString()
private DateTimeOffset? selectedDate = new DateTimeOffset(2023, 8, 19, 0, 0, 0, DateTimeOffset.Now.Offset);
**ReadOnly**:
Selected DateTime: @selectedDateTime.ToString()
private DateTimeOffset? selectedDateTime = DateTimeOffset.Now;
**Events**:
@culture.DateTimeFormat.GetAbbreviatedMonthName(context.Month)