diff --git a/blazor/scheduler/images/blazor-scheduler-Alldaycells-verticalview.png b/blazor/scheduler/images/blazor-scheduler-Alldaycells-verticalview.png new file mode 100644 index 0000000000..6586e294b5 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-Alldaycells-verticalview.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-allday-appointments-vertical-view.png b/blazor/scheduler/images/blazor-scheduler-allday-appointments-vertical-view.png new file mode 100644 index 0000000000..c88fe4967a Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-allday-appointments-vertical-view.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-appointments-Timeline-view.png b/blazor/scheduler/images/blazor-scheduler-appointments-Timeline-view.png new file mode 100644 index 0000000000..f944d4509f Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-appointments-Timeline-view.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-appointments-TimelineMonth-view.png b/blazor/scheduler/images/blazor-scheduler-appointments-TimelineMonth-view.png new file mode 100644 index 0000000000..f3756fb6ff Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-appointments-TimelineMonth-view.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-appointments-TimelineYear-view.png b/blazor/scheduler/images/blazor-scheduler-appointments-TimelineYear-view.png new file mode 100644 index 0000000000..f9fed32eee Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-appointments-TimelineYear-view.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-appointments-Year-view.png b/blazor/scheduler/images/blazor-scheduler-appointments-Year-view.png new file mode 100644 index 0000000000..b733aa03f8 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-appointments-Year-view.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-appointments-agenda-view.png b/blazor/scheduler/images/blazor-scheduler-appointments-agenda-view.png new file mode 100644 index 0000000000..576949f524 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-appointments-agenda-view.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-appointments-month-view.png b/blazor/scheduler/images/blazor-scheduler-appointments-month-view.png new file mode 100644 index 0000000000..be1f911aaf Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-appointments-month-view.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-appointments-monthAgenda-view.png b/blazor/scheduler/images/blazor-scheduler-appointments-monthAgenda-view.png new file mode 100644 index 0000000000..85002988c1 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-appointments-monthAgenda-view.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-appointments-vertical-view.png b/blazor/scheduler/images/blazor-scheduler-appointments-vertical-view.png new file mode 100644 index 0000000000..c4e5fb8297 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-appointments-vertical-view.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-blocked-appointments.png b/blazor/scheduler/images/blazor-scheduler-blocked-appointments.png new file mode 100644 index 0000000000..fd62654766 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-blocked-appointments.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-header-cells.png b/blazor/scheduler/images/blazor-scheduler-header-cells.png new file mode 100644 index 0000000000..7266e8a7b1 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-header-cells.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-monthagenda-othermonth-workcells.png b/blazor/scheduler/images/blazor-scheduler-monthagenda-othermonth-workcells.png new file mode 100644 index 0000000000..1ac054a38b Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-monthagenda-othermonth-workcells.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-monthagenda-workcells.png b/blazor/scheduler/images/blazor-scheduler-monthagenda-workcells.png new file mode 100644 index 0000000000..ee55c74e3f Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-monthagenda-workcells.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-monthview-workcells.png b/blazor/scheduler/images/blazor-scheduler-monthview-workcells.png new file mode 100644 index 0000000000..9bc9a2ed90 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-monthview-workcells.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-othermonth-workcells.png b/blazor/scheduler/images/blazor-scheduler-othermonth-workcells.png new file mode 100644 index 0000000000..47a502cd42 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-othermonth-workcells.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-parentandchild-resource-cells-timeline-month-view.png b/blazor/scheduler/images/blazor-scheduler-parentandchild-resource-cells-timeline-month-view.png new file mode 100644 index 0000000000..981d13fbfb Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-parentandchild-resource-cells-timeline-month-view.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-readonly-appointments.png b/blazor/scheduler/images/blazor-scheduler-readonly-appointments.png new file mode 100644 index 0000000000..02a6c34a13 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-readonly-appointments.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-resource-cells-month-view.png b/blazor/scheduler/images/blazor-scheduler-resource-cells-month-view.png new file mode 100644 index 0000000000..b53ac82b74 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-resource-cells-month-view.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-resource-cells-timeline-month-view.png b/blazor/scheduler/images/blazor-scheduler-resource-cells-timeline-month-view.png new file mode 100644 index 0000000000..1c35758647 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-resource-cells-timeline-month-view.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-resource-cells-timeline-view.png b/blazor/scheduler/images/blazor-scheduler-resource-cells-timeline-view.png new file mode 100644 index 0000000000..682b3367d3 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-resource-cells-timeline-view.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-resource-cells.png b/blazor/scheduler/images/blazor-scheduler-resource-cells.png new file mode 100644 index 0000000000..8559b9e2e7 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-resource-cells.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-selected-appointments.png b/blazor/scheduler/images/blazor-scheduler-selected-appointments.png new file mode 100644 index 0000000000..4e068a4852 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-selected-appointments.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-selected-cells.png b/blazor/scheduler/images/blazor-scheduler-selected-cells.png new file mode 100644 index 0000000000..2d23722e5e Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-selected-cells.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-timeline-othermonth-workcells.png b/blazor/scheduler/images/blazor-scheduler-timeline-othermonth-workcells.png new file mode 100644 index 0000000000..2084bb506c Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-timeline-othermonth-workcells.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-timelinemonth-workcells.png b/blazor/scheduler/images/blazor-scheduler-timelinemonth-workcells.png new file mode 100644 index 0000000000..f1c8e477a7 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-timelinemonth-workcells.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-timelineview-workcells.png b/blazor/scheduler/images/blazor-scheduler-timelineview-workcells.png new file mode 100644 index 0000000000..c728e5d007 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-timelineview-workcells.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-timelineyear-workcells.png b/blazor/scheduler/images/blazor-scheduler-timelineyear-workcells.png new file mode 100644 index 0000000000..80fde2dff9 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-timelineyear-workcells.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-verticalview-workcells.png b/blazor/scheduler/images/blazor-scheduler-verticalview-workcells.png new file mode 100644 index 0000000000..7c96acec48 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-verticalview-workcells.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-work-Day-cells-monthview.png b/blazor/scheduler/images/blazor-scheduler-work-Day-cells-monthview.png new file mode 100644 index 0000000000..057b832818 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-work-Day-cells-monthview.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-work-day-cells-monthagenda-view.png b/blazor/scheduler/images/blazor-scheduler-work-day-cells-monthagenda-view.png new file mode 100644 index 0000000000..c036685606 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-work-day-cells-monthagenda-view.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-work-day-cells-timeline-monthview.png b/blazor/scheduler/images/blazor-scheduler-work-day-cells-timeline-monthview.png new file mode 100644 index 0000000000..25b3af6190 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-work-day-cells-timeline-monthview.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-work-day-cells-timeline-yearview.png b/blazor/scheduler/images/blazor-scheduler-work-day-cells-timeline-yearview.png new file mode 100644 index 0000000000..573889de55 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-work-day-cells-timeline-yearview.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-work-hour-cells-timeline-view.png b/blazor/scheduler/images/blazor-scheduler-work-hour-cells-timeline-view.png new file mode 100644 index 0000000000..fd6c197ac3 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-work-hour-cells-timeline-view.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-work-hour-cells-verticalview.png b/blazor/scheduler/images/blazor-scheduler-work-hour-cells-verticalview.png new file mode 100644 index 0000000000..cf6cee16a2 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-work-hour-cells-verticalview.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-yearview-othermonth-workcells.png b/blazor/scheduler/images/blazor-scheduler-yearview-othermonth-workcells.png new file mode 100644 index 0000000000..b40153e518 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-yearview-othermonth-workcells.png differ diff --git a/blazor/scheduler/scheduler-styling.md b/blazor/scheduler/scheduler-styling.md index 302d77aac5..1ab9dda74a 100644 --- a/blazor/scheduler/scheduler-styling.md +++ b/blazor/scheduler/scheduler-styling.md @@ -49,4 +49,1950 @@ To modify the Scheduler appearance, you need to override the default CSS of Sche | .e-schedule .e-timeline-view .e-resource-cells | Resource cells in timeline views of scheduler. | | .e-schedule .e-timeline-month-view .e-resource-cells| Resource cells in timeline month view of scheduler. | | e-parent-node | Parent resource cells in timeline views of scheduler. | -| e-child-node | Child resource cells in timeline views of scheduler. | \ No newline at end of file +| e-child-node | Child resource cells in timeline views of scheduler. | + +### Work cells in vertical views of scheduler + +This CSS selector targets the work cells in the vertical views (Day, Week, and WorkWeek) of the Syncfusion Scheduler component. These cells represent the individual time slots arranged vertically where appointments are displayed and can be scheduled. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
+ + + + + + + + + +
+ +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 14); + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLSjzXQfGnvGHlh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Work cells in vertical views](images/blazor-scheduler-verticalview-workcells.png)" %} + +### Work cells in month view of scheduler + +This CSS selector targets the work cells (day cells) that belong to the current month in the month view of the Syncfusion Scheduler. These cells represent the individual days of the displayed month where users can schedule and view appointments. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
+ + + + + +
+ +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 14); + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBSXpMdpcPUpdLW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Work cells in month view](images/blazor-scheduler-monthview-workcells.png)" %} + +### Work cells of other month in month view of scheduler + +This CSS selector targets the work cells that represent days from adjacent months (previous or next month) that are visible in the current month view of the scheduler. These cells typically appear at the beginning and end of a month view to complete the week rows. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
+ + + + + +
+ +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 14); + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVoDfinplIYBcIi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Other month work cells in month view](images/blazor-scheduler-othermonth-workcells.png)" %} + +### Work cells in timeline views of scheduler + +This CSS selector targets the work cells in the standard timeline views of the Syncfusion Scheduler. These cells represent time slots arranged horizontally across the scheduler. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
+ + + + + + +
+ +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 14); + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVetzsdeXJJNgsX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Work cells in timeline views](images/blazor-scheduler-timelineview-workcells.png)" %} + +### Work cells in timeline month view of scheduler + +This CSS selector targets the work cells in the timeline month view of the Syncfusion Scheduler component. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
+ + + + + +
+ +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 14); + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZhSXIXUeKvJllyA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Work cells in timeline month views](images/blazor-scheduler-timelinemonth-workcells.png)" %} + +### Work cells in timeline year view of scheduler + +This CSS selector targets the work cells in the timeline year view of the Syncfusion Scheduler component. These cells represent time slots across the entire year, arranged in a timeline format that provides an overview of appointments throughout the entire year. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
+ + + + + +
+ +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 14); + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBIZSXKozTrvbOf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Work cells in timeline year views](images/blazor-scheduler-timelineyear-workcells.png)" %} + +### Work cells of other month in timeline year view of scheduler + +This CSS selector targets the work cells representing days from adjacent months (previous or next month) that are visible in the timeline year view. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
+ + + + + +
+ +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 14); + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLIteDUymCFDFFp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Work cells in timeline other month views](images/blazor-scheduler-timeline-othermonth-workcells.png)" %} + +### Work cells in month agenda view of scheduler + +This CSS selector targets the work cells that represent the days in the month agenda view of the Syncfusion Scheduler. These cells are areas where appointments can be placed. + +```cshtml +@using Syncfusion.Blazor.Schedule +
+ + + + + +
+ +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 14); + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBItIMpzmNyLBhW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Work cells in month agenda view](images/blazor-scheduler-monthagenda-workcells.png)" %} + +### Work cells of other month in month agenda view of scheduler + +This CSS selector targets the work cells representing days that belong to adjacent months within the month agenda view. These cells often show up to provide context for appointments that may extend beyond the current month. + +```cshtml +@using Syncfusion.Blazor.Schedule +
+ + + + + +
+ +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 14); + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/htrINyszfvZfowQQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Other month work cells in month agenda view](images/blazor-scheduler-monthagenda-othermonth-workcells.png)" %} + + +### Work Cells of Other Month in Year View of Scheduler + +This CSS selector targets the work cells representing days from adjacent months (previous or next month) that are visible in the year view of the Syncfusion Scheduler. + +```cshtml +@using Syncfusion.Blazor.Schedule +
+ + + + + +
+ +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 14); + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBeNIMOzziiJCIN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Other month work cells in Year view](images/blazor-scheduler-yearview-othermonth-workcells.png)" %} + + +### All Day Cells in Vertical Views of Scheduler + +This CSS selector targets the all-day cells in the vertical views (Day, Week, and WorkWeek) of the Syncfusion Scheduler component. These cells represent the time slots designated for all-day events, providing users with a straightforward way to visualize and manage significant appointments. + +```cshtml +@using Syncfusion.Blazor.Schedule +
+ + + + + + + +
+ +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 14); + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNByDoMYpJcFHjMv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[All-Day cells in vertical view](images/blazor-scheduler-Alldaycells-verticalview.png)" %} + + +### Work Hour Cells in Vertical Views of Scheduler + +This CSS selector targets the work hour cells in vertical views (Day, Week, WorkWeek) of the Syncfusion Scheduler. These cells show the working hours where users can add appointments, making it easier to see available time slots. + +```cshtml +@using Syncfusion.Blazor.Schedule +
+ + + + + + + +
+ +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 14); + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtrSDeiOfoMsMoZt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Work hour cells in vertical view](images/blazor-scheduler-work-hour-cells-verticalview.png)" %} + + +### Work Day Cells in Month View of Scheduler + +This CSS selector targets the work day cells in the month view of the Syncfusion Scheduler. These cells show the days meant for scheduling work, helping users easily see which days are available for appointments. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
+ + + + + +
+ +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 14); + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVStIiapeGmfItK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Work day cells in month view](images/blazor-scheduler-work-Day-cells-monthview.png)" %} + + +### Work Day Cells in Month Agenda View of Scheduler + +This CSS selector targets the work day cells that represent the days in the month agenda view of the Syncfusion Scheduler. These cells show the specific days within the scheduled month where users can place appointments. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
+ + + + + +
+ +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 14); + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVStIiapeGmfItK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Work day cells in month agenda view](images/blazor-scheduler-work-day-cells-monthagenda-view.png)" %} + + +### Work Hour Cells in Timeline Views of Scheduler + +This CSS selector targets the work hour cells in the timeline views (TimelineDay, TimelineWeek) of the Syncfusion Scheduler. These cells represent the slots of time designated for work hours, providing users with a visual indication of when appointments can be scheduled. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
+ + + + + + +
+ +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 14); + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBIXyCYpxaMcIgD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Work hour cells in timeline view](images/blazor-scheduler-work-hour-cells-timeline-view.png)" %} + + +### Work Day Cells in Timeline Month View of Scheduler + +This CSS selector targets the work day cells in the timeline month view of the Syncfusion Scheduler. These cells represent the specific days designated as working days for the month timeline, allowing users to visualize their tasks and appointments within those time frames. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
+ + + + + +
+ +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 14); + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rthIXICaJwbDIMPr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Work day cells in timeline month view](images/blazor-scheduler-work-day-cells-timeline-monthview.png)" %} + + +### Work Day Cells in Timeline Year View of Scheduler + +This CSS selector targets the work day cells in the timeline year view of the Syncfusion Scheduler. These cells highlight the working days throughout the entire year, giving users a comprehensive overview of their yearly schedule and enabling easier appointment management. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
+ + + + + +
+ +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 14); + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLytSsaTviyMXFM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Work day cells in timeline year view](images/blazor-scheduler-work-day-cells-timeline-yearview.png)" %} + +### Appointment in vertical views of scheduler + +This CSS selector targets the regular appointments that appear in these vertical views. Customizing this selector can significantly improving appointment visibility, readability, and overall visual appearance. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
+ + + + + + + + + + +
+ +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 14); + List DataSource = new List + { + new AppointmentData { Id = 1, Subject = "Paris", StartTime = new DateTime(2020, 2, 13, 10, 0, 0) , EndTime = new DateTime(2020, 2, 13, 12, 0, 0) }, + new AppointmentData { Id = 2, Subject = "Germany", StartTime = new DateTime(2020, 2, 15, 10, 0, 0) , EndTime = new DateTime(2020, 2, 15, 12, 0, 0) } + }; + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLSXlXiqeOnoBFt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Appointments in vertical view](images/blazor-scheduler-appointments-vertical-view.png)" %} + +### All day Appointment in vertical views of scheduler + +This CSS selector targets the all-day appointments that appear in the vertical views (Day, Week, and WorkWeek) of the Syncfusion Blazor Scheduler component. All-day appointments are events that span an entire day or multiple days without specific start and end times within those days. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
+ + + + + + + + + + +
+ +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 14); + List DataSource = new List + { + new AppointmentData { Id = 1, Subject = "Paris", StartTime = new DateTime(2020, 2, 11, 10, 0, 0) , EndTime = new DateTime(2020, 2, 12, 12, 0, 0), IsAllDay = true }, + new AppointmentData { Id = 2, Subject = "Germany", StartTime = new DateTime(2020, 2, 15, 10, 0, 0) , EndTime = new DateTime(2020, 2, 15, 12, 0, 0), IsAllDay = true } + }; + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhINvDCqxEWFfUp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[All day appointments in vertical view](images/blazor-scheduler-allday-appointments-vertical-view.png)" %} + +### Appointment in month view of scheduler + +This CSS selector targets appointment elements in the month view of the Syncfusion Blazor Scheduler component. This selector is crucial for customizing how appointments appear in the calendar-style month view, which presents unique visualization challenges due to the compact nature of displaying an entire month at once. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
+ + + + + + +
+ +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 14); + List DataSource = new List + { + new AppointmentData { Id = 1, Subject = "Paris", StartTime = new DateTime(2020, 2, 10, 10, 0, 0) , EndTime = new DateTime(2020, 2, 11, 12, 0, 0) }, + new AppointmentData { Id = 2, Subject = "Germany", StartTime = new DateTime(2020, 2, 13, 10, 0, 0) , EndTime = new DateTime(2020, 2, 15, 12, 0, 0) } + }; + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVyjbDigwxldZQH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Appointments in month view](images/blazor-scheduler-appointments-month-view.png)" %} + +### Appointment in timeline views of scheduler + +This CSS selector targets appointment elements in the timeline views of the Syncfusion Blazor Scheduler component. Timeline views (TimelineDay, TimelineWeek, TimelineWorkWeek) present a unique horizontal orientation of appointments that differs significantly from the traditional vertical or month views. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
+ + + + + + + +
+ +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 13); + List DataSource = new List + { + new AppointmentData { Id = 1, Subject = "Paris", StartTime = new DateTime(2020, 2, 13, 10, 0, 0) , EndTime = new DateTime(2020, 2, 13, 12, 0, 0) }, + new AppointmentData { Id = 2, Subject = "Germany", StartTime = new DateTime(2020, 2, 13, 12, 30, 0) , EndTime = new DateTime(2020, 2, 13, 14, 0, 0) } + }; + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrSNbjiqlpgpavw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Appointments in timeline view](images/blazor-scheduler-appointments-Timeline-view.png)" %} + +### Appointment in timeline month view of scheduler + +This CSS selector targets appointment elements specifically in the timeline month view of the Syncfusion Blazor Scheduler component. This specialized view combines the horizontal time-based layout of timeline views with the monthly calendar perspective, creating a unique visualization for planning and scheduling. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
+ + + + + + +
+ +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 11); + List DataSource = new List + { + new AppointmentData { Id = 1, Subject = "Paris", StartTime = new DateTime(2020, 2, 13, 10, 0, 0) , EndTime = new DateTime(2020, 2, 13, 12, 0, 0) }, + new AppointmentData { Id = 2, Subject = "Germany", StartTime = new DateTime(2020, 2, 15, 10, 0, 0) , EndTime = new DateTime(2020, 2, 15, 12, 0, 0) } + }; + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrSDFZMJTeCySrl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Appointments in timeline Month view](images/blazor-scheduler-appointments-TimelineMonth-view.png)" %} + +### Appointment in timeline year view of scheduler + +This CSS selector targets appointment elements specifically in the timeline year view of the Syncfusion Blazor Scheduler component. The Timeline Year view in Syncfusion Scheduler is designed to display events across an entire year in a horizontal, scrollable layout. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
+ + + + + + +
+ +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 11); + List DataSource = new List + { + new AppointmentData { Id = 1, Subject = "Paris", StartTime = new DateTime(2020, 1, 1, 10, 0, 0) , EndTime = new DateTime(2020, 1, 2, 12, 0, 0) }, + new AppointmentData { Id = 2, Subject = "Germany", StartTime = new DateTime(2020, 4, 3, 10, 0, 0) , EndTime = new DateTime(2020, 4, 3, 12, 0, 0) } + }; + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBIDvNfqjpWspUW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Appointments in timeline year view](images/blazor-scheduler-appointments-TimelineYear-view.png)" %} + +### Appointment in year view of scheduler + +This CSS selector targets appointment elements specifically in the year view of the Syncfusion Blazor Scheduler component. In a year view of a scheduler, appointments are displayed across all 12 months of the year, offering a high-level overview of scheduled events. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
+ + + + + + +
+ +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 14); + List DataSource = new List + { + new AppointmentData { Id = 1, Subject = "Paris", StartTime = new DateTime(2020, 2, 13, 10, 0, 0) , EndTime = new DateTime(2020, 2, 13, 12, 0, 0) }, + new AppointmentData { Id = 2, Subject = "Germany", StartTime = new DateTime(2020, 2, 15, 10, 0, 0) , EndTime = new DateTime(2020, 2, 15, 12, 0, 0) } + }; + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrSjbXpKSaxvJSU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Appointments indicator in year view](images/blazor-scheduler-appointments-Year-view.png)" %} + +### Appointment in agenda view of scheduler + +This CSS selector targets appointment elements specifically in the agenda view of the Syncfusion Blazor Scheduler component. An appointment in the agenda view of a scheduler is shown as a simple list of events sorted by date and time. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
+ + + + + + +
+ +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 12); + List DataSource = new List + { + new AppointmentData { Id = 1, Subject = "Paris", StartTime = new DateTime(2020, 2, 13, 10, 0, 0) , EndTime = new DateTime(2020, 2, 13, 12, 0, 0) }, + new AppointmentData { Id = 2, Subject = "Germany", StartTime = new DateTime(2020, 2, 15, 10, 0, 0) , EndTime = new DateTime(2020, 2, 15, 12, 0, 0) } + }; + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLyNlZJAnFDusMl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Appointments in agenda view](images/blazor-scheduler-appointments-agenda-view.png)" %} + +### Appointment in month agenda view of scheduler + +This CSS selector targets appointment elements specifically in the month agenda view of the Syncfusion Blazor Scheduler component. An appointment in the month agenda view of a scheduler is shown as a list of events organized by day within a selected month. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
+ + + + + + +
+ +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 13); + List DataSource = new List + { + new AppointmentData { Id = 1, Subject = "Paris", StartTime = new DateTime(2020, 2, 13, 10, 0, 0) , EndTime = new DateTime(2020, 2, 13, 12, 0, 0) }, + new AppointmentData { Id = 2, Subject = "Germany", StartTime = new DateTime(2020, 2, 15, 10, 0, 0) , EndTime = new DateTime(2020, 2, 15, 12, 0, 0) } + }; + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBotPNTAGcpjRvV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Appointments in month agenda view](images/blazor-scheduler-appointments-monthAgenda-view.png)" %} + +### Block appointment in scheduler + +This CSS selector targets appointment elements specifically designated as blocked appointments in the Syncfusion Blazor Scheduler component. A blocked appointment refers to a reserved time slot during which no other appointments or events can be scheduled. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
+ + + + + + + + + + +
+ +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 13); + List DataSource = new List + { + new AppointmentData { Id = 1, Subject = "Blocked", StartTime = new DateTime(2020, 2, 13, 10, 0, 0) , EndTime = new DateTime(2020, 2, 13, 12, 0, 0), IsBlock = true }, + new AppointmentData { Id = 2, Subject = "Blocked", StartTime = new DateTime(2020, 2, 15, 10, 0, 0) , EndTime = new DateTime(2020, 2, 15, 12, 0, 0), IsBlock = true } + }; + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public bool IsBlock { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVytvNTTzoPWdKC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blocked Appointment in schedule](images/blazor-scheduler-blocked-appointments.png)" %} + +### Read only appointment in scheduler. + +This CSS selector targets appointment elements that are specifically marked as read-only in the Syncfusion Blazor Scheduler component. A read-only appointment in a scheduler refers to an event or time slot that is visible to users but cannot be modified, deleted, or rescheduled through the user interface. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
+ + + + + + + + + + +
+ +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 13); + List DataSource = new List + { + new AppointmentData { Id = 1, Subject = "Paris", StartTime = new DateTime(2020, 2, 13, 10, 0, 0) , EndTime = new DateTime(2020, 2, 13, 12, 0, 0), IsReadonly = true }, + new AppointmentData { Id = 2, Subject = "German", StartTime = new DateTime(2020, 2, 15, 10, 0, 0) , EndTime = new DateTime(2020, 2, 15, 12, 0, 0), IsReadonly = true } + }; + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public bool IsReadonly { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBojvXpJoKirsVN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[ReadOnly Appointment in schedule](images/blazor-scheduler-readonly-appointments.png)" %} + +### Selected Appointments in scheduler. + +This CSS selector targets appointment elements that are specifically marked as selected in the Syncfusion Blazor Scheduler component. A selected appointment in a scheduler refers to an event that a user has actively clicked on or interacted with. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
+ + + + + + + + + + +
+ +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 13); + List DataSource = new List + { + new AppointmentData { Id = 1, Subject = "Paris", StartTime = new DateTime(2020, 2, 13, 10, 0, 0) , EndTime = new DateTime(2020, 2, 13, 12, 0, 0) }, + new AppointmentData { Id = 2, Subject = "German", StartTime = new DateTime(2020, 2, 15, 10, 0, 0) , EndTime = new DateTime(2020, 2, 15, 12, 0, 0) } + }; + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/htLoDlZJfSbnzyVC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Selected Appointment in schedule](images/blazor-scheduler-selected-appointments.png)" %} + +### Selected Cells in scheduler. + +This CSS selector targets the cells that are specifically marked as selected in the Syncfusion Blazor Scheduler component. A selected cell in a scheduler refers to a time slot that a user has actively clicked on or interacted with. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
+ + + + + + + + + + +
+ +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 13); + List DataSource = new List + { + new AppointmentData { Id = 1, Subject = "Paris", StartTime = new DateTime(2020, 2, 13, 10, 0, 0) , EndTime = new DateTime(2020, 2, 13, 12, 0, 0) }, + new AppointmentData { Id = 2, Subject = "German", StartTime = new DateTime(2020, 2, 15, 10, 0, 0) , EndTime = new DateTime(2020, 2, 15, 12, 0, 0) } + }; + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrStPtfpRsutkic?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Selected cells in schedule](images/blazor-scheduler-selected-cells.png)" %} + +### Header Cells in scheduler. + +This CSS selector targets the cells that are specifically marked as header cells in the Syncfusion Blazor Scheduler component. Header cells in a scheduler refer to the top row that display contextual information such as dates and day labels. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
+ + + + + + + + +
+ +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 13); + List DataSource = new List + { + new AppointmentData { Id = 1, Subject = "Paris", StartTime = new DateTime(2020, 2, 13, 10, 0, 0) , EndTime = new DateTime(2020, 2, 13, 12, 0, 0) }, + new AppointmentData { Id = 2, Subject = "German", StartTime = new DateTime(2020, 2, 15, 10, 0, 0) , EndTime = new DateTime(2020, 2, 15, 12, 0, 0) } + }; + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVSNPNpfmXnWpnA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Header cells in schedule](images/blazor-scheduler-header-cells.png)" %} + +### Resource cells in vertical views of scheduler. + +This CSS selector targets the cells that are specifically marked as resource cells in the Syncfusion Blazor Scheduler component. Resource cells in the vertical views of a scheduler are the sections that display the names or labels of resources such as people, rooms, equipment, or services. These cells are usually shown on the top of the scheduler and help organize appointments by resource. + +```cshtml + +@using Syncfusion.Blazor.Schedule + + + + + + + + + + + + +@code{ + DateTime CurrentDate = new DateTime(2023, 6, 1); + public string[] Resources { get; set; } = { "Owners" }; + List DataSource = new List + { + new AppointmentData { Id = 1, Subject = "Meeting", StartTime = new DateTime(2023, 6, 1, 9, 30, 0) , EndTime = new DateTime(2023, 6, 1, 11, 0, 0), OwnerId = 1 }, + new AppointmentData { Id = 2, Subject = "Swimming", StartTime = new DateTime(2023, 6, 2, 10, 30, 0) , EndTime = new DateTime(2023, 6, 2, 12, 30, 0), OwnerId = 2 }, + new AppointmentData { Id = 3, Subject = "Movie", StartTime = new DateTime(2023, 6, 3, 10, 0, 0) , EndTime = new DateTime(2023,6 , 3, 12, 0, 0), OwnerId = 3 } + }; + public List OwnersData { get; set; } = new List + { + new ResourceData{ OwnerText = "Nancy", Id = 1, OwnerColor = "#ffaa00" }, + new ResourceData{ OwnerText = "Steven", Id = 2, OwnerColor = "#f8a398" }, + new ResourceData{ OwnerText = "Michael", Id = 3, OwnerColor = "#7499e1" } + }; + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + public int OwnerId { get; set; } + } + public class ResourceData + { + public int Id { get; set; } + public string OwnerText { get; set; } + public string OwnerColor { get; set; } + } +} + + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLeNvjJTccyxmoh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Resource cells in schedule](images/blazor-scheduler-resource-cells.png)" %} + +### Resource cells in month views of scheduler. + +This CSS selector targets the resource cells in the Syncfusion Blazor Scheduler Month view. These cells show names of resources in month view. + +```cshtml + +@using Syncfusion.Blazor.Schedule + + + + + + + + + + +@code{ + DateTime CurrentDate = new DateTime(2023, 6, 1); + public string[] Resources { get; set; } = { "Owners" }; + List DataSource = new List + { + new AppointmentData { Id = 1, Subject = "Meeting", StartTime = new DateTime(2023, 6, 1, 9, 30, 0) , EndTime = new DateTime(2023, 6, 1, 11, 0, 0), OwnerId = 1 }, + new AppointmentData { Id = 2, Subject = "Swimming", StartTime = new DateTime(2023, 6, 2, 10, 30, 0) , EndTime = new DateTime(2023, 6, 2, 12, 30, 0), OwnerId = 2 }, + new AppointmentData { Id = 3, Subject = "Movie", StartTime = new DateTime(2023, 6, 3, 10, 0, 0) , EndTime = new DateTime(2023,6 , 3, 12, 0, 0), OwnerId = 3 } + }; + public List OwnersData { get; set; } = new List + { + new ResourceData{ OwnerText = "Nancy", Id = 1, OwnerColor = "#ffaa00" }, + new ResourceData{ OwnerText = "Steven", Id = 2, OwnerColor = "#f8a398" }, + new ResourceData{ OwnerText = "Michael", Id = 3, OwnerColor = "#7499e1" } + }; + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + public int OwnerId { get; set; } + } + public class ResourceData + { + public int Id { get; set; } + public string OwnerText { get; set; } + public string OwnerColor { get; set; } + } +} + + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLetFtpplJIudiI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Resource cells in month view](images/blazor-scheduler-resource-cells-month-view.png)" %} + +### Resource cells in timeline views of scheduler. + +This CSS selector targets the cells that are specifically marked as resource cells in timeline views of the Syncfusion Blazor Scheduler component. Resource cells in the timeline views of a scheduler are usually shown on the left side of the scheduler. + +```cshtml + +@using Syncfusion.Blazor.Schedule + + + + + + + + + + + + +@code{ + DateTime CurrentDate = new DateTime(2023, 6, 1); + public string[] Resources { get; set; } = { "Owners" }; + List DataSource = new List + { + new AppointmentData { Id = 1, Subject = "Meeting", StartTime = new DateTime(2023, 6, 1, 9, 30, 0) , EndTime = new DateTime(2023, 6, 1, 11, 0, 0), OwnerId = 1 }, + new AppointmentData { Id = 2, Subject = "Swimming", StartTime = new DateTime(2023, 6, 2, 10, 30, 0) , EndTime = new DateTime(2023, 6, 2, 12, 30, 0), OwnerId = 2 }, + new AppointmentData { Id = 3, Subject = "Movie", StartTime = new DateTime(2023, 6, 3, 10, 0, 0) , EndTime = new DateTime(2023,6 , 3, 12, 0, 0), OwnerId = 3 } + }; + public List OwnersData { get; set; } = new List + { + new ResourceData{ OwnerText = "Nancy", Id = 1, OwnerColor = "#ffaa00" }, + new ResourceData{ OwnerText = "Steven", Id = 2, OwnerColor = "#f8a398" }, + new ResourceData{ OwnerText = "Michael", Id = 3, OwnerColor = "#7499e1" } + }; + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + public int OwnerId { get; set; } + } + public class ResourceData + { + public int Id { get; set; } + public string OwnerText { get; set; } + public string OwnerColor { get; set; } + } +} + + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBINbjTfvuqAUlm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Resource cells in timeline view](images/blazor-scheduler-resource-cells-timeline-view.png)" %} + +### Resource cells in timeline month views of scheduler. + +This CSS selector targets the cells that are specifically marked as resource cells in timeline month views of the Syncfusion Blazor Scheduler component. + +```cshtml + +@using Syncfusion.Blazor.Schedule + + + + + + + + + + +@code{ + DateTime CurrentDate = new DateTime(2023, 6, 1); + public string[] Resources { get; set; } = { "Owners" }; + List DataSource = new List + { + new AppointmentData { Id = 1, Subject = "Meeting", StartTime = new DateTime(2023, 6, 1, 9, 30, 0) , EndTime = new DateTime(2023, 6, 1, 11, 0, 0), OwnerId = 1 }, + new AppointmentData { Id = 2, Subject = "Swimming", StartTime = new DateTime(2023, 6, 2, 10, 30, 0) , EndTime = new DateTime(2023, 6, 2, 12, 30, 0), OwnerId = 2 }, + new AppointmentData { Id = 3, Subject = "Movie", StartTime = new DateTime(2023, 6, 3, 10, 0, 0) , EndTime = new DateTime(2023,6 , 3, 12, 0, 0), OwnerId = 3 } + }; + public List OwnersData { get; set; } = new List + { + new ResourceData{ OwnerText = "Nancy", Id = 1, OwnerColor = "#ffaa00" }, + new ResourceData{ OwnerText = "Steven", Id = 2, OwnerColor = "#f8a398" }, + new ResourceData{ OwnerText = "Michael", Id = 3, OwnerColor = "#7499e1" } + }; + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + public int OwnerId { get; set; } + } + public class ResourceData + { + public int Id { get; set; } + public string OwnerText { get; set; } + public string OwnerColor { get; set; } + } +} + + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhoNbXzpaIzpSch?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Resource cells in timeline month view](images/blazor-scheduler-resource-cells-timeline-month-view.png)" %} + +### Resource cells in timeline month views of scheduler. + +This CSS selector targets the cells that are specifically marked as resource cells in timeline month views of the Syncfusion Blazor Scheduler component. + +```cshtml + +@using Syncfusion.Blazor.Schedule + + + + + + + + + + +@code{ + DateTime CurrentDate = new DateTime(2023, 6, 1); + public string[] Resources { get; set; } = { "Owners" }; + List DataSource = new List + { + new AppointmentData { Id = 1, Subject = "Meeting", StartTime = new DateTime(2023, 6, 1, 9, 30, 0) , EndTime = new DateTime(2023, 6, 1, 11, 0, 0), OwnerId = 1 }, + new AppointmentData { Id = 2, Subject = "Swimming", StartTime = new DateTime(2023, 6, 2, 10, 30, 0) , EndTime = new DateTime(2023, 6, 2, 12, 30, 0), OwnerId = 2 }, + new AppointmentData { Id = 3, Subject = "Movie", StartTime = new DateTime(2023, 6, 3, 10, 0, 0) , EndTime = new DateTime(2023,6 , 3, 12, 0, 0), OwnerId = 3 } + }; + public List OwnersData { get; set; } = new List + { + new ResourceData{ OwnerText = "Nancy", Id = 1, OwnerColor = "#ffaa00" }, + new ResourceData{ OwnerText = "Steven", Id = 2, OwnerColor = "#f8a398" }, + new ResourceData{ OwnerText = "Michael", Id = 3, OwnerColor = "#7499e1" } + }; + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + public int OwnerId { get; set; } + } + public class ResourceData + { + public int Id { get; set; } + public string OwnerText { get; set; } + public string OwnerColor { get; set; } + } +} + + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhoNbXzpaIzpSch?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Resource cells in timeline month view](images/blazor-scheduler-resource-cells-timeline-month-view.png)" %} + +### Parent and child resource cells in timeline views of scheduler. + +This CSS selector targets the parent and child resource cells in the timeline views of the Syncfusion Blazor Scheduler component. These cells display both parent and child resources (like rooms and individuals) and help organize appointments based on resource hierarchy. + +```cshtml + +@using Syncfusion.Blazor.Schedule + + + + + + + + + + + + + + + +@code{ + DateTime CurrentDate = new DateTime(2023, 6, 1); + public string[] Resources { get; set; } = { "Rooms", "Owners" }; + public List RoomData { get; set; } = new List + { + new ResourceData{ RoomText = "ROOM 1", Id = 1, RoomColor = "#cb6bb2" }, + new ResourceData{ RoomText = "ROOM 2", Id = 2, RoomColor = "#56ca85" } + }; + public List OwnersData { get; set; } = new List + { + new ResourceData{ OwnerText = "Nancy", Id = 1, OwnerGroupId = 1, OwnerColor = "#ffaa00" }, + new ResourceData{ OwnerText = "Steven", Id = 2, OwnerGroupId = 2, OwnerColor = "#f8a398" }, + new ResourceData{ OwnerText = "Michael", Id = 3, OwnerGroupId = 1, OwnerColor = "#7499e1" } + }; + List DataSource = new List + { + new AppointmentData { Id = 1, Subject = "Meeting", StartTime = new DateTime(2023, 6, 1, 9, 30, 0) , EndTime = new DateTime(2023, 6, 1, 11, 0, 0), OwnerId = 1, RoomId = 1 } + }; + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + public int OwnerId { get; set; } + public int RoomId { get; set; } + } + public class ResourceData + { + public int Id { get; set; } + public string RoomText { get; set; } + public string RoomColor { get; set; } + public string OwnerText { get; set; } + public string OwnerColor { get; set; } + public int OwnerGroupId { get; set; } + } +} + + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVSZvjTejMOiBfs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Parent and child resource cells in timeline month view](images/blazor-scheduler-parentandchild-resource-cells-timeline-month-view.png)" %} \ No newline at end of file