kb(Scheduler): Revamp tooltip KB

knowledge-base/scheduler-custom-appointment-tooltips.md

@@ -1,8 +1,8 @@
 ---
-title: Custom Appointment Tooltips
-description: How to customize the Appointment Tooltips.
+title: Custom Scheduler Appointment Tooltips
+description: Learn how to customize the appointment tooltips in the Telerik Scheduler for Blazor.
 type: how-to
-page_title: Custom Appointment Tooltips
+page_title: How to Display Custom Scheduler Appointment Tooltips
 slug: scheduler-kb-custom-appointment-tooltips
 position: 
 tags: 
@@ -22,9 +22,152 @@ res_type: kb
 
 ## Description
 
-How to customize the Appointment Tooltips? How to add more content in the Appointment Tooltips?
-
+How to customize the Scheduler appointment tooltips? How to show more content in the appointment tooltips?
 
 ## Solution
 
-An example is available in the following project: [https://github.com/telerik/blazor-ui/tree/master/scheduler/appointment-tooltips](https://github.com/telerik/blazor-ui/tree/master/scheduler/appointment-tooltips).
+1. Define a [Scheduler `ItemTemplate`](slug:scheduler-templates-appointment) with a `title` HTML attribute or one or more `data` attributes. 
+1. Define a [Telerik Tooltip component for Blazor](slug:tooltip-overview) that targets all appointments by a `class` or some other selector.
+1. (optional) Define a [Tooltip `Template`](slug:tooltip-template) that consumes the `data` attributes from the Scheduler item template.
+
+>caption Display Telerik Tooltips over Scheduler appointments
+
+````RAZOR
+<TelerikScheduler Data="@SchedulerData"
+                  @bind-Date="@SchedulerDate"
+                  Height="60vh"
+                  @bind-View="@SchedulerView">
+    <SchedulerViews>
+        <SchedulerDayView />
+        <SchedulerWeekView StartTime="@SchedulerViewStartTime" />
+        <SchedulerMonthView />
+    </SchedulerViews>
+    <ItemTemplate>
+        @{ var dataItem = (Appointment)context; }
+        <div class="k-event-template scheduler-tooltip-target"
+             data-id="guid-@dataItem.Id"
+             style="height:100%">
+            @dataItem.Title
+        </div>
+    </ItemTemplate>
+</TelerikScheduler>
+
+<TelerikTooltip TargetSelector=".scheduler-tooltip-target">
+    <Template>
+        @{ var appointment = GetAppointmentById(context.DataAttributes["id"]); }
+        <div>@appointment.Title</div>
+        <div>@appointment.Start.ToString("g") - @appointment.End.ToString("g")</div>
+    </Template>
+</TelerikTooltip>
+
+@code {
+    private List<Appointment> SchedulerData { get; set; } = new();
+    private DateTime SchedulerDate { get; set; } = DateTime.Today;
+    private SchedulerView SchedulerView { get; set; } = SchedulerView.Week;
+    private DateTime SchedulerViewStartTime { get; set; } = DateTime.Today.AddHours(8);
+
+    private Appointment GetAppointmentById(string id)
+    {
+        return SchedulerData.First(x => string.Concat("guid-", x.Id) == id);
+    }
+
+    private DateTime GetStartTime()
+    {
+        DateTime dt = DateTime.Now;
+        int daysSinceMonday = dt.DayOfWeek - DayOfWeek.Monday;
+
+        return new DateTime(dt.Year, dt.Month, dt.Day - daysSinceMonday, 8, 0, 0);
+    }
+
+    protected override async Task OnInitializedAsync()
+    {
+        List<Appointment> data = new();
+        DateTime baselineTime = GetStartTime();
+
+        data.Add(new Appointment
+        {
+            Title = "Vet visit",
+            Description = "The cat needs vaccinations and her teeth checked.",
+            Start = baselineTime.AddHours(3),
+            End = baselineTime.AddHours(3).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)
+        });
+
+        SchedulerData = data;
+
+        await base.OnInitializedAsync();
+    }
+
+    public class Appointment
+    {
+        public Guid Id { get; set; }
+        public string Title { get; set; } = string.Empty;
+        public DateTime Start { get; set; }
+        public DateTime End { get; set; }
+        public bool IsAllDay { get; set; }
+        public string Description { get; set; } = string.Empty;
+
+        public Appointment()
+        {
+            var rand = new Random();
+            Id = Guid.NewGuid();
+        }
+    }
+}
+````