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.
Each day slot shows up to two appointments. If there are more appointments for a day, an ellipsis button will provide access to the DayView for the specific day. This avoids cluttering. You can also access the day view from the day number. Of course, you must also define a day view so the user can see it.
Here is how the Scheduler determines which two appointments to display in a month view slot:
- The Scheduler sorts all appointments in the current month by start date (ascending) and then by end date (descending).
- It takes the first two appointments for each day from the sorted collection.
- The component sorts the two appointments for each day by start time (ascending) and then by end time (descending).
In this article:
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. The screenshot above is the result from this code snippet
This example also shows how to add a day view so the user can see details for busy days with more than 2 events*@
<TelerikScheduler Data="@Appointments" @bind-Date="@StartDate" @bind-View="@selectedView" Height="600px">
<SchedulerViews>
<SchedulerMonthView />
<SchedulerDayView StartTime="@( new DateTime(2000, 1, 1, 8, 0, 0) )" />
</SchedulerViews>
</TelerikScheduler>
@code {
public DateTime StartDate { get; set; } = new DateTime(2019, 12, 2);
SchedulerView selectedView { get; set; } = SchedulerView.Month;
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 = "Dentist Appointment",
Description = "Get that cavity fixed.",
Start = new DateTime(2019, 12, 5, 13, 00, 0),
End = new DateTime(2019, 12, 5, 13, 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, 05)
}
};
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();
}
}