Home

Basic usage

Display an annual view

@using BlazorCalendar
@using BlazorCalendar.Models

<CalendarContainer DisplayedView="DisplayedView.Annual" TasksList="TasksList.ToArray()" >
	<AnnualView Months="months" />
</CalendarContainer>

@code{
	private List<Tasks> TasksList;

	protected override void OnInitialized()
	{
		TasksList = new()
		{
			new Tasks { ID = 1, DateStart = today.AddDays(8), DateEnd = today.AddDays(8), Code = "CP", Color = "#19C319", Caption = "Lorem ipsum dolor sit amet" },
			new Tasks { ID = 2, DateStart = today.AddDays(50), DateEnd = today.AddDays(52), Code = "DEV", Color = "#FFD800", Comment="on Teams template", Caption = "Fusce quis purus eu ante" },
			new Tasks { ID = 3, DateStart = today.AddDays(62), DateEnd = today.AddDays(62), Code = "DEV", Color = "#FFD800" },`
			new Tasks { ID = 4, DateStart = today.AddDays(62), DateEnd = today.AddDays(62), Code = "FORM", Color = "#FFC3FF", Caption = "Ut sit amet turpis eget" } ,
			new Tasks { ID = 5, DateStart = today.AddDays(73).AddHours(8), DateEnd = today.AddDays(73).AddHours(9), Code = "MEETING", Color = "#2DD7D7", Comment="Julien's test" }
		};
	}
}

Display a monthly view :

@using BlazorCalendar
@using BlazorCalendar.Models

<CalendarContainer DisplayedView="DisplayedView.Monthly" TasksList="TasksList.ToArray()" >
	<MonthlyView  />
</CalendarContainer>

@code{
	private List<Tasks> TasksList;

	protected override void OnInitialized()
	{
		TasksList = new()
		{
			new Tasks { ID = 1, DateStart = today.AddDays(8), DateEnd = today.AddDays(8), Code = "CP", Color = "#19C319", Caption = "Lorem ipsum dolor sit amet" },
			new Tasks { ID = 2, DateStart = today.AddDays(50), DateEnd = today.AddDays(52), Code = "DEV", Color = "#FFD800", Caption = "Fusce quis purus eu ante" },
			new Tasks { ID = 3, DateStart = today.AddDays(62), DateEnd = today.AddDays(62), Code = "DEV", Color = "#FFD800" },`
			new Tasks { ID = 4, DateStart = today.AddDays(62), DateEnd = today.AddDays(62), Code = "FORM", Color = "#FFC3FF", Caption = "Ut sit amet turpis eget" } ,
			new Tasks { ID = 5, DateStart = today.AddDays(73).AddHours(8), DateEnd = today.AddDays(73).AddHours(9), Code = "MEETING", Color = "#2DD7D7" }
		};
	}
}

Switch between the 2 views :

@using BlazorCalendar

<select @bind="@SelectedView" >
	<option value="@DisplayedView.Annual" selected>Annual view</option>
	<option value="@DisplayedView.Monthly">Monthly view</option>
</select>

<CalendarContainer  DisplayedView="SelectedView"  >
	<AnnualView />
	<MonthlyView />
</CalendarContainer>

@code{
	private BlazorCalendar.DisplayedView SelectedView = DisplayedView.Monthly;
}

Next : https://github.com/tossnet/Blazor-Calendar/wiki/Parameters