SchedulerPopupSettingsBase.Width Property

Specifies the width of the Scheduler pop-up element (extended/compact appointment form, or tooltip).

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(null)]
[Parameter]
public virtual string Width { get; set; }

Property Value

Type	Default	Description
String	null	The element width in CSS units.

Remarks

Use the Width and Height properties to specify the pop-up element size in CSS units. Note: an appointment form (compact or extended) automatically displays a scroll bar when the content height is greater than the element height.

You can use the following properties to resctrict the element size:

• MaxHeight
• MinHeight
• MaxWidth
• MinWidth

Absolute Height

You can specify the pop-up element size in absolute units, such as pixels and inches. If you set this property to a floating-point value, the element uses the AwayFromZero operation to convert this value to an integer in pixels.

Extended Appointment Form

<DxScheduler StartDate="DateTime.Today"
             DataStorage="DataStorage">
    <Views>
        <DxSchedulerDayView ShowWorkTimeOnly="true" />
    </Views>
    <PopupSettings>
        <DxSchedulerFormSettings Height="600px" Width="1000px" />
    </PopupSettings>
</DxScheduler>

Compact Appointment Form

<DxScheduler StartDate="DateTime.Today"
             DataStorage="DataStorage">
    <Views>
        <DxSchedulerDayView ShowWorkTimeOnly="true" />
    </Views>
    <PopupSettings>
        <DxSchedulerCompactFormSettings Height="350px" Width="400px" />
    </PopupSettings>
</DxScheduler>

Appointment Tooltip

<DxScheduler StartDate="DateTime.Today"
             DataStorage="DataStorage">
    <Views>
        <DxSchedulerDayView ShowWorkTimeOnly="true" />
    </Views>
    <PopupSettings>
        <DxSchedulerTooltipSettings Height="150px" Width="270px" />
    </PopupSettings>
</DxScheduler>

Relative Height

You can define the pop-up element size in relative units: viewport width (vw) and height (vh), element font size, etc. The following markup specifies the element size in em:

Extended Appointment Form

<DxScheduler StartDate="DateTime.Today"
             DataStorage="DataStorage">
    <Views>
        <DxSchedulerDayView ShowWorkTimeOnly="true" />
    </Views>
    <PopupSettings>
        <DxSchedulerFormSettings Height="40em" Width="50em" />
    </PopupSettings>
</DxScheduler>

Compact Appointment Form

<DxScheduler StartDate="DateTime.Today"
             DataStorage="DataStorage">
    <Views>
        <DxSchedulerDayView ShowWorkTimeOnly="true" />
    </Views>
    <PopupSettings>
        <DxSchedulerCompactFormSettings Height="30em" Width="40em" />
    </PopupSettings>
</DxScheduler>

Appointment Tooltip

<DxScheduler StartDate="DateTime.Today"
             DataStorage="DataStorage">
    <Views>
        <DxSchedulerDayView ShowWorkTimeOnly="true" />
    </Views>
    <PopupSettings>
        <DxSchedulerTooltipSettings Height="12em" Width="17em" />
    </PopupSettings>
</DxScheduler>