Backend API
@model DevExtreme.NETCore.Demos.ViewModels.SchedulerResourcesViewModel
<script>
const dataSource = new DevExpress.data.DataSource(@Html.Raw(Json.Serialize(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 Microsoft.AspNetCore.Mvc;
using DevExtreme.NETCore.Demos.Models.SampleData;
using DevExtreme.NETCore.Demos.ViewModels;
namespace DevExtreme.NETCore.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.NETCore.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;
namespace DevExtreme.NETCore.Demos.Models.SampleData {
public class AppointmentWithResources : Appointment {
public int[] AssigneeId { get; set; }
public int RoomId { get; set; }
public int PriorityId { get; set; }
}
}
using System;
namespace DevExtreme.NETCore.Demos.Models.SampleData {
public class AssigneeResource {
public int Id { get; set; }
public string Text { get; set; }
public string Color { get; set; }
}
}
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.NETCore.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"
}
};
}
}
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
- "dateNavigator"
Displays a ButtonGroup component with next/previous buttons and a date interval button that invokes a dropdown calendar. Define options.items to customize the control. You can add new buttons, and specify button availability/order. - "viewSwitcher"
Switches between view types (day, week, month, and others). - "today"
A "Today" button (navigates to the current date).
- "dateNavigator"
-
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.