Client-Side Events

This Demo illustrates the capabilities of the Bootstrap Scheduler control's client events. This demo allows you to specify which client-side events you want to track. Interact with the Scheduler interface, and information about all tracked events raised in response of your actions will be displayed in the event log.

Show more
 

Trace Events:
ASPXCopy 
<dx:BootstrapScheduler runat="server" ActiveViewType="Timeline" GroupType="Resource"
    AppointmentDataSourceID="AppointmentDataSource" ResourceDataSourceID="efResourceDataSource">
    <ClientSideEvents
        AppointmentClick="function(s, e) { dxbsDemo.eventMonitor.trace(s, e, 'AppointmentClick'); }"
        AppointmentDrag="function(s, e) { dxbsDemo.eventMonitor.trace(s, e, 'AppointmentDrag'); }"
        AppointmentDrop="function(s, e) { dxbsDemo.eventMonitor.trace(s, e, 'AppointmentDrop'); }"
        AppointmentResize="function(s, e) { dxbsDemo.eventMonitor.trace(s, e, 'AppointmentResize'); }"
        AppointmentResizing="function(s, e) { dxbsDemo.eventMonitor.trace(s, e, 'AppointmentResizing'); }"
        AppointmentDeleting="function(s, e) { dxbsDemo.eventMonitor.trace(s, e, 'AppointmentDeleting'); }"
        AppointmentsSelectionChanged="function(s, e) { dxbsDemo.eventMonitor.trace(s, e, 'AppointmentsSelectionChanged'); }"
        AppointmentDoubleClick="function(s, e) { dxbsDemo.eventMonitor.trace(s, e, 'AppointmentDoubleClick'); }"
        ActiveViewChanged="function(s, e) { dxbsDemo.eventMonitor.trace(s, e, 'ActiveViewChanged'); }"
        ActiveViewChanging="function(s, e) { dxbsDemo.eventMonitor.trace(s, e, 'ActiveViewChanging'); }"
        SelectionChanged="function(s, e) { dxbsDemo.eventMonitor.trace(s, e, 'SelectionChanged'); }"
        SelectionChanging="function(s, e) { dxbsDemo.eventMonitor.trace(s, e, 'SelectionChanging'); }"
        VisibleIntervalChanged="function(s, e) { dxbsDemo.eventMonitor.trace(s, e, 'VisibleIntervalChanged'); }"
        MenuItemClicked="function(s, e) { dxbsDemo.eventMonitor.trace(s, e, 'MenuItemClicked'); }"
        MoreButtonClicked="function(s, e) { dxbsDemo.eventMonitor.trace(s, e, 'MoreButtonClicked'); }"
        MouseUp="function(s, e) { dxbsDemo.eventMonitor.trace(s, e, 'MouseUp'); }"
        BeginCallback="function(s, e) { dxbsDemo.eventMonitor.trace(s, e, 'BeginCallback'); }"
        CallbackError="function(s, e) { dxbsDemo.eventMonitor.trace(s, e, 'CallbackError'); }"
        EndCallback="function(s, e) { dxbsDemo.eventMonitor.trace(s, e, 'EndCallback'); }"
        Init="function(s, e) { dxbsDemo.eventMonitor.trace(s, e, 'Init'); }" />
    <OptionsResourceNavigator EnableIncreaseDecrease="false" />
    <Views>
        <DayView ResourcesPerPage="2" DayCount="2" />
        <WorkWeekView ResourcesPerPage="1" />
        <WeekView Enabled="false"/>
        <MonthView Enabled="false"/>
        <TimelineView ResourcesPerPage="1" IntervalCount="5" />
    </Views>
</dx:BootstrapScheduler>

Appointment Selection API

This demo illustrates how to take advantage of the Bootstrap Scheduler's client-side scripting to obtain information about the selected appointment.

In this example, the AppointmentSelectionChanged client-side scripting event is handled. It is raised every time an end-user selects an appointment. The GetAppointmentProperties method is used to make an asynchronous callback for appointment property values. This method uses the list of appointment properties and the function handler as input parameters. The function will receive property values when they are delivered.

After the values are passed to the specified function, it formats and displays them.

Subject: 
Location: 
Start time: 
End time: 
Description: 

Show more
 

ASPXJSCopy 
<dx:BootstrapScheduler runat="server" ActiveViewType="Timeline" GroupType="Resource"
    AppointmentDataSourceID="AppointmentDataSource" ResourceDataSourceID="efResourceDataSource">
    <OptionsResourceNavigator EnableIncreaseDecrease="false" />
    <ClientSideEvents AppointmentsSelectionChanged="function(s, e) { OnAppointmentsSelectionChanged(s, e.appointmentIds); }" />
    <Views>
        <DayView Enabled="false" />
        <WorkWeekView Enabled="false" />
        <WeekView Enabled="false" />
        <FullWeekView Enabled="true" ResourcesPerPage="1"/>
        <MonthView Enabled="false" />
        <TimelineView ResourcesPerPage="1" IntervalCount="5">
            <Scales>
                <dx:TimeScaleMonth />
                <dx:TimeScaleDay />
            </Scales>
        </TimelineView>
        <AgendaView Enabled="false" />
    </Views>
</dx:BootstrapScheduler>
function OnAppointmentsSelectionChanged(scheduler, appointmentIds) {
    if(appointmentIds != null && appointmentIds.length == 1) {
        scheduler.GetAppointmentProperties(appointmentIds[0], 'Subject;Location;Start;End;Description', OnGetAppointmentProps);
    } else
        OnGetAppointmentProps(null);
}
function OnGetAppointmentProps(values) {
    var formatter = new ASPx.DateFormatter();
    formatter.SetFormatString("dd.MM.yyyy HH:mm");
    $("#infoSubject").html(values ? values[0] : "");
    $("#infoLocation").html(values ? values[1] : "");
    $("#infoStartTime").html(values ? formatter.Format(values[2]) : "");
    $("#infoEndTime").html(values ? formatter.Format(values[3]) : "");
    $("#infoDescription").html(values ? values[4] : "");
}

Active View Changing API

This demo illustrates how to take advantage of the Bootstrap Scheduler's client-side scripting when switching active views.

In this demo, you're able to switch an active view by selecting it in the combo box. To perform this, the code uses the Bootstrap Scheduler client-side API.

When a view type is selected in the drop-down list, the SetActiveViewType client-side method is called to change the active view.

Two client-side events are handled when the active view type is being modified. The ActiveViewChanging event handler asks the user for a confirmation of changing the scheduler's view type, and if the answer is negative, cancels the operation. After the active view type is changed, the ActiveViewChanged event occurs. It uses the GetActiveViewType client-side method to indicate the currently active view for updating the combo box content.
 

ASPXJSCopy 
<dx:BootstrapRadioButtonList ClientInstanceName="radioButtonListViews"
    runat="server" SelectedIndex="0" ValueType="System.String" RepeatDirection="Horizontal">
    <ClientSideEvents SelectedIndexChanged="function(s, e) { OnSelectViewType(s); }" />
    <Items>
        <dx:BootstrapListEditItem Text="Day View" Value="Day" />
        <dx:BootstrapListEditItem Text="Work Week View" Value="WorkWeek" />
        <dx:BootstrapListEditItem Text="Full Week View" Value="FullWeek" />
        <dx:BootstrapListEditItem Text="Week View" Value="Week" />
        <dx:BootstrapListEditItem Text="Month View" Value="Month" />
        <dx:BootstrapListEditItem Text="Timeline View" Value="Timeline" />
        <dx:BootstrapListEditItem Text="Agenda View" Value="Agenda" />
    </Items>
</dx:BootstrapRadioButtonList>
<dx:BootstrapScheduler ClientInstanceName="schedulerActiveViewChangingAPI" runat="server"
    GroupType="Resource" ActiveViewType="FullWeek"
    AppointmentDataSourceID="AppointmentDataSource" ResourceDataSourceID="efResourceDataSource">
    <OptionsResourceNavigator EnableIncreaseDecrease="false" />
    <ClientSideEvents ActiveViewChanged="function(s, e) { OnActiveViewChanged(); }" ActiveViewChanging="function(s, e) { OnActiveViewChanging(e); }" />
    <Views>
        <DayView ResourcesPerPage="2" DayCount="2" />
        <WorkWeekView ResourcesPerPage="1" />
        <WeekView Enabled="true" ResourcesPerPage="1">
        </WeekView>
        <FullWeekView Enabled="true" ResourcesPerPage="1" />
        <MonthView ResourcesPerPage="1">
        </MonthView>
        <TimelineView ResourcesPerPage="2">
        </TimelineView>
        <AgendaView ScrollAreaHeight="500" DayCount="3">
        </AgendaView>
    </Views>
</dx:BootstrapScheduler>
function OnActiveViewChanging(args) {
    var answer = confirm('Do you want to switch the current view from ' + args.oldView + ' to ' + args.newView + '?');
    if(!answer) {
        args.cancel = true;
        radioButtonListViews.SetValue(args.oldView);
    }
}
function OnActiveViewChanged() {
    var currType = schedulerActiveViewChangingAPI.GetActiveViewType();
    radioButtonListViews.SetValue(currType);
}
function OnSelectViewType(viewType) {
    var newType = radioButtonListViews.GetSelectedItem().value;
    schedulerActiveViewChangingAPI.SetActiveViewType(newType);
}
Screen Size
Color Themes
Demo QR Code