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.

Sunday, October 9, 2016 - Saturday, October 15, 2016
10 Mon11 Tue12 Wed13 Thu14 Fri
Lincoln Bartlett (Therapy)
 

Sender:SchedulerClientSideEvents
EventType:Init
Sender:SchedulerClientSideEvents
EventType:SelectionChanged
Sender:SchedulerClientSideEvents
EventType:SelectionChanging
Trace Events:
<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: 

October
10 Mon11 Tue12 Wed13 Thu14 Fri
Lincoln Bartlett (Therapy)
 

<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.

Lincoln Bartlett (Therapy)
Sunday, October 9Monday, October 10Tuesday, October 11Wednesday, October 12Thursday, October 13Friday, October 14Saturday, October 15
800
 
900
 
1000
 
1100
 
12PM
 
100
 
200
 
300
 
400
 
500
 
600
 
700
Andrew Glover (Hospital)
Contact info: (65) 965-4016
Mark Oliver (Hospital)
Contact info: (46) 683-6484
Taylor Riley (Home)
Contact info: (41) 671-9633
Follow-up Medical Checkup
Brad Farkus (Home)
Contact info: (23) 483-9348
Bart Arnaz (Phone Consultation)
Contact info: (11) 211-4115
Arnie Schwartz (Hospital)
Contact info: (65) 353-4435
John Heart (Home)
Contact info: (67) 501-2739
Arthur Miller (Hospital)
Contact info: (83) 808-5146
Robert Reagan (Hospital)
Contact info: (97) 108-9815
Follow-up Medical Checkup
Follow-up Medical Checkup
 

<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
October 9 – 15, 2016