From f47bff649a0c1569f0ec0f474cf41a037d1cdd15 Mon Sep 17 00:00:00 2001 From: KB Bot Date: Wed, 8 Oct 2025 06:33:25 +0000 Subject: [PATCH 1/2] Added new kb article scheduler-add-hyperlinks-in-appointments --- ...cheduler-add-hyperlinks-in-appointments.md | 142 ++++++++++++++++++ 1 file changed, 142 insertions(+) create mode 100644 knowledge-base/scheduler-add-hyperlinks-in-appointments.md diff --git a/knowledge-base/scheduler-add-hyperlinks-in-appointments.md b/knowledge-base/scheduler-add-hyperlinks-in-appointments.md new file mode 100644 index 000000000..d5c073672 --- /dev/null +++ b/knowledge-base/scheduler-add-hyperlinks-in-appointments.md @@ -0,0 +1,142 @@ +--- +title: How to Add Hyperlinks in Scheduler Appointments +description: Learn how to add clickable hyperlinks in Scheduler appointments in UI for Blazor. +type: how-to +page_title: Making Links Clickable in Scheduler Appointment Descriptions +meta_title: Make Links Clickable in Scheduler Appointment Descriptions +slug: scheduler-kb-add-hyperlinks-in-appointments +tags: scheduler, templates, appointments, hyperlinks +res_type: kb +ticketid: 1697204 +--- + +## Environment + + + + + + + +
ProductScheduler for Blazor
+ +## Description + +I want to add clickable hyperlinks in Scheduler appointments. Including plain URLs in the Description field without having to write full `` tags would be good. + +## Solution + +To achieve clickable hyperlinks in Scheduler appointments, implement a method to automatically detect and convert plain URLs in the Description field into clickable links. + +1. Use the [`ItemTemplate`](slug:scheduler-templates-appointment) of the Scheduler to customize appointment rendering. +2. Apply a helper method to parse the Description field and convert plain URLs to clickable links. + +Here’s an example: + +````Razor + + + @{ + var appointment = context as SchedulerAppointment; + var formattedDescription = ConvertUrlsToLinks(appointment.Description); + } +
+ @((MarkupString)formattedDescription) +
+ + + + @{ + var appointment = context as SchedulerAppointment; + } + @appointment.Title + + Starts on @appointment.Start.Date.ToShortDateString() + ends on @appointment.End.Date.ToShortDateString() + + + + + + + + + @{ + var appointment = context as SchedulerAppointment; + if (appointment.IsAllDay) + { + @appointment.Title + } + else + { +
+ @appointment.Start.ToShortTimeString() to @appointment.End.ToShortTimeString() +
+ } + } + + + + + +@code { + private DateTime StartDate { get; set; } = new DateTime(2019, 11, 29); + private SchedulerView CurrView { get; set; } = SchedulerView.Week; + private DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 8, 0, 0); // the time portion is important + + private List Appointments = new() + { + new SchedulerAppointment + { + Title = "Vet visit", + Description = "Check this link: https://www.telerik.com/blazor-ui/documentation/components/scheduler/templates/appointment", + Start = new DateTime(2019, 11, 26, 11, 30, 0), + End = new DateTime(2019, 11, 26, 12, 30, 0) + }, + new SchedulerAppointment + { + Title = "Planning meeting", + Description = "Details here: http://example.com/meeting-notes", + Start = new DateTime(2019, 11, 25, 9, 30, 0), + End = new DateTime(2019, 11, 25, 12, 45, 0), + Icon = SvgIcon.ExclamationCircle + }, + new SchedulerAppointment + { + Title = "Trip to Hawaii", + Description = "Info at www.travelagency.com/hawaii", + IsAllDay = true, + Start = new DateTime(2019, 11, 27), + End = new DateTime(2019, 12, 07) + } + }; + + 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; } + public ISvgIcon Icon { get; set; } + } + + private string ConvertUrlsToLinks(string input) + { + if (string.IsNullOrWhiteSpace(input)) + return string.Empty; + + // Regex to match URLs like http://, https://, or www. + var urlPattern = @"((http|https):\/\/[^\s]+|www\.[^\s]+)"; + return System.Text.RegularExpressions.Regex.Replace(input, urlPattern, match => + { + var url = match.Value; + var href = url.StartsWith("http", StringComparison.OrdinalIgnoreCase) ? url : "https://" + url; + return $"{url}"; + }); + } +} +```` + +## See Also +- [Scheduler Appointment Templates](scheduler-templates-appointment) From 193a19c1f4fa3947ba6b615200fe34cc6abc2fbd Mon Sep 17 00:00:00 2001 From: Hristian Stefanov Date: Mon, 13 Oct 2025 17:22:33 +0300 Subject: [PATCH 2/2] chore(Scheduler): apply suggestions as per comments --- knowledge-base/scheduler-add-hyperlinks-in-appointments.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/knowledge-base/scheduler-add-hyperlinks-in-appointments.md b/knowledge-base/scheduler-add-hyperlinks-in-appointments.md index d5c073672..49ea6ccb2 100644 --- a/knowledge-base/scheduler-add-hyperlinks-in-appointments.md +++ b/knowledge-base/scheduler-add-hyperlinks-in-appointments.md @@ -89,14 +89,14 @@ Here’s an example: new SchedulerAppointment { Title = "Vet visit", - Description = "Check this link: https://www.telerik.com/blazor-ui/documentation/components/scheduler/templates/appointment", + Description = "Check this link: https://demos.telerik.com/blazor-ui/scheduler/templates", Start = new DateTime(2019, 11, 26, 11, 30, 0), End = new DateTime(2019, 11, 26, 12, 30, 0) }, new SchedulerAppointment { Title = "Planning meeting", - Description = "Details here: http://example.com/meeting-notes", + Description = "Details here: https://demos.telerik.com/blazor-ui/scheduler/events", Start = new DateTime(2019, 11, 25, 9, 30, 0), End = new DateTime(2019, 11, 25, 12, 45, 0), Icon = SvgIcon.ExclamationCircle