From 343522618b2f56f6e33bb1570599c9c6c89af7b9 Mon Sep 17 00:00:00 2001 From: KB Bot Date: Wed, 18 Sep 2024 10:47:04 +0000 Subject: [PATCH 1/3] Added new kb article scheduler-customize-appointmentelement-text --- ...duler-customize-appointmentelement-text.md | 101 ++++++++++++++++++ 1 file changed, 101 insertions(+) create mode 100644 knowledge-base/scheduler-customize-appointmentelement-text.md diff --git a/knowledge-base/scheduler-customize-appointmentelement-text.md b/knowledge-base/scheduler-customize-appointmentelement-text.md new file mode 100644 index 000000000..ef4dfd95f --- /dev/null +++ b/knowledge-base/scheduler-customize-appointmentelement-text.md @@ -0,0 +1,101 @@ +--- +title: Customizing AppointmentElement Text in RadScheduler +description: Learn how to customize the background and text colors of AppointmentElement objects in RadScheduler for WinForms. +type: how-to +page_title: How to Customize AppointmentElement Text in RadScheduler +slug: scheduler-customize-appointmentelement-text +tags: scheduler, winforms, custom appointment element, background color, text color +res_type: kb +ticketid: 1663174 +--- + +## Environment + +|Product Version|Product|Author| +|----|----|----| +|2024.3.806|RadGridView for WinForms|[Dinko Krastev](https://www.telerik.com/blogs/author/dinko-krastev)| + +## Description + +Customizing the text in the appointment element is possible through the __AppointmentFormatting__ event of the RadScheduler control. Inside the event, you can pass an HTML text format and customize the text per your requirements. However, the time part inside the text is painted on the appointment. This way you can't directly access and customize the font size, color, etc. of the time part. + +![WinForms RadScheduler Appointment Element Text](images/scheduler-customize-appointmentelement-text001.png) + +## Solution + +To customize the background and text colors of `AppointmentElement` time range text, a custom appointment element approach is required. + +### Implementing a Custom Appointment Element + +Create a custom appointment element by extending the `AppointmentElement` class. Override the `CreateAppointmentText` method to customize the text appearance, including the font and color of the time range: + +````C# +public partial class CustomAppElement : AppointmentElement +{ + public CustomAppElement(RadScheduler scheduler, SchedulerView view, IEvent appointment) : base(scheduler, view, appointment) + { + } + + private Font dateTimeFont = new Font("Arial", 12); + private Color dateTimeColor = Color.Green; + + protected override string CreateAppointmentText() + { + CultureInfo schedulerCulture = this.Scheduler.Culture; + IEvent app = this.Appointment; + string newLine = string.Empty; + string separator = string.Empty; + if (!string.IsNullOrEmpty(this.AppointmentLocation)) + { + if (this.Bounds.Height > 36) + newLine = "
"; + else + separator = ";"; + } + + var titleFormatter = (new AppointmentTitleFormatterFactory()).Create(View.ViewType); + object[] params = new object[] { + this.View.DefaultTimeZone.OffsetTime(app.Start, this.Scheduler.SystemTimeZone), + this.View.DefaultTimeZone.OffsetTime(app.End, this.Scheduler.SystemTimeZone), + this.AppointmentSubject + separator, + this.AppointmentLocation, + "", + "", + "", + "", + newLine + }; + string topText = string.Format(schedulerCulture, titleFormatter.GetTitleFormat(this, this.View, this.Scheduler), params); + return topText; + } + + private string CreateStyleAttributeByFontAndColor() + { + StringBuilder styleBuilder = new StringBuilder(); + styleBuilder.Append("style=\""); + + styleBuilder.Append("font-family: "); + styleBuilder.Append(dateTimeFont.FontFamily.Name); + styleBuilder.Append("; "); + styleBuilder.Append("font-size: "); + styleBuilder.Append(dateTimeFont.Size.ToString((IFormatProvider)NumberFormatInfo.InvariantInfo)); + styleBuilder.Append("; "); + styleBuilder.Append("color: #"); + styleBuilder.Append(this.dateTimeColor.R.ToString("X2")); + styleBuilder.Append(this.dateTimeColor.G.ToString("X2")); + styleBuilder.Append(this.dateTimeColor.B.ToString("X2")); + styleBuilder.Append("\""); + return styleBuilder.ToString(); + } +} +```` + +### Applying the Custom Appointment Element + +Refer to the [Custom Appointment Element](https://docs.telerik.com/devtools/winforms/controls/scheduler/appointments-and-dialogs/custom-appointment-element) documentation to learn how to replace the default `AppointmentElement` with your custom implementation in the RadScheduler control. + +## See Also + +- [RadScheduler Overview](https://docs.telerik.com/devtools/winforms/controls/scheduler/overview) +- [Appointment Formatting in RadScheduler](https://docs.telerik.com/devtools/winforms/controls/scheduler/appointments-and-dialogs/appointment-formatting) +- [Custom Appointment Element Documentation](https://docs.telerik.com/devtools/winforms/controls/scheduler/appointments-and-dialogs/custom-appointment-element) From ab64cb5e61a86c8e0eae3f2bb1b220b17549f61c Mon Sep 17 00:00:00 2001 From: Dinko Krastev Date: Wed, 18 Sep 2024 13:56:31 +0300 Subject: [PATCH 2/3] Add Image --- ...uler-customize-appointmentelement-text001.png | Bin 0 -> 7370 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 knowledge-base/images/scheduler-customize-appointmentelement-text001.png diff --git a/knowledge-base/images/scheduler-customize-appointmentelement-text001.png b/knowledge-base/images/scheduler-customize-appointmentelement-text001.png new file mode 100644 index 0000000000000000000000000000000000000000..3c81c2489ed4059f3442a33d912fce6ee5877ed1 GIT binary patch literal 7370 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 Date: Wed, 18 Sep 2024 14:31:01 +0300 Subject: [PATCH 3/3] Update scheduler-customize-appointmentelement-text.md --- knowledge-base/scheduler-customize-appointmentelement-text.md | 1 + 1 file changed, 1 insertion(+) diff --git a/knowledge-base/scheduler-customize-appointmentelement-text.md b/knowledge-base/scheduler-customize-appointmentelement-text.md index ef4dfd95f..2402d4fda 100644 --- a/knowledge-base/scheduler-customize-appointmentelement-text.md +++ b/knowledge-base/scheduler-customize-appointmentelement-text.md @@ -88,6 +88,7 @@ public partial class CustomAppElement : AppointmentElement return styleBuilder.ToString(); } } + ```` ### Applying the Custom Appointment Element