DxScheduler.AppointmentTooltipTemplate Property

Specifies the template for an appointment tooltip.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public RenderFragment<SchedulerAppointmentTooltipInfo> AppointmentTooltipTemplate { get; set; }

Property Value

Type	Description
RenderFragment<SchedulerAppointmentTooltipInfo>	The template content.

Remarks

The DxScheduler shows a tooltip when a user clicks an appointment. The tooltip can display the appointment subject, start date, end date, location, description, and resource (if these properties are specified).

You can use the AppointmentTooltipTemplate and AppointmentTooltipHeaderTemplate properties to customize the tooltip’s layout and appearance. These properties accept a SchedulerAppointmentTooltipInfo object as the context parameter. Use the context parameter to access appointment data.

The following code snippet creates a custom tooltip. The tooltip header displays the appointment’s subject (context.Appointment.Subject), the accepted status if it’s true, and predefined buttons. The tooltip body displays the appointment’s subject (context.Appointment.Subject) and resource (context.Resource.Caption).

Index.razor

@using Data

<DxScheduler StartDate="@DateTime.Today" 
             DataStorage="@DataStorage"
             GroupType="SchedulerGroupType.Date"
             ShowAppointmentTooltip = "true">
    <Views>
        <DxSchedulerDayView DayCount="2" ShowWorkTimeOnly="true"/>
    </Views>
    <AppointmentTooltipHeaderTemplate>
        <div class="tooltip-text-header">@context.Appointment.Subject</div>
        @if (IsAccepted(context))
        {
            <div style="margin-right: .3em;">(Accepted)</div>
        }
        <DxSchedulerShowAppointmentCompactFormButton></DxSchedulerShowAppointmentCompactFormButton>
        <DxSchedulerDeleteAppointmentButton></DxSchedulerDeleteAppointmentButton>
        <DxSchedulerCloseAppointmentButton></DxSchedulerCloseAppointmentButton>
    </AppointmentTooltipHeaderTemplate>
    <AppointmentTooltipTemplate>
        <span style="vertical-align: middle;">
            @context.Appointment.Subject
        </span>
        @if (context.Resource != null)
        {
            <span style="vertical-align: middle;">
                (@context.Resource.Caption)
            </span>
        }
    </AppointmentTooltipTemplate>
</DxScheduler>

@code {
    DxSchedulerDataStorage DataStorage = new DxSchedulerDataStorage() {
            AppointmentsSource = ResourceAppointmentCollection.GetAppointments(),
            AppointmentMappings = new DxSchedulerAppointmentMappings() {
                Type = "AppointmentType",
                Start = "StartDate",
                End = "EndDate",
                Subject = "Caption",
                AllDay = "AllDay",
                Location = "Location",
                Description = "Description",
                LabelId = "Label",
                StatusId = "Status",
                RecurrenceInfo = "Recurrence",
                ResourceId = "ResourceId",
                CustomFieldMappings = new List<DxSchedulerCustomFieldMapping> {
                new DxSchedulerCustomFieldMapping{ Name = "Accepted", Mapping = "Accepted" }
            }
            },
            ResourcesSource = ResourceAppointmentCollection.GetResourcesForGrouping(),
            ResourceMappings = new DxSchedulerResourceMappings() {
                Id = "Id",
                Caption = "Name",
                BackgroundCssClass = "BackgroundCss",
                TextCssClass = "TextCss"
            }
        };
    bool IsAccepted(SchedulerAppointmentTooltipInfo tooltipInfo) => 
        (bool)tooltipInfo.CustomFields["Accepted"];
}

<style>
    .tooltip-text-header {
        margin-right: auto;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
</style>

Appointment.cs

using System;

namespace Scheduler.Data
{
    public class Appointment {
        public Appointment() { }
        public int AppointmentType { get; set; }
        public DateTime StartDate { get; set; }
        public DateTime EndDate { get; set; }
        public string Caption { get; set; }
        public string Description { get; set; }
        public string Location { get; set; }
        public int? Label { get; set; }
        public int Status { get; set; }
        public bool AllDay { get; set; }
        public string Recurrence { get; set; }
        public int? ResourceId { get; set; }
        public bool Accepted { get; set; }
    }
}

ResourceAppointmentCollection.cs

using System;
using System.Collections.Generic;
using System.Linq;

namespace Scheduler.Data {

    public static partial class ResourceAppointmentCollection {
        public static List<ResourceAppointment> GetAppointments() {
            DateTime date = DateTime.Now.Date;
            var dataSource = new List<ResourceAppointment>() {
                new ResourceAppointment {
                    Accepted = true,
                    Caption = "Install New Router in Dev Room",
                    StartDate = date + (new TimeSpan(0, 10, 0, 0)),
                    EndDate = date + (new TimeSpan(0, 12, 0, 0)),
                    Status = 1,
                    ResourceId = 0
                },
                new ResourceAppointment {
                    Caption = "Upgrade Personal Computers",
                    Accepted = false,
                    StartDate = date + (new TimeSpan(0,  13, 0, 0)),
                    EndDate = date + (new TimeSpan(0, 14, 30, 0)),
                    Status = 1,
                    ResourceId = 0
                },
                new ResourceAppointment {
                    Caption = "Website Redesign Plan",
                    Accepted = false,
                    StartDate = date + (new TimeSpan(1, 9, 30, 0)),
                    EndDate = date + (new TimeSpan(1, 11, 30, 0)),
                    Status = 1,
                    ResourceId = 0
                },
                new ResourceAppointment {
                    Caption = "New Brochures",
                    Accepted = true,
                    StartDate = date + (new TimeSpan(1, 13, 30, 0)),
                    EndDate = date + (new TimeSpan(1, 15, 15, 0)),
                    Status = 1,
                    ResourceId = 0
                },
                new ResourceAppointment {
                    Caption = "Book Flights to San Fran for Sales Trip",
                    Accepted = false,
                    StartDate = date + (new TimeSpan(1, 12, 0, 0)),
                    EndDate = date + (new TimeSpan(1, 13, 0, 0)),
                    AllDay = true,
                    Status = 1,
                    ResourceId = 0
                },
                new ResourceAppointment {
                    Caption = "Approve Personal Computer Upgrade Plan",
                    Accepted = true,
                    StartDate = date + (new TimeSpan(0, 10, 0, 0)),
                    EndDate = date + (new TimeSpan(0, 12, 0, 0)),
                    Status = 1
                },
                new ResourceAppointment {
                    Caption = "Final Budget Review",
                    Accepted = true,
                    StartDate = date + (new TimeSpan(0, 13, 0, 0)),
                    EndDate = date + (new TimeSpan(0, 15, 0, 0)),
                    Status = 1,
                    ResourceId = 1
                },
                new ResourceAppointment {
                    Caption = "Install New Database",
                    Accepted = false,
                    StartDate = date + (new TimeSpan(0, 9, 45, 0)),
                    EndDate = date + (new TimeSpan(1, 11, 15, 0)),
                    Status = 1,
                    ResourceId = 1
                },
                new ResourceAppointment {
                    Accepted = true,
                    Caption = "Approve New Online Marketing Strategy",
                    StartDate = date + (new TimeSpan(1,  12, 0, 0)),
                    EndDate = date + (new TimeSpan(1, 14, 0, 0)),
                    Status = 1,
                    ResourceId = 1
                },
                new ResourceAppointment {
                    Accepted = true,
                    Caption = "Customer Workshop",
                    StartDate = date + (new TimeSpan(0,  11, 0, 0)),
                    EndDate = date + (new TimeSpan(0, 12, 0, 0)),
                    AllDay = true,
                    Status = 1,
                    ResourceId = 2
                },
                new ResourceAppointment {
                    Accepted = true,
                    Caption = "Prepare 2021 Marketing Plan",
                    StartDate = date + (new TimeSpan(0,  11, 0, 0)),
                    EndDate = date + (new TimeSpan(0, 13, 30, 0)),
                    Status = 1,
                    ResourceId = 2
                },
                new ResourceAppointment {
                    Accepted = false,
                    Caption = "Brochure Design Review",
                    StartDate = date + (new TimeSpan(0, 14, 0, 0)),
                    EndDate = date + (new TimeSpan(0, 15, 30, 0)),
                    Status = 1,
                    ResourceId = 2
                },
                new ResourceAppointment {
                    Accepted = true,
                    Caption = "Create Icons for Website",
                    StartDate = date + (new TimeSpan(1, 10, 0, 0)),
                    EndDate = date + (new TimeSpan(1, 11, 30, 0)),
                    Status = 1,
                    ResourceId = 1
                },
                new ResourceAppointment {
                    Accepted = true,
                    Caption = "Launch New Website",
                    StartDate = date + (new TimeSpan(1, 12, 20, 0)),
                    EndDate = date + (new TimeSpan(1, 14, 0, 0)),
                    Status = 1,
                    ResourceId = 2
                },
                new ResourceAppointment {
                    Accepted = false,
                    Caption = "Upgrade Server Hardware",
                    StartDate = date + (new TimeSpan(1, 9, 0, 0)),
                    EndDate = date + (new TimeSpan(1, 12, 0, 0)),
                    Status = 1,
                    ResourceId = 2
                },
                new ResourceAppointment {
                    Accepted = true,
                    Caption = "Book Flights to San Fran for Sales Trip",
                    StartDate = date + (new TimeSpan(0, 14, 0, 0)),
                    EndDate = date + (new TimeSpan(0, 17, 0, 0)),
                    Status = 1,
                    ResourceId = 3
                },
                new ResourceAppointment {
                    Accepted = true,
                    Caption = "Approve New Online Marketing Strategy",
                    StartDate = date + (new TimeSpan(0,  12, 0, 0)),
                    EndDate = date + (new TimeSpan(0, 15, 0, 0)),
                    Status = 1,
                    ResourceId = 4
                }
            };
            return dataSource;
        }

        public static List<Resource> GetResourcesForGrouping() {
            return GetResources().Take(3).ToList();
        }

        public static List<Resource> GetResources() {
            return new List<Resource>() {
                new Resource() { Id=0 , Name="John Heart", GroupId=100, BackgroundCss="dxbl-green-color", TextCss="text-white" },
                new Resource() { Id=1 , Name="Samantha Bright", GroupId=101, BackgroundCss="dxbl-orange-color", TextCss="text-white" },
                new Resource() { Id=2 , Name="Arthur Miller", GroupId=100, BackgroundCss="dxbl-purple-color", TextCss="text-white" },
                new Resource() { Id=3 , Name="Robert Reagan", GroupId=101, BackgroundCss="dxbl-indigo-color", TextCss="text-white" },
                new Resource() { Id=4 , Name="Greta Sims", GroupId=100, BackgroundCss="dxbl-red-color", TextCss="text-white" }
            };
        }

        public static List<Resource> GetResourceGroups() {
            return new List<Resource>() {
                new Resource() { Id=100, Name="Sales and Marketing", IsGroup=true },
                new Resource() { Id=101, Name="Engineering", IsGroup=true }
            };
        }
    }
}

Run Demo: Scheduler - Appointment Tooltip Template