Month View
The Month view of the Scheduler for Blazor shows an entire month to the user.
The Date parameter of the Scheduler controls which month is displayed. It's the one containing the date.
In this article:
View Parameters
The following parameters allow you to configure the month view:
| Attribute | Type and Default Value | Description |
|---|---|---|
ItemsPerSlot |
int ( 2) |
Indicates the number of appointments that are displayed per day. |
If there are more appointments for a day than per the ItemsPerSlot parameter, an ellipsis button provides access to the DayView for the specific day. You must define a day view so the user can see it. The Scheduler sorts and displays the number of appointments per the ItemsPerSlot parameter, by start time (ascending) and then by end time (descending).
If the ItemsPerSlot parameter is a zero or a negative value, an ArgumentOutOfRangeException is thrown.
Example
Declare the Month and Day Views in the markup
You can declare other views as well, this example adds only the month and day views for brevity.
@* Define the month view. *@
<TelerikScheduler Data="@Appointments" @bind-Date="@StartDate" @bind-View="@SelectedView" Height="600px">
<SchedulerViews>
<SchedulerMonthView ItemsPerSlot="@ItemsPerSlot"/>
<SchedulerDayView StartTime="@StartTime" />
</SchedulerViews>
</TelerikScheduler>
@code {
private DateTime StartDate { get; set; } = new DateTime(2019, 12, 2);
private DateTime StartTime { get; set; } = new DateTime(2000, 1, 1, 8, 0, 0);
private SchedulerView SelectedView { get; set; } = SchedulerView.Month;
private int ItemsPerSlot = 5;
private List<SchedulerAppointment> Appointments = new List<SchedulerAppointment>()
{
new SchedulerAppointment
{
Title = "Board meeting",
Description = "Q4 is coming to a close, review the details.",
Start = new DateTime(2019, 12, 5, 10, 00, 0),
End = new DateTime(2019, 12, 5, 11, 30, 0)
},
new SchedulerAppointment
{
Title = "Interview with new recruit",
Description = "See if John will be a suitable match for our team.",
Start = new DateTime(2019, 12, 5, 13, 00, 0),
End = new DateTime(2019, 12, 5, 13, 30, 0)
},
new SchedulerAppointment
{
Title = "Zoom call",
Description = "Everyone assemble! We will also have clients on the call from a later time zone.",
Start = new DateTime(2019, 12, 5, 14, 00, 0),
End = new DateTime(2019, 12, 5, 14, 30, 0)
},
new SchedulerAppointment
{
Title = "Performance review",
Description = "Performance evaluation of the new recruit.",
Start = new DateTime(2019, 12, 5, 14, 30, 0),
End = new DateTime(2019, 12, 5, 15, 45, 0)
},
new SchedulerAppointment
{
Title = "Dentist Appointment",
Description = "Get that cavity fixed.",
Start = new DateTime(2019, 12, 5, 16, 00, 0),
End = new DateTime(2019, 12, 5, 17, 30, 0)
},
new SchedulerAppointment
{
Title = "Vet visit",
Description = "The cat needs vaccinations and her teeth checked.",
Start = new DateTime(2019, 12, 2, 11, 30, 0),
End = new DateTime(2019, 12, 2, 12, 0, 0)
},
new SchedulerAppointment
{
Title = "Planning meeting",
Description = "Kick off the new project.",
Start = new DateTime(2019, 12, 6, 9, 30, 0),
End = new DateTime(2019, 12, 6, 12, 45, 0)
},
new SchedulerAppointment
{
Title = "Trip to Hawaii",
Description = "An unforgettable holiday!",
IsAllDay = true,
Start = new DateTime(2019, 11, 27),
End = new DateTime(2019, 12, 4)
}
};
public class SchedulerAppointment
{
public string Title { get; set; }
public string Description { get; set; }
public DateTime Start { get; set; }
public DateTime End { get; set; }
public bool IsAllDay { get; set; }
}
}
Resource Grouping in the Month View
You can configure the Month view to display appointments that are grouped by a resource.
Resource Grouping in a Month view.
@* The example showcases Resource Grouping by one resource. *@
@using System.Collections.Generic
@inject AppointmentService appointmentService
@inject ResourceService resourceService
<div class="example-wrapper">
<TelerikScheduler @bind-Date="@SelectedDate" Height="600px" Data="@Data"
OnCreate="@AddAppointment"
OnUpdate="@UpdateAppointment"
OnDelete="@DeleteAppointment"
AllowDelete="true"
AllowUpdate="true"
AllowCreate="true"
OnCancel="@(() => Console.WriteLine("CANCEL"))">
<SchedulerSettings>
<SchedulerGroupSettings Resources="@GroupingResources" Orientation="@SchedulerGroupOrientation.Horizontal"></SchedulerGroupSettings>
</SchedulerSettings>
<SchedulerViews>
<SchedulerDayView></SchedulerDayView>
<SchedulerWeekView></SchedulerWeekView>
<SchedulerMultiDayView></SchedulerMultiDayView>
<SchedulerMonthView></SchedulerMonthView>
<SchedulerTimelineView></SchedulerTimelineView>
</SchedulerViews>
<SchedulerResources>
<SchedulerResource Field="Room" Title="Edit Room" Data="@SchedulerResources"></SchedulerResource>
</SchedulerResources>
</TelerikScheduler>
</div>
@code
{
public DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0);
List<Appointment> Data = new List<Appointment>();
List<Resource> SchedulerResources = new List<Resource>();
List<Resource> SchedulerManagers = new List<Resource>();
List<Resource> SchedulerDirectors = new List<Resource>();
List<string> GroupingResources = new List<string> { "Room" };
protected override async Task OnInitializedAsync()
{
SchedulerDirectors = await resourceService.GetDirectorsAsync();
SchedulerResources = await resourceService.GetResourcesAsync();
SchedulerManagers = await resourceService.GetManagersAsync();
Data = await appointmentService.GetAppointmentsAsync();
}
void UpdateAppointment(SchedulerUpdateEventArgs args)
{
Appointment item = (Appointment)args.Item;
var matchingItem = Data.FirstOrDefault(a => a.Id == item.Id);
if (matchingItem != null)
{
matchingItem.Title = item.Title;
matchingItem.Description = item.Description;
matchingItem.Start = item.Start;
matchingItem.End = item.End;
matchingItem.IsAllDay = item.IsAllDay;
matchingItem.Room = item.Room;
matchingItem.Manager = item.Manager;
}
}
void AddAppointment(SchedulerCreateEventArgs args)
{
Appointment item = args.Item as Appointment;
Data.Add(item);
}
void DeleteAppointment(SchedulerDeleteEventArgs args)
{
Appointment item = (Appointment)args.Item;
Data.Remove(item);
}
}
using System;
using System.Collections.Generic;
using System.Threading.Tasks;
public class AppointmentService
{
public async Task<List<Appointment>> GetAppointmentsAsync()
{
await Task.Delay(0);
return GetAppointments();
}
public List<Appointment> GetAppointments()
{
List<Appointment> data = new List<Appointment>();
DateTime baselineTime = GetStartTime();
data.Add(new Appointment
{
Title = "Vet visit",
Description = "The cat needs vaccinations and her teeth checked.",
Start = baselineTime.AddHours(2),
End = baselineTime.AddHours(2).AddMinutes(30)
});
data.Add(new Appointment
{
Title = "Trip to Hawaii",
Description = "An unforgettable holiday!",
IsAllDay = true,
Start = baselineTime.AddDays(-10),
End = baselineTime.AddDays(-2)
});
data.Add(new Appointment
{
Title = "Jane's birthday party",
Description = "Make sure to get her fresh flowers in addition to the gift.",
Start = baselineTime.AddDays(5).AddHours(10),
End = baselineTime.AddDays(5).AddHours(18),
});
data.Add(new Appointment
{
Title = "One-on-one with the manager",
Start = baselineTime.AddDays(2).AddHours(3).AddMinutes(30),
End = baselineTime.AddDays(2).AddHours(3).AddMinutes(45),
});
data.Add(new Appointment
{
Title = "Brunch with HR",
Description = "Performance evaluation of the new recruit.",
Start = baselineTime.AddDays(3).AddHours(3),
End = baselineTime.AddDays(3).AddHours(3).AddMinutes(45)
});
data.Add(new Appointment
{
Title = "Interview with new recruit",
Description = "See if John will be a suitable match for our team.",
Start = baselineTime.AddDays(3).AddHours(1).AddMinutes(30),
End = baselineTime.AddDays(3).AddHours(2).AddMinutes(30)
});
data.Add(new Appointment
{
Title = "Conference",
Description = "The big important work conference. Don't forget to practice your presentation.",
Start = baselineTime.AddDays(6),
End = baselineTime.AddDays(11),
IsAllDay = true
});
data.Add(new Appointment
{
Title = "New Project Kickoff",
Description = "Everyone assemble! We will also have clients on the call from a later time zone.",
Start = baselineTime.AddDays(3).AddHours(8).AddMinutes(30),
End = baselineTime.AddDays(3).AddHours(11).AddMinutes(30)
});
data.Add(new Appointment
{
Title = "Get photos",
Description = "Get the printed photos from last week's holiday. It's on the way from the vet to work.",
Start = baselineTime.AddHours(2).AddMinutes(15),
End = baselineTime.AddHours(2).AddMinutes(30)
});
var rng = new Random();
var startDate = new DateTime(2019, 11, 10);
data.Add(new Appointment()
{
Title = "AllDay 1.0-1.0",
Start = startDate.AddDays(5),
End = startDate.AddDays(5),
IsAllDay = true
});
data.Add(new Appointment()
{
Title = "AllDay 1.2-1.2",
Start = startDate.AddDays(5).AddHours(2),
End = startDate.AddDays(5).AddHours(2),
IsAllDay = true
});
data.Add(new Appointment()
{
Title = "AllDay 1.0-2.0",
Start = startDate.AddDays(5),
End = startDate.AddDays(6),
IsAllDay = true
});
data.Add(new Appointment()
{
Title = "S AllDay",
Start = startDate,
End = startDate.AddDays(1)
});
data.Add(new Appointment()
{
Title = "S AllDay 2",
Start = startDate,
End = startDate.AddDays(1)
});
data.Add(new Appointment()
{
Title = "S AllDay 3",
Start = startDate.AddDays(-1),
End = startDate.AddDays(1)
});
data.Add(new Appointment()
{
Title = "S AllDay 4",
Start = startDate.AddDays(1),
End = startDate.AddDays(2)
});
data.Add(new Appointment()
{
Title = "S AllDay span 3",
Start = startDate.AddDays(1),
End = startDate.AddDays(4)
});
data.Add(new Appointment()
{
Title = "At Start",
Start = startDate,
End = startDate.AddHours(1)
});
data.Add(new Appointment()
{
Title = "Middle",
Start = startDate.AddHours(9),
End = startDate.AddHours(10)
});
data.Add(new Appointment()
{
Title = "Before Start",
Start = startDate.AddDays(1).AddHours(5),
End = startDate.AddDays(1).AddHours(10)
});
data.Add(new Appointment()
{
Title = "After End",
Start = startDate.AddHours(16),
End = startDate.AddHours(19)
});
data.Add(new Appointment()
{
Title = "Two Day",
Start = startDate.AddDays(1).AddHours(22),
End = startDate.AddDays(2).AddHours(3)
});
data.Add(new Appointment()
{
Title = "Three Day",
Start = startDate.AddDays(2).AddHours(4),
End = startDate.AddDays(5).AddHours(23)
});
data.Add(new Appointment()
{
Title = "Not exact",
Start = startDate.AddDays(5).AddHours(8).AddMinutes(11),
End = startDate.AddDays(5).AddHours(9).AddMinutes(11)
});
data.Add(new Appointment()
{
Title = "Not exact end",
Start = startDate.AddDays(5).AddHours(10),
End = startDate.AddDays(5).AddHours(10).AddMinutes(11)
});
data.Add(new Appointment()
{
Title = "Not exact start",
Start = startDate.AddDays(5).AddHours(12).AddMinutes(11),
End = startDate.AddDays(5).AddHours(13)
});
data.Add(new Appointment()
{
Title = "At End",
Start = startDate.AddDays(6).AddHours(23),
End = startDate.AddDays(6).AddHours(24)
});
data.Add(new Appointment()
{
Title = "Same Slot 1",
Start = startDate.AddDays(2).AddHours(9),
End = startDate.AddDays(2).AddHours(12)
});
data.Add(new Appointment()
{
Title = "Same Slot 2",
Start = startDate.AddDays(2).AddHours(10),
End = startDate.AddDays(2).AddHours(11)
});
data.Add(new Appointment()
{
Title = "Same Slot 2",
Start = startDate.AddDays(2).AddHours(11),
End = startDate.AddDays(2).AddHours(12)
});
data.Add(new Appointment()
{
Title = "Same Slot 2",
Start = startDate.AddDays(2).AddHours(11),
End = startDate.AddDays(2).AddHours(12)
});
data.Add(new Appointment()
{
Title = "Same Slot 11",
Start = startDate.AddDays(3).AddHours(9),
End = startDate.AddDays(3).AddHours(12)
});
data.Add(new Appointment()
{
Title = "Same Slot 12",
Start = startDate.AddDays(3).AddHours(9),
End = startDate.AddDays(3).AddHours(10)
});
data.Add(new Appointment()
{
Title = "Same Slot 13",
Start = startDate.AddDays(3).AddHours(9),
End = startDate.AddDays(3).AddHours(11)
});
data.Add(new Appointment()
{
Title = "Same Slot 14",
Start = startDate.AddDays(3).AddHours(11).AddMinutes(30),
End = startDate.AddDays(3).AddHours(13)
});
data.Add(new Appointment()
{
Title = "Same Slot 15",
Start = startDate.AddDays(3).AddHours(11),
End = startDate.AddDays(3).AddHours(12)
});
return data;
}
public DateTime GetStartTime()
{
DateTime dt = new DateTime(2019, 12, 11);
int daysSinceMonday = dt.DayOfWeek - DayOfWeek.Monday;
return new DateTime(dt.Year, dt.Month, dt.Day - daysSinceMonday, 8, 0, 0);
}
}
using System.Collections.Generic;
using System.Threading.Tasks;
public class ResourceService
{
public async Task<List<Resource>> GetResourcesAsync()
{
await Task.Delay(0);
return GetResources();
}
public List<Resource> GetResources()
{
List<Resource> result = new List<Resource>();
result.Add(new Resource()
{
Text = "None",
Value = "",
Color = ""
});
result.Add(new Resource()
{
Text = "Small meeting room",
Value = "1",
Color = "#66ccff"
});
result.Add(new Resource()
{
Text = "Big meeting room",
Value = "2",
Color = "#0066ff"
});
return result;
}
public async Task<List<Resource>> GetManagersAsync()
{
await Task.Delay(0);
return GetManagers();
}
public List<Resource> GetManagers()
{
List<Resource> result = new List<Resource>();
result.Add(new Resource()
{
Text = "Alex",
Value = "1",
Color = "#99ffcc"
});
result.Add(new Resource()
{
Text = "Bob",
Value = "2",
Color = "#47d147"
});
result.Add(new Resource()
{
Text = "Charlie",
Value = "3",
Color = "#336600"
});
return result;
}
public async Task<List<Resource>> GetDirectorsAsync()
{
await Task.Delay(0);
return GetDirectors();
}
public List<Resource> GetDirectors()
{
List<Resource> result = new List<Resource>();
result.Add(new Resource()
{
Text = "Mr. Director",
Value = "1",
Color = ""
});
result.Add(new Resource()
{
Text = "Mrs. Director",
Value = "2",
Color = ""
});
return result;
}
}
public class Resource
{
public string Text { get; set; }
public string Value { get; set; }
public string Color { get; set; }
}
using System;
public class Appointment
{
public Guid Id { get; set; }
public string Title { get; set; }
public DateTime Start { get; set; }
public DateTime End { get; set; }
public bool IsAllDay { get; set; }
public string Description { get; set; }
public string Room { get; set; }
public string Manager { get; set; }
public Appointment()
{
var rand = new Random();
Id = Guid.NewGuid();
Room = rand.Next(1, 3).ToString();
Manager = rand.Next(1, 4).ToString();
}
}