Skip to content

Commit 1ee8381

Browse files
dimodiradkostanev
dimodi
authored and
radkostanev
committed
kb(Scheduler): Revamp tooltip KB
1 parent 2ebd0f0 commit 1ee8381

File tree

1 file changed

+149
-6
lines changed

1 file changed

+149
-6
lines changed

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

Lines changed: 149 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
2-
title: Custom Appointment Tooltips
3-
description: How to customize the Appointment Tooltips.
2+
title: Custom Scheduler Appointment Tooltips
3+
description: Learn how to customize the appointment tooltips in the Telerik Scheduler for Blazor.
44
type: how-to
5-
page_title: Custom Appointment Tooltips
5+
page_title: How to Display Custom Scheduler Appointment Tooltips
66
slug: scheduler-kb-custom-appointment-tooltips
77
position:
88
tags:
@@ -22,9 +22,152 @@ res_type: kb
2222

2323
## Description
2424

25-
How to customize the Appointment Tooltips? How to add more content in the Appointment Tooltips?
26-
25+
How to customize the Scheduler appointment tooltips? How to show more content in the appointment tooltips?
2726

2827
## Solution
2928

30-
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).
29+
1. Define a [Scheduler `ItemTemplate`](slug:scheduler-templates-appointment) with a `title` HTML attribute or one or more `data` attributes.
30+
1. Define a [Telerik Tooltip component for Blazor](slug:tooltip-overview) that targets all appointments by a `class` or some other selector.
31+
1. (optional) Define a [Tooltip `Template`](slug:tooltip-template) that consumes the `data` attributes from the Scheduler item template.
32+
33+
>caption Display Telerik Tooltips over Scheduler appointments
34+
35+
````RAZOR
36+
<TelerikScheduler Data="@SchedulerData"
37+
@bind-Date="@SchedulerDate"
38+
Height="60vh"
39+
@bind-View="@SchedulerView">
40+
<SchedulerViews>
41+
<SchedulerDayView />
42+
<SchedulerWeekView StartTime="@SchedulerViewStartTime" />
43+
<SchedulerMonthView />
44+
</SchedulerViews>
45+
<ItemTemplate>
46+
@{ var dataItem = (Appointment)context; }
47+
<div class="k-event-template scheduler-tooltip-target"
48+
data-id="guid-@dataItem.Id"
49+
style="height:100%">
50+
@dataItem.Title
51+
</div>
52+
</ItemTemplate>
53+
</TelerikScheduler>
54+
55+
<TelerikTooltip TargetSelector=".scheduler-tooltip-target">
56+
<Template>
57+
@{ var appointment = GetAppointmentById(context.DataAttributes["id"]); }
58+
<div>@appointment.Title</div>
59+
<div>@appointment.Start.ToString("g") - @appointment.End.ToString("g")</div>
60+
</Template>
61+
</TelerikTooltip>
62+
63+
@code {
64+
private List<Appointment> SchedulerData { get; set; } = new();
65+
private DateTime SchedulerDate { get; set; } = DateTime.Today;
66+
private SchedulerView SchedulerView { get; set; } = SchedulerView.Week;
67+
private DateTime SchedulerViewStartTime { get; set; } = DateTime.Today.AddHours(8);
68+
69+
private Appointment GetAppointmentById(string id)
70+
{
71+
return SchedulerData.First(x => string.Concat("guid-", x.Id) == id);
72+
}
73+
74+
private DateTime GetStartTime()
75+
{
76+
DateTime dt = DateTime.Now;
77+
int daysSinceMonday = dt.DayOfWeek - DayOfWeek.Monday;
78+
79+
return new DateTime(dt.Year, dt.Month, dt.Day - daysSinceMonday, 8, 0, 0);
80+
}
81+
82+
protected override async Task OnInitializedAsync()
83+
{
84+
List<Appointment> data = new();
85+
DateTime baselineTime = GetStartTime();
86+
87+
data.Add(new Appointment
88+
{
89+
Title = "Vet visit",
90+
Description = "The cat needs vaccinations and her teeth checked.",
91+
Start = baselineTime.AddHours(3),
92+
End = baselineTime.AddHours(3).AddMinutes(30)
93+
});
94+
data.Add(new Appointment
95+
{
96+
Title = "Trip to Hawaii",
97+
Description = "An unforgettable holiday!",
98+
IsAllDay = true,
99+
Start = baselineTime.AddDays(-10),
100+
End = baselineTime.AddDays(-2)
101+
});
102+
data.Add(new Appointment
103+
{
104+
Title = "Jane's birthday party",
105+
Description = "Make sure to get her fresh flowers in addition to the gift.",
106+
Start = baselineTime.AddDays(5).AddHours(10),
107+
End = baselineTime.AddDays(5).AddHours(18),
108+
});
109+
data.Add(new Appointment
110+
{
111+
Title = "One-on-one with the manager",
112+
Start = baselineTime.AddDays(2).AddHours(3).AddMinutes(30),
113+
End = baselineTime.AddDays(2).AddHours(3).AddMinutes(45),
114+
});
115+
data.Add(new Appointment
116+
{
117+
Title = "Brunch with HR",
118+
Description = "Performance evaluation of the new recruit.",
119+
Start = baselineTime.AddDays(3).AddHours(3),
120+
End = baselineTime.AddDays(3).AddHours(3).AddMinutes(45)
121+
});
122+
data.Add(new Appointment
123+
{
124+
Title = "Interview with new recruit",
125+
Description = "See if John will be a suitable match for our team.",
126+
Start = baselineTime.AddDays(3).AddHours(1).AddMinutes(30),
127+
End = baselineTime.AddDays(3).AddHours(2).AddMinutes(30)
128+
});
129+
data.Add(new Appointment
130+
{
131+
Title = "Conference",
132+
Description = "The big important work conference. Don't forget to practice your presentation.",
133+
Start = baselineTime.AddDays(6),
134+
End = baselineTime.AddDays(11),
135+
IsAllDay = true
136+
});
137+
data.Add(new Appointment
138+
{
139+
Title = "New Project Kickoff",
140+
Description = "Everyone assemble! We will also have clients on the call from a later time zone.",
141+
Start = baselineTime.AddDays(3).AddHours(8).AddMinutes(30),
142+
End = baselineTime.AddDays(3).AddHours(11).AddMinutes(30)
143+
});
144+
data.Add(new Appointment
145+
{
146+
Title = "Get photos",
147+
Description = "Get the printed photos from last week's holiday. It's on the way from the vet to work.",
148+
Start = baselineTime.AddHours(2).AddMinutes(15),
149+
End = baselineTime.AddHours(2).AddMinutes(30)
150+
});
151+
152+
SchedulerData = data;
153+
154+
await base.OnInitializedAsync();
155+
}
156+
157+
public class Appointment
158+
{
159+
public Guid Id { get; set; }
160+
public string Title { get; set; } = string.Empty;
161+
public DateTime Start { get; set; }
162+
public DateTime End { get; set; }
163+
public bool IsAllDay { get; set; }
164+
public string Description { get; set; } = string.Empty;
165+
166+
public Appointment()
167+
{
168+
var rand = new Random();
169+
Id = Guid.NewGuid();
170+
}
171+
}
172+
}
173+
````

0 commit comments

Comments
 (0)