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
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
@model DevExtreme.MVC.Demos.ViewModels.SchedulerResourcesViewModel
@{
var resourcesList = new[] { "Owner", "Room", "Priority" };
}
@(Html.DevExtreme().Scheduler()
.ID("scheduler")
.DataSource(Model.Appointments)
.Views(new[] { SchedulerViewType.WorkWeek })
.CurrentView(SchedulerViewType.WorkWeek)
.CurrentDate(new DateTime(2021, 5, 25))
.StartDayHour(9)
.EndDayHour(19)
.Resources(res => {
res.Add()
.FieldExpr("RoomId")
.ValueExpr("Id")
.ColorExpr("Color")
.Label("Room")
.DisplayExpr("Text")
.AllowMultiple(true)
.DataSource(Model.Rooms);
res.Add()
.FieldExpr("PriorityId")
.ValueExpr("Id")
.ColorExpr("Color")
.Label("Priority")
.DisplayExpr("Text")
.AllowMultiple(true)
.DataSource(Model.Priorities);
res.Add()
.FieldExpr("OwnerId")
.ValueExpr("Id")
.ColorExpr("Color")
.Label("Owner")
.DisplayExpr("Text")
.AllowMultiple(true)
.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;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<AppointmentWithResources> AppointmentsWithResources = new[] {
new AppointmentWithResources {
Text = "Website Re-Design Plan",
OwnerId = 4, RoomId = 1, PriorityId = 2,
StartDate = "2021-05-24T06:30:00.000Z",
EndDate = "2021-05-24T08:30:00.000Z"
},
new AppointmentWithResources {
Text = "Book Flights to San Fran for Sales Trip",
OwnerId = 2, RoomId = 2, PriorityId = 1,
StartDate = "2021-05-24T09:00:00.000Z",
EndDate = "2021-05-24T10:00:00.000Z",
AllDay = true
},
new AppointmentWithResources {
Text = "Install New Router in Dev Room",
OwnerId = 1, RoomId = 1, PriorityId = 2,
StartDate = "2021-05-24T11:30:00.000Z",
EndDate = "2021-05-24T12:30:00.000Z"
},
new AppointmentWithResources {
Text = "Approve Personal Computer Upgrade Plan",
OwnerId = 3, RoomId = 2, PriorityId = 2,
StartDate = "2021-05-25T07:00:00.000Z",
EndDate = "2021-05-25T08:00:00.000Z"
},
new AppointmentWithResources {
Text = "Final Budget Review",
OwnerId = 1, RoomId = 1, PriorityId = 1,
StartDate = "2021-05-25T09:00:00.000Z",
EndDate = "2021-05-25T10:35:00.000Z"
},
new AppointmentWithResources {
Text = "New Brochures",
OwnerId = 4, RoomId = 3, PriorityId = 2,
StartDate = "2021-05-25T11:30:00.000Z",
EndDate = "2021-05-25T12:45:00.000Z"
},
new AppointmentWithResources {
Text = "Install New Database",
OwnerId = 2, RoomId = 3, PriorityId = 1,
StartDate = "2021-05-26T06:45:00.000Z",
EndDate = "2021-05-26T08:15:00.000Z"
},
new AppointmentWithResources {
Text = "Approve New Online Marketing Strategy",
OwnerId = 4, RoomId = 2, PriorityId = 1,
StartDate = "2021-05-26T09:00:00.000Z",
EndDate = "2021-05-26T11:00:00.000Z"
},
new AppointmentWithResources {
Text = "Upgrade Personal Computers",
OwnerId = 2, RoomId = 2, PriorityId = 2,
StartDate = "2021-05-26T12:15:00.000Z",
EndDate = "2021-05-26T13:30:00.000Z"
},
new AppointmentWithResources {
Text = "Customer Workshop",
OwnerId = 3, RoomId = 3, PriorityId = 1,
StartDate = "2021-05-27T08:00:00.000Z",
EndDate = "2021-05-27T09:00:00.000Z",
AllDay = true
},
new AppointmentWithResources {
Text = "Prepare 2021 Marketing Plan",
OwnerId = 1, RoomId = 1, PriorityId = 2,
StartDate = "2021-05-27T08:00:00.000Z",
EndDate = "2021-05-27T10:30:00.000Z"
},
new AppointmentWithResources {
Text = "Brochure Design Review",
OwnerId = 4, RoomId = 1, PriorityId = 1,
StartDate = "2021-05-27T11:00:00.000Z",
EndDate = "2021-05-27T12:30:00.000Z"
},
new AppointmentWithResources {
Text = "Create Icons for Website",
OwnerId = 3, RoomId = 3, PriorityId = 1,
StartDate = "2021-05-28T07:00:00.000Z",
EndDate = "2021-05-28T08:30:00.000Z"
},
new AppointmentWithResources {
Text = "Upgrade Server Hardware",
OwnerId = 4, RoomId = 2, PriorityId = 2,
StartDate = "2021-05-28T11:30:00.000Z",
EndDate = "2021-05-28T13:00:00.000Z"
},
new AppointmentWithResources {
Text = "Submit New Website Design",
OwnerId = 1, RoomId = 1, PriorityId = 2,
StartDate = "2021-05-28T13:30:00.000Z",
EndDate = "2021-05-28T15:00:00.000Z"
},
new AppointmentWithResources {
Text = "Launch New Website",
OwnerId = 2, RoomId = 3, PriorityId = 1,
StartDate = "2021-05-28T09:20:00.000Z",
EndDate = "2021-05-28T11:00:00.000Z"
}
};
}
}
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.MVC.Demos.Models {
public class AppointmentWithResources : Appointment {
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;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<OwnerResource> OwnerResources = new[] {
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;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<PriorityResource> PriorityResources = new[] {
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;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<RoomResource> RoomResources = new[] {
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;
}