Having a text inside a specific slot in RadzenScheduler

I have a RadzenScheduler and I want to have an extra text inside some days, like the name of the bank holidays, or just showing a tooltip when mouse enters.
I tried adding an attribute to the slot in OnSlotRender, but it doesn't work.
Is this possible?

Hi @Narges_Farazan,

Adding attributes to slots is possible and demonstrated on our online demo. Check the SlotRender event.

I added these, but only the style works, am I doing something wrong?

args.Attributes["style"] = "background: rgb(26 54 66);";
args.Attributes["Text"] = $"{bankHoliday.Comment}";
args.Attributes["MouseEnter"] = $"@(args => ShowTooltip(args, {bankHoliday.Comment}))";

Only the "style" is a valid HTML attribute. Text and MouseEnter are not. You can use the built-in browser tooltips by using the title attribute:

args.Attributes["title"] = $"{bankHoliday.Comment}";

It still doesn't work, but it's a good feature if add it​:sweat_smile::pray:
I probably going to show it with the normal appointments

Just tested it and seems to work just fine (the tooltip says "Today").

    void OnSlotRender(SchedulerSlotRenderEventArgs args)
        // Highlight today in month view
        if (args.View.Text == "Month" && args.Start.Date == DateTime.Today)
            args.Attributes["style"] = "background: rgba(255,220,40,.2);";
            args.Attributes["title"] = "Today";

        // Highlight working hours (9-18)
        if ((args.View.Text == "Week" || args.View.Text == "Day") && args.Start.Hour > 8 && args.Start.Hour < 19)
            args.Attributes["style"] = "background: rgba(255,220,40,.2);";


1 Like

Ah, yes it shows as a tooltip, I thought I should expect it to be next to the date number.
Thank you.

I figured out a way to accomplish what you want via CSS:

In OnSlotRender event, add code that checks for the specific holiday you want to display:

if (args.View.Text == "Month" && args.Start.Date == new DateTime(2023, 12, 25))
    args.Attributes["class"] = "Holiday";
    args.Attributes["after-text"] = "Christmas Day";

then in your CSS file, add this:

.Holiday {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

.Holiday:after {
    content: attr(after-text);

The white-space, overflow, and text-overflow properties are needed to prevent it from messing up the calendar grid when the text is too long.