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.
<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.
<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.
<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>
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.
<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();
});
}