Skip to main content

DxSchedulerShowAppointmentCompactFormButton Class

A button that invokes an appointment’s compact edit form.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxSchedulerShowAppointmentCompactFormButton :
    SchedulerPopupButtonBase

Remarks

Use the DxSchedulerShowAppointmentCompactFormButton object to add the Show Compact Form button to an appointment’s tooltip, the extended edit form, or recurrence settings form. Declare this object in the following properties:

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

@using Data

<DxScheduler StartDate="@DateTime.Today" 
             DataStorage="@DataStorage"
             GroupType="SchedulerGroupType.Date">
    <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 {
    bool ShowAppointmentTooltip { get; set; } = true;
    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>

Scheduler - A custom appointment tooltip

Run Demo: Scheduler - Appointment Tooltip Template

Inheritance

Object
ComponentBase
SchedulerPopupButtonBase
DxSchedulerShowAppointmentCompactFormButton
See Also