ASPxClientScheduler Class

Represents the client-side equivalent of the ASPxScheduler control.

Declaration

declare class ASPxClientScheduler extends ASPxClientControl

Remarks

The ASPxClientScheduler object serves as a client-side equivalent of the ASPxClientScheduler control.

Use the ClientInstanceName property to programmatically access the client object rendered for the DevExpress.Web.ASPxScheduler control in client-side script.

Example

WebForms:

ASPX

<dx:ASPxScheduler ID="DemoScheduler" runat="server" Width="100%" ClientInstanceName="scheduler" ActiveViewType="FullWeek" GroupType="Resource"
    AppointmentDataSourceID="AppointmentDataSource" ResourceDataSourceID="efResourceDataSource" OnCustomCallback="DemoScheduler_CustomCallback">
    <ClientSideEvents
        SelectionChanged="OnSelectionChanged"
        CellClick="OnCellClick"
        Init="OnInit"
    />
    <OptionsToolTips ShowAppointmentToolTip="false" />
    <FloatingActionButton>
    ...
    </FloatingActionButton>
    <Views>
    ...
    </Views>
</dx:ASPxScheduler>

JS

function OnSelectionChanged(s, e) {
    SwitchToTimeCellContext();
}
function SwitchToTimeCellContext() {
    ClearTimeRulerSelection();
}
function ClearTimeRulerSelection(s, e) {
    $(scheduler.GetMainElement()).removeClass('timeRulerSelected');
}

MVC:

Razor

@{
    var scheduler = Html.DevExpress().Scheduler(
        settings => {
            settings.Name = "scheduler";

            settings.OptionsBehavior.ShowFloatingActionButton = true;
            settings.FloatingActionButton.ClientSideEvents.ActionItemClick = "OnActionItemClick";
            settings.FloatingActionButton.Items.Add(new FABCreateAppointmentActionGroup());
            settings.FloatingActionButton.Items.Add(new FABEditAppointmentActionGroup());

            FABActionGroup scaleGroup = new FABActionGroup() { ContextName = "Scale" };
            scaleGroup.Items.Add(CreateFABActionItem("Scale15Minutes", "~/Content/Scheduler/FAB/15m.svg"));
            scaleGroup.Items.Add(CreateFABActionItem("Scale30Minutes", "~/Content/Scheduler/FAB/30m.svg"));
            scaleGroup.Items.Add(CreateFABActionItem("Scale1Hour", "~/Content/Scheduler/FAB/1h.svg"));
            settings.FloatingActionButton.Items.Add(scaleGroup);
            ...
        }
    );
}

JS

function OnMainElementClick(e) {
    if (IsTimeRulerCell(e)) {
        $(scheduler.GetMainElement()).addClass('timeRulerSelected');
        scheduler.GetFloatingActionButton().SetActionContext("Scale", true);
    }
}
function OnActionItemClick(s, e) {
    switch (e.actionName) {
        case "Scale1Hour":
            scheduler.RaiseCallback("MNUVIEW|SwitchTimeScale!01:00:00");
            break;
        case "Scale30Minutes":
            scheduler.RaiseCallback("MNUVIEW|SwitchTimeScale!00:30:00");
            break;
        case "Scale15Minutes":
            scheduler.RaiseCallback("MNUVIEW|SwitchTimeScale!00:15:00");
            break;
    }
} 

Inheritance

ASPxClientControlBase

ASPxClientControl

ASPxClientScheduler

BootstrapClientScheduler

MVCxClientScheduler