Resources
Documentation
This example shows appointments assigned to different resources. Colors indicate the assignment. For example, appointments whose «Owner» resource is Todd Hoffman are dark blue. An appointment may be assigned to many resources, but it derives the color from the resource kind whose color scheme is set as default. In this demo, you can switch color schemes on the fly using the radio group under the Scheduler
Thank you!
We appreciate your feedback.
We appreciate your feedback.
jQuery
AngularJS
Angular
ASP.NET MVC
ASP.NET Core
@model DevExtreme.MVC.Demos.ViewModels.SchedulerResourcesViewModel
@{
var resourcesList = new[] { "Owner", "Room", "Priority" };
}
@(Html.DevExtreme().Scheduler()
.ID("scheduler")
.DataSource(Model.Appointments)
.Views(new SchedulerViewType[] {
SchedulerViewType.WorkWeek
})
.CurrentView(SchedulerViewType.WorkWeek)
.CurrentDate(new DateTime(2017, 5, 22))
.StartDayHour(9)
.EndDayHour(19)
.Resources(res => {
res.Add()
.FieldExpr("RoomId")
.ValueExpr("Id")
.ColorExpr("Color")
.Label("Room")
.DataSource(Model.Rooms);
res.Add()
.FieldExpr("PriorityId")
.ValueExpr("Id")
.ColorExpr("Color")
.Label("Priority")
.DataSource(Model.Priorities);
res.Add()
.FieldExpr("OwnerId")
.ValueExpr("Id")
.ColorExpr("Color")
.Label("Owner")
.DataSource(Model.Owners);
})
.Height(600)
.TextExpr("Text")
.StartDateExpr("StartDate")
.EndDateExpr("EndDate")
.AllDayExpr("AllDay")
.RecurrenceRuleExpr("RecurrenceRule")
.RecurrenceExceptionExpr("RecurrenceException")
)
<div class="options">
<div class="caption">Use colors of:</div>
<div class="option">
@(Html.DevExtreme().RadioGroup()
.Items(resourcesList)
.Value(resourcesList[0])
.Layout(Orientation.Horizontal)
.OnValueChanged("resources_valueChanged")
)
</div>
</div>
<script>
function resources_valueChanged(e) {
var scheduler = $("#scheduler").dxScheduler("instance"),
resources = scheduler.option("resources");
for(var i = 0; i < resources.length; i++) {
resources[i].useColorAsDefault = resources[i].label == e.value;
}
scheduler.repaint();
}
</script>
using DevExtreme.MVC.Demos.Models.SampleData;
using DevExtreme.MVC.Demos.ViewModels;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class SchedulerController : Controller {
public ActionResult Resources() {
return View(new SchedulerResourcesViewModel {
Appointments = SampleData.AppointmentsWithResources,
Owners = SampleData.OwnerResources,
Rooms = SampleData.RoomResources,
Priorities = SampleData.PriorityResources
});
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public partial class SampleData {
public static List<AppointmentWithResources> AppointmentsWithResources {
get {
return new List<AppointmentWithResources> {
new AppointmentWithResources {
AppointmentId = 1,
Text = "Website Re-Design Plan",
OwnerId = 4,
RoomId = 1,
PriorityId = 2,
StartDate = new DateTime(2017, 5, 22, 9, 30, 0),
EndDate = new DateTime(2017, 5, 22, 11, 30, 0)
},
new AppointmentWithResources {
AppointmentId = 2,
Text = "Book Flights to San Fran for Sales Trip",
OwnerId = 2,
RoomId = 2,
PriorityId = 1,
StartDate = new DateTime(2017, 5, 22, 12, 0, 0),
EndDate = new DateTime(2017, 5, 22, 13, 0, 0),
AllDay = true
},
new AppointmentWithResources {
AppointmentId = 3,
OwnerId = 1,
RoomId = 1,
PriorityId = 2,
Text = "Install New Router in Dev Room",
StartDate = new DateTime(2017, 5, 22, 14, 30, 0),
EndDate = new DateTime(2017, 5, 22, 15, 30, 0)
},
new AppointmentWithResources {
AppointmentId = 4,
Text = "Approve Personal Computer Upgrade Plan",
OwnerId = 3,
RoomId = 2,
PriorityId = 2,
StartDate = new DateTime(2017, 5, 23, 10, 0, 0),
EndDate = new DateTime(2017, 5, 23, 11, 0, 0)
},
new AppointmentWithResources {
AppointmentId = 5,
Text = "Final Budget Review",
OwnerId = 1,
RoomId = 1,
PriorityId = 1,
StartDate = new DateTime(2017, 5, 23, 12, 0, 0),
EndDate = new DateTime(2017, 5, 23, 13, 35, 0)
},
new AppointmentWithResources {
AppointmentId = 6,
Text = "New Brochures",
OwnerId = 4,
RoomId = 3,
PriorityId = 2,
StartDate = new DateTime(2017, 5, 23, 14, 30, 0),
EndDate = new DateTime(2017, 5, 23, 15, 45, 0)
},
new AppointmentWithResources {
AppointmentId = 7,
Text = "Install New Database",
OwnerId = 2,
RoomId = 3,
PriorityId = 1,
StartDate = new DateTime(2017, 5, 24, 9, 45, 0),
EndDate = new DateTime(2017, 5, 24, 11, 15, 0)
},
new AppointmentWithResources {
AppointmentId = 8,
Text = "Approve New Online Marketing Strategy",
OwnerId = 4,
RoomId = 2,
PriorityId = 1,
StartDate = new DateTime(2017, 5, 24, 12, 0, 0),
EndDate = new DateTime(2017, 5, 24, 14, 0, 0)
},
new AppointmentWithResources {
AppointmentId = 9,
Text = "Upgrade Personal Computers",
OwnerId = 2,
RoomId = 2,
PriorityId = 2,
StartDate = new DateTime(2017, 5, 24, 15, 15, 0),
EndDate = new DateTime(2017, 5, 24, 16, 30, 0)
},
new AppointmentWithResources {
AppointmentId = 10,
Text = "Customer Workshop",
OwnerId = 3,
RoomId = 3,
PriorityId = 1,
StartDate = new DateTime(2017, 5, 25, 11, 0, 0),
EndDate = new DateTime(2017, 5, 25, 12, 0, 0),
AllDay = true
},
new AppointmentWithResources {
AppointmentId = 11,
Text = "Prepare 2017 Marketing Plan",
OwnerId = 1,
RoomId = 1,
PriorityId = 2,
StartDate = new DateTime(2017, 5, 25, 11, 0, 0),
EndDate = new DateTime(2017, 5, 25, 13, 30, 0)
},
new AppointmentWithResources {
AppointmentId = 12,
Text = "Brochure Design Review",
OwnerId = 4,
RoomId = 1,
PriorityId = 1,
StartDate = new DateTime(2017, 5, 25, 14, 0, 0),
EndDate = new DateTime(2017, 5, 25, 15, 30, 0)
},
new AppointmentWithResources {
AppointmentId = 13,
Text = "Create Icons for Website",
OwnerId = 3,
RoomId = 3,
PriorityId = 1,
StartDate = new DateTime(2017, 5, 26, 10, 0, 0),
EndDate = new DateTime(2017, 5, 26, 11, 30, 0)
},
new AppointmentWithResources {
AppointmentId = 14,
Text = "Upgrade Server Hardware",
OwnerId = 4,
RoomId = 2,
PriorityId = 2,
StartDate = new DateTime(2017, 5, 26, 14, 30, 0),
EndDate = new DateTime(2017, 5, 26, 16, 0, 0)
},
new AppointmentWithResources {
AppointmentId = 15,
Text = "Submit New Website Design",
OwnerId = 1,
RoomId = 1,
PriorityId = 2,
StartDate = new DateTime(2017, 5, 26, 16, 30, 0),
EndDate = new DateTime(2017, 5, 26, 18, 0, 0)
},
new AppointmentWithResources {
AppointmentId = 16,
Text = "Launch New Website",
OwnerId = 2,
RoomId = 3,
PriorityId = 1,
StartDate = new DateTime(2017, 5, 26, 12, 20, 0),
EndDate = new DateTime(2017, 5, 26, 14, 0, 0)
}
};
}
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.MVC.Demos.Models {
public class AppointmentWithResources {
public int AppointmentId { get; set; }
public string Text { get; set; }
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
public bool AllDay { get; set; }
public int OwnerId { 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 OwnerResource {
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.MVC.Demos.Models.SampleData {
public partial class SampleData {
public static List<OwnerResource> OwnerResources {
get {
return new List<OwnerResource> {
new OwnerResource {
Id = 1,
Text = "Samantha Bright",
Color = "#727bd2"
},
new OwnerResource {
Id = 2,
Text = "John Heart",
Color = "#32c9ed"
},
new OwnerResource {
Id = 3,
Text = "Todd Hoffman",
Color = "#2a7ee4"
},
new OwnerResource {
Id = 4,
Text = "Sandra Johnson",
Color = "#7b49d3"
}
};
}
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.MVC.Demos.Models {
public class PriorityResource {
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.MVC.Demos.Models.SampleData {
public partial class SampleData {
public static List<PriorityResource> PriorityResources {
get {
return new List<PriorityResource> {
new PriorityResource {
Id = 1,
Text = "High priority",
Color = "#cc5c53"
},
new PriorityResource {
Id = 2,
Text = "Low priority",
Color = "#ff9747"
}
};
}
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.MVC.Demos.Models {
public class RoomResource {
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.MVC.Demos.Models.SampleData {
public partial class SampleData {
public static List<RoomResource> RoomResources {
get {
return new List<RoomResource> {
new RoomResource {
Id = 1,
Text = "Room 1",
Color = "#00af2c"
},
new RoomResource {
Id = 2,
Text = "Room 2",
Color = "#56ca85"
},
new RoomResource {
Id = 3,
Text = "Room 3",
Color = "#8ecd3c"
}
};
}
}
}
}
.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
margin-top: 20px;
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option {
margin-top: 10px;
display: inline-block;
}