From c3cf2cde20c3fb6b44a7e0abad3cef50a853e135 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon, 15 Jan 2024 12:47:04 +0200 Subject: [PATCH] docs(scheduler): Add KB for hiding dates in the current month view (#1861) * Added new kb article scheduler-kb-hide-month-cells-in-month-view * docs(scheduler): enhance the generated kb sample --------- Co-authored-by: KB Bot Co-authored-by: Hristian Stefanov --- ...cheduler-hide-month-cells-in-month-view.md | 247 ++++++++++++++++++ 1 file changed, 247 insertions(+) create mode 100644 knowledge-base/scheduler-hide-month-cells-in-month-view.md diff --git a/knowledge-base/scheduler-hide-month-cells-in-month-view.md b/knowledge-base/scheduler-hide-month-cells-in-month-view.md new file mode 100644 index 000000000..fa7d9c4b9 --- /dev/null +++ b/knowledge-base/scheduler-hide-month-cells-in-month-view.md @@ -0,0 +1,247 @@ +--- +title: How to Hide Other Month Cells in Month View +description: Learn how to hide dates from other months in the Scheduler component's current month view. +type: how-to +page_title: How to Hide Dates from Other Months in the Current Month View +slug: scheduler-kb-hide-month-cells-in-month-view +tags: hiding, other month cells, month view, scheduler +ticketid: 1637063 +res_type: kb +--- + +## Environment + + + + + + + + +
ProductScheduler for Blazor
+ +## Description + +I need to hide the dates from other months in the Scheduler component's current month view because it may confuse the users. + +## Solution + +To hide the dates from other months in the month view of the Scheduler component: + +1. Define `SlotTemplate`. +2. Use an `if` block to render conditionally the dates based on the selected month. + +>caption Scheduler with hidden dates in the current month view + +````CSHTML +@using Telerik.SvgIcons + + + +
S.Item: @(((Appointment)context).Title)
+ + +
S.AllDayItem: @(((Appointment)context).Title)
+ + + + + @{ + if (context.Start.Month == SelectedDate.Month) + { + var dayNumber = context.Start.Day; + + @context.Start.Day + + + if (context.Start.DayOfWeek == DayOfWeek.Saturday + || context.Start.DayOfWeek == DayOfWeek.Sunday) + { +
Weekend
+ } + } + } + + +
V.Item: @(((Appointment)context).Title)
+ + + + + +@code { + private DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0); + private DateTime ControlDate { get; set; } = new DateTime(2000, 1, 1, 12, 0, 0); + private SchedulerView CurrView { get; set; } + private List Data = new List(); + + protected override void OnInitialized() + { + Data = AppointmentService.GetAppointments(); + + base.OnInitialized(); + } + + private 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; + } + } + + private void OnDateClick(int day) + { + var currentDate = DateTime.Now; + var navigateDate = new DateTime(currentDate.Year, currentDate.Month, day); + + CurrView = SchedulerView.Day; + SelectedDate = navigateDate; + } + + private void AddAppointment(SchedulerCreateEventArgs args) + { + Appointment item = args.Item as Appointment; + + Data.Add(item); + } + + private void DeleteAppointment(SchedulerDeleteEventArgs args) + { + Appointment item = (Appointment)args.Item; + + Data.Remove(item); + } + + private class AppointmentService + { + public static async Task> GetAppointmentsAsync() + { + await Task.Delay(100); + + return GetAppointments(); + } + + public static List GetAppointments() + { + List data = new List(); + 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 = "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 = "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); + + return data; + } + + public static 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); + } + } + + private 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(); + } + } +} +```` + +## See Also +* [Scheduler Slot Templates]({%slug scheduler-templates-slot%}) +