Time Zones

This demo illustrates multiple time rulers, which are simultaneously shown in the active view. A view's rulers can be accessed through its TimeRulers collection. Each ruler is an object of the TimeRuler class.

In this demo, each time ruler shows its time using a specific time zone:

  • The first time ruler uses GMT (Greenwich Mean Time).
  • The second time ruler uses server time.
  • The third time ruler uses client time, which can be changed in the drop-down box at the top of this page.
GreenwichServerClient: (UTC-08:00) Pacific Time (US & Canada)
Lincoln Bartlett (Therapy)
300800800
303030
400900900
303030
50010001000
303030
60011001100
303030
70012PM12PM
303030
800100100
303030
900200200
303030
1000300300
303030
1100400400
303030
12AM500500
303030
100600600
303030
200700700
 

<dx:BootstrapSchedulerTimeZoneEdit ID="TimeZoneEdit" runat="server" MasterControlID="SchedulerTimeZones">
</dx:BootstrapSchedulerTimeZoneEdit>
<dx:BootstrapScheduler ID="SchedulerTimeZones" runat="server" ActiveViewType="Workweek"
    GroupType="Resource" AppointmentDataSourceID="AppointmentDataSource" ResourceDataSourceID="efResourceDataSource"
    OnAfterExecuteCallbackCommand="SchedulerTimeZones_AfterExecuteCallbackCommand">
    <OptionsResourceNavigator EnableIncreaseDecrease="false" />
    <Views>
        <DayView ResourcesPerPage="2" DayCount="2">
            <TimeRulers>
                <dx:TimeRuler TimeZoneId="Greenwich Standard Time" Caption="Greenwich" ShowMinutes="True" />
                <dx:TimeRuler Caption="Server" ShowMinutes="True" />
                <dx:TimeRuler ShowMinutes="True" />
            </TimeRulers>
        </DayView>
        <WorkWeekView ResourcesPerPage="1">
            <TimeRulers>
                <dx:TimeRuler TimeZoneId="Greenwich Standard Time" Caption="Greenwich" ShowMinutes="True"  />
                <dx:TimeRuler Caption="Server" ShowMinutes="True" />
                <dx:TimeRuler ShowMinutes="True" />
            </TimeRulers>
        </WorkWeekView>
        <FullWeekView Enabled="true" ResourcesPerPage="1">
             <TimeRulers>
                <dx:TimeRuler TimeZoneId="Greenwich Standard Time" Caption="Greenwich" ShowMinutes="True" />
                <dx:TimeRuler Caption="Server" ShowMinutes="True" />
                <dx:TimeRuler ShowMinutes="True" />
            </TimeRulers>
        </FullWeekView>
        <WeekView Enabled="false" />
        <MonthView ResourcesPerPage="1" WeekCount="4" ShowWeekend="false">
            <AppointmentDisplayOptions ShowRecurrence="true" />
        </MonthView>
        <TimelineView ResourcesPerPage="2">
            <Scales>
                <dx:TimeScaleMonth />
                <dx:TimeScaleDay />
            </Scales>
        </TimelineView>
        <AgendaView Enabled="false" />
    </Views>
</dx:BootstrapScheduler>
protected void Page_PreRender(object sender, EventArgs e) {
    UpdateTimeRulers(SchedulerTimeZones);
}
protected void SchedulerTimeZones_AfterExecuteCallbackCommand(object sender, SchedulerCallbackCommandEventArgs e) {
    if(e.CommandId == SchedulerCallbackCommandId.ChangeTimeZone)
        UpdateTimeRulers(SchedulerTimeZones);
}
void UpdateTimeRulers(BootstrapScheduler scheduler) {
    scheduler.BeginUpdate();
    try {
        UpdateClientTimeRuler(scheduler, scheduler.DayView);
        UpdateClientTimeRuler(scheduler, scheduler.WorkWeekView);
        UpdateClientTimeRuler(scheduler, scheduler.FullWeekView);
        UpdateServerTimeRuler(scheduler, scheduler.DayView);
        UpdateServerTimeRuler(scheduler, scheduler.WorkWeekView);
        UpdateServerTimeRuler(scheduler, scheduler.FullWeekView);
    } finally {
        scheduler.EndUpdate();
    }
}
void UpdateClientTimeRuler(BootstrapScheduler scheduler, DevExpress.Web.ASPxScheduler.DayView view) {
    TimeRuler ruler = view.TimeRulers[2];
    string tzId = scheduler.OptionsBehavior.ClientTimeZoneId;
    TimeZoneInfo tzi = TimeZoneInfo.FindSystemTimeZoneById(tzId);
    ruler.TimeZoneId = tzId;
    ruler.Caption = String.Format("Client: {0}", tzi.DisplayName);
}
void UpdateServerTimeRuler(BootstrapScheduler scheduler, DevExpress.Web.ASPxScheduler.DayView view) {
    TimeRuler ruler = view.TimeRulers[1];
    ruler.TimeZoneId = TimeZoneInfo.Local.Id;
}

Reminders

This demo illustrates how easy it is to set up a reminder in the Scheduler Suite. Reminders are used to send alerts at specified time periods before an appointment's start time. If an appointment has a reminder, it displays a corresponding image. Click "Create Appointment with reminder" button to create an appointment with a reminder due in 5 minutes time. Then, a reminder alert window will be invoked to provide a notification about the event.

No appointments to display
 

<dx:BootstrapButton runat="server" Text="Create Appointment With Reminder" AutoPostBack="false">
    <ClientSideEvents Click="function(s, e) { schedulerReminders.PerformCallback('CREATAPTWR'); }" />
</dx:BootstrapButton>
<dx:BootstrapScheduler ID="SchedulerReminders" ClientInstanceName="schedulerReminders" runat="server" ActiveViewType="Agenda"
    OnCustomCallback="SchedulerReminders_CustomCallback">
    <Storage EnableReminders="true" />
    <Views>
        <DayView ResourcesPerPage="2" ScrollAreaHeight="400">
        </DayView>
        <WorkWeekView Enabled="false">
        </WorkWeekView>
        <WeekView Enabled="false">
        </WeekView>
        <FullWeekView Enabled="false">
        </FullWeekView>
        <MonthView Enabled="false">
        </MonthView>
        <TimelineView Enabled="false">
        </TimelineView>
        <AgendaView Enabled="true">
        </AgendaView>
    </Views>
</dx:BootstrapScheduler>
protected void SchedulerReminders_CustomCallback(object sender, DevExpress.Web.CallbackEventArgsBase e) {
    if(e.Parameter != "CREATAPTWR")
        return;
    DateTime nowTime = DateTime.Now;
    DateTime now = new DateTime(nowTime.Year, nowTime.Month, nowTime.Day, nowTime.Hour, nowTime.Minute, nowTime.Second);
    now = now + TimeSpan.FromMinutes(5) + TimeSpan.FromSeconds(5);
    Appointment apt = SchedulerReminders.Storage.CreateAppointment(AppointmentType.Normal);
    apt.Start = now;
    apt.Duration = TimeSpan.FromHours(2);
    apt.Subject = string.Format("Appointment with Reminder ({0})", now.ToLongTimeString());
    apt.HasReminder = true;
    apt.Reminder.TimeBeforeStart = TimeSpan.FromMinutes(5);
    apt.ResourceId = EmptyResourceId.Id;
    apt.StatusKey = (int)AppointmentStatusType.Busy;
    apt.LabelKey = 1;
    SchedulerReminders.Storage.Appointments.Add(apt);
    SchedulerReminders.Start = DateTime.Today;
}

Resource Sharing

This example demonstrates how to share resources between appointments to create multi-resource appointments. To assign any appointment to several resources, open the Edit Appointment form and select the required resources in the drop-down list.

Resource sharing is not enabled by default. To use this feature you should set the ResourceSharing property to true. Make sure that your data table structure is appropriate for resource sharing, since the mapped ResourceID field will hold xml string data.

SL500 Roadster
CLK55 AMG Cabriolet
C230 Kompressor Sport Coupe
530i
Corniche
800
 
900
 
1000
 
1100
 
12PM
 
100
 
200
 
300
 
400
 
500
 
600
 
700
 

<dx:BootstrapScheduler runat="server" ActiveViewType="Day" GroupType="Resource">
    <OptionsAppearance UseResourceColorSchemas="true"></OptionsAppearance>
    <OptionsView ResourceColorFillArea="ResourceHeader"></OptionsView>
    <OptionsResourceNavigator Mode="Tokens">
        <SettingsTokens ShowResourceColor="true" />
    </OptionsResourceNavigator>
    <Storage>
        <Appointments ResourceSharing="true">
        </Appointments>
    </Storage>
    <Views>
        <DayView ResourcesPerPage="5" ScrollAreaHeight="500" >
        </DayView>
        <WorkWeekView ResourcesPerPage="2" ScrollAreaHeight="500">
        </WorkWeekView>
        <WeekView ResourcesPerPage="2" Enabled="false">
        </WeekView>
        <FullWeekView Enabled="true" ResourcesPerPage="2" ScrollAreaHeight="500">
        </FullWeekView>
        <MonthView Enabled="false">
        </MonthView>
        <TimelineView ResourcesPerPage="2">
        </TimelineView>
        <AgendaView Enabled="false">
        </AgendaView>
    </Views>
</dx:BootstrapScheduler>

Floating Action Button

The DevExpress Bootstrap Floating Action Button is a button that appears in front of a container (HTML element or control) when users interact with the container's elements.

The following types of floating action buttons are available:

  • Action - Executes the action once users click the floating action button.
  • Action Group - The floating action button serves as a container for multiple actions (action items). When pressed, the floating action button expands nested actions.

This demo adds an action group to a scheduler control. Once a user clicks the action group, two action buttons (Month View and Day View) appear. The JS code-behind file handles the button clicks and performs appropriate actions against the underlying control.

Lincoln Bartlett (Therapy)
800
 
900
 
1000
 
1100
 
12PM
 
100
 
200
 
300
 
400
 
500
 
600
 
700
 

<dx:BootstrapScheduler ID="SchedulerFloatingActionButton" runat="server" ActiveViewType="Workweek" GroupType="Resource"
    ClientInstanceName="SchedulerFloatingActionButton" AppointmentDataSourceID="AppointmentDataSource"
    ResourceDataSourceID="efResourceDataSource">
    <OptionsFloatingActionButton InitialActionContext="ViewSelection">
        <ClientSideEvents ActionItemClick="OnActionItemClick" ActionExpanding="OnActionExpanding" />
        <Items>
            <dx:BootstrapFABActionGroup ContextName="ViewSelection" ExpandIconCssClass="fas fa-ellipsis-v">
                <Items>
                    <dx:BootstrapFABActionItem ActionName="Day" Text="Day View" IconCssClass="icon icon-day_v" />
                    <dx:BootstrapFABActionItem ActionName="WorkWeek" Text="WorkWeek View" IconCssClass="icon icon-week_v" />
                    <dx:BootstrapFABActionItem ActionName="Month" Text="Month View" IconCssClass="icon icon-mo_v" />
                </Items>
            </dx:BootstrapFABActionGroup>
        </Items>
    </OptionsFloatingActionButton>
    <OptionsBehavior ShowViewSelector="False" />
    <Views>
        <DayView ResourcesPerPage="2" DayCount="2">
        </DayView>
        <WorkWeekView ResourcesPerPage="1">
        </WorkWeekView>
        <FullWeekView Enabled="false">
        </FullWeekView>
        <WeekView Enabled="false" />
        <MonthView ResourcesPerPage="1" WeekCount="4" ShowWeekend="false">
            <AppointmentDisplayOptions ShowRecurrence="true" />
        </MonthView>
        <TimelineView Enabled="false" />
        <AgendaView Enabled="false" />
    </Views>
</dx:BootstrapScheduler>
function OnActionItemClick(s, e) {
    SchedulerFloatingActionButton.SetActiveViewType(e.actionName);
}
function OnActionExpanding(s, e) {
    s.GetAction("ViewSelection").actions.forEach(function (item) {
        item.visible = item.actionName != SchedulerFloatingActionButton.GetActiveViewType();
    });
}
Screen Size
Color Themes
Demo QR Code
Client-Side API