The DevExtreme Scheduler ships with a customizable toolbar UI element. You can populate the toolbar with predefined and custom items—in any display order. This demo adds the "today" predefined control and two DevExtreme components to the toolbar.
To customize the Scheduler toolbar in your DevExtreme-powered app, add items to the toolbar.items[] array. DevExtreme Scheduler supports the following toolbar item types:
Predefined Controls
DevExtreme Components
You can configure a DevExtreme component within a toolbar item element. In this demo, we extended the toolbar with a Button and SelectBox.
Custom Controls
Specify items[].template to implement custom controls.
The default Scheduler toolbar displays "dateNavigator" and "viewSwitcher" predefined controls.
@model DevExtreme.MVC.Demos.ViewModels.SchedulerResourcesViewModel
<script>
const dataSource = new DevExpress.data.DataSource(@Html.Raw(Json.Encode(Model.Appointments)));
</script>
@(Html.DevExtreme().Scheduler()
.ID("scheduler")
.DataSource(new JS("dataSource"))
.TimeZone("America/Los_Angeles")
.Views(new[] {
SchedulerViewType.Day,
SchedulerViewType.Week,
SchedulerViewType.WorkWeek,
SchedulerViewType.Month,
})
.CurrentView(SchedulerViewType.WorkWeek)
.CurrentDate(Model.CurrentDate)
.StartDayHour(9)
.EndDayHour(19)
.Resources(res => {
res.Add()
.FieldExpr("AssigneeId")
.ValueExpr("Id")
.Label("Assignee")
.DisplayExpr("Text")
.AllowMultiple(true)
.DataSource(Model.Assignees);
})
.Height(600)
.TextExpr("Text")
.StartDateExpr("StartDate")
.EndDateExpr("EndDate")
.AllDayExpr("AllDay")
.RecurrenceRuleExpr("RecurrenceRule")
.RecurrenceExceptionExpr("RecurrenceException")
.Toolbar(toolbar => {
toolbar.Items(items => {
items.Add().Name(SchedulerPredefinedToolbarItem.Today);
items.Add().Name(SchedulerPredefinedToolbarItem.DateNavigator);
items.Add()
.Location(ToolbarItemLocation.Before)
.LocateInMenu(ToolbarItemLocateInMenuMode.Auto)
.Widget(w => w.Button()
.Icon("plus")
.Text("New Appointment")
.StylingMode(ButtonStylingMode.Outlined)
.OnClick("onAddButtonClick")
);
items.Add()
.Location(ToolbarItemLocation.Before)
.LocateInMenu(ToolbarItemLocateInMenuMode.Auto)
.Widget(w => w.SelectBox()
.Placeholder("Select Employee")
.DataSource(Model.Assignees)
.ShowClearButton(true)
.DisplayExpr("Text")
.ValueExpr("Id")
.InputAttr("aria-label", "Select Employee")
.Width(200)
.OnValueChanged("onSelectChange")
);
items.Add()
.Location(ToolbarItemLocation.After)
.LocateInMenu(ToolbarItemLocateInMenuMode.Auto)
.Name(SchedulerPredefinedToolbarItem.ViewSwitcher);
});
})
)
<script>
function onAddButtonClick() {
const scheduler = $("#scheduler").dxScheduler("instance");
const selected = scheduler.option("selectedCellData");
if (selected.length) {
scheduler.showAppointmentPopup({
...selected[0].groups,
AllDay: selected[0].allDay,
StartDate: new Date(selected[0].startDateUTC),
EndDate: new Date(selected.at(-1).endDateUTC),
}, true);
} else {
const currentDate = scheduler.option("currentDate");
const cellDuration = scheduler.option("cellDuration") * 60 * 1000; // ms
const currentTime = currentDate.getTime();
const roundTime = Math.round(currentTime / cellDuration) * cellDuration;
scheduler.showAppointmentPopup({
StartDate: new Date(roundTime),
EndDate: new Date(roundTime + cellDuration),
}, true);
}
}
function onSelectChange(e) {
const scheduler = $("#scheduler").dxScheduler("instance");
const dataSource = scheduler.option("dataSource");
const filter = e.value ? ["AssigneeId", "contains", e.value] : null;
dataSource.filter(filter);
scheduler.option("dataSource", dataSource);
}
</script>
using DevExtreme.MVC.Demos.Models.SampleData;
using DevExtreme.MVC.Demos.ViewModels;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class SchedulerController : Controller {
public ActionResult Toolbar() {
return View(new SchedulerResourcesViewModel {
Appointments = SampleData.GetAppointmentsDuringTheMonth(),
CurrentDate = SampleData.Get30DaysInFutureDate(),
Assignees = SampleData.AssigneeResources,
});
}
}
}using System;
using System.Collections.Generic;
public static class DateTimeExtensions {
public static DateTime TrimMinutes(this DateTime Date) {
return new DateTime(
Date.Year,
Date.Month,
Date.Day,
Date.Hour,
0,
0,
0,
Date.Kind
);
}
public static DateTime SetHours(this DateTime Date, int Hours, int Minutes) {
return new DateTime(
Date.Year,
Date.Month,
Date.Day,
Hours,
Minutes,
0,
0,
Date.Kind
);
}
}
namespace DevExtreme.MVC.Demos.Models.SampleData {
public partial class SampleData {
public static DateTime Get30DaysInFutureDate() {
return DateTime.UtcNow.TrimMinutes().AddDays(30);
}
public static IEnumerable<AppointmentWithResources> GetAppointmentsDuringTheMonth() {
DateTime Now = DateTime.UtcNow.TrimMinutes();
DateTime StartOfTheWeek = Now.AddDays(- (int)Now.DayOfWeek);
DateTime CurrentDate = Get30DaysInFutureDate();
DateTime CurrentStartOfTheWeek = CurrentDate.AddDays(- (int)CurrentDate.DayOfWeek);
return new[] {
new AppointmentWithResources {
Text = "Website Re-Design Plan",
AssigneeId = new int[] { 4 },
StartDate = StartOfTheWeek.AddDays(1).SetHours(16, 30).ToString("o"),
EndDate = StartOfTheWeek.AddDays(1).SetHours(18, 30).ToString("o"),
},
new AppointmentWithResources {
Text = "Book Flights to San Fran for Sales Trip",
AssigneeId = new int[] { 2 },
StartDate = StartOfTheWeek.AddDays(2).SetHours(19, 0).ToString("o"),
EndDate = StartOfTheWeek.AddDays(2).SetHours(20, 0).ToString("o"),
AllDay = true,
},
new AppointmentWithResources {
Text = "Install New Router in Dev Room",
AssigneeId = new int[] { 1 },
StartDate = StartOfTheWeek.AddDays(2).SetHours(21, 30).ToString("o"),
EndDate = StartOfTheWeek.AddDays(2).SetHours(22, 30).ToString("o"),
},
new AppointmentWithResources {
Text = "Approve Personal Computer Upgrade Plan",
AssigneeId = new int[] { 3 },
StartDate = StartOfTheWeek.AddDays(3).SetHours(17, 0).ToString("o"),
EndDate = StartOfTheWeek.AddDays(3).SetHours(18, 0).ToString("o"),
},
new AppointmentWithResources {
Text = "Final Budget Review",
AssigneeId = new int[] { 1 },
StartDate = StartOfTheWeek.AddDays(3).SetHours(19, 0).ToString("o"),
EndDate = StartOfTheWeek.AddDays(3).SetHours(20, 35).ToString("o"),
},
new AppointmentWithResources {
Text = "New Brochures",
AssigneeId = new int[] { 4 },
StartDate = StartOfTheWeek.AddDays(3).SetHours(21, 30).ToString("o"),
EndDate = StartOfTheWeek.AddDays(3).SetHours(22, 45).ToString("o"),
},
new AppointmentWithResources {
Text = "Install New Database",
AssigneeId = new int[] { 2 },
StartDate = StartOfTheWeek.AddDays(4).SetHours(16, 45).ToString("o"),
EndDate = StartOfTheWeek.AddDays(4).SetHours(18, 15).ToString("o"),
},
new AppointmentWithResources {
Text = "Approve New Online Marketing Strategy",
AssigneeId = new int[] { 4 },
StartDate = CurrentStartOfTheWeek.AddDays(1).SetHours(19, 0).ToString("o"),
EndDate = CurrentStartOfTheWeek.AddDays(1).SetHours(21, 0).ToString("o"),
},
new AppointmentWithResources {
Text = "Upgrade Personal Computers",
AssigneeId = new int[] { 2 },
StartDate = CurrentStartOfTheWeek.AddDays(1).SetHours(22, 15).ToString("o"),
EndDate = CurrentStartOfTheWeek.AddDays(1).SetHours(23, 30).ToString("o"),
},
new AppointmentWithResources {
Text = "Customer Workshop",
AssigneeId = new int[] { 3 },
StartDate = StartOfTheWeek.AddDays(5).SetHours(18, 0).ToString("o"),
EndDate = StartOfTheWeek.AddDays(5).SetHours(19, 0).ToString("o"),
RecurrenceRule = "FREQ=WEEKLY;INTERVAL=1",
},
new AppointmentWithResources {
Text = "Prepare 2021 Marketing Plan",
AssigneeId = new int[] { 1 },
StartDate = CurrentStartOfTheWeek.AddDays(2).SetHours(18, 0).ToString("o"),
EndDate = CurrentStartOfTheWeek.AddDays(2).SetHours(20, 30).ToString("o"),
},
new AppointmentWithResources {
Text = "Brochure Design Review",
AssigneeId = new int[] { 4 },
StartDate = StartOfTheWeek.AddDays(5).SetHours(21, 0).ToString("o"),
EndDate = StartOfTheWeek.AddDays(5).SetHours(22, 30).ToString("o"),
},
new AppointmentWithResources {
Text = "Create Icons for Website",
AssigneeId = new int[] { 3 },
StartDate = CurrentStartOfTheWeek.AddDays(5).SetHours(17, 0).ToString("o"),
EndDate = CurrentStartOfTheWeek.AddDays(5).SetHours(18, 30).ToString("o"),
},
new AppointmentWithResources {
Text = "Upgrade Server Hardware",
AssigneeId = new int[] { 4 },
StartDate = CurrentStartOfTheWeek.AddDays(2).SetHours(16, 0).ToString("o"),
EndDate = CurrentStartOfTheWeek.AddDays(2).SetHours(17, 30).ToString("o"),
},
new AppointmentWithResources {
Text = "Submit New Website Design",
AssigneeId = new int[] { 1 },
StartDate = CurrentStartOfTheWeek.AddDays(5).SetHours(23, 30).ToString("o"),
EndDate = CurrentStartOfTheWeek.AddDays(6).SetHours(1, 0).ToString("o"),
},
new AppointmentWithResources {
Text = "Launch New Website",
AssigneeId = new int[] { 2 },
StartDate = CurrentStartOfTheWeek.AddDays(4).SetHours(19, 0).ToString("o"),
EndDate = CurrentStartOfTheWeek.AddDays(4).SetHours(21, 0).ToString("o"),
},
};
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.MVC.Demos.Models {
public class AppointmentWithResources : Appointment {
public int[] AssigneeId { get; set; }
public int RoomId { get; set; }
public int PriorityId { get; set; }
}
}
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.MVC.Demos.Models {
public class AssigneeResource {
public int Id { get; set; }
public string Text { get; set; }
public string Color { get; set; }
}
}
using System;
using System.Collections.Generic;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<AssigneeResource> AssigneeResources = new[] {
new AssigneeResource {
Id = 1,
Text = "Samantha Bright",
Color = "#727bd2"
},
new AssigneeResource {
Id = 2,
Text = "John Heart",
Color = "#32c9ed"
},
new AssigneeResource {
Id = 3,
Text = "Todd Hoffman",
Color = "#2a7ee4"
},
new AssigneeResource {
Id = 4,
Text = "Sandra Johnson",
Color = "#7b49d3"
}
};
}
}