$(function(){
var scheduler = $("#scheduler").dxScheduler({
timeZone: "America/Los_Angeles",
dataSource: data,
views: ["workWeek"],
currentView: "workWeek",
currentDate: new Date(2021, 3, 27),
startDayHour: 9,
endDayHour: 19,
resources: [
{
fieldExpr: "roomId",
dataSource: rooms,
label: "Room"
}, {
fieldExpr: "priorityId",
dataSource: priorities,
label: "Priority"
}, {
fieldExpr: "assigneeId",
allowMultiple: true,
dataSource: assignees,
label: "Assignee"
}],
height: 600
}).dxScheduler("instance");
$("#resources-selector").dxRadioGroup({
items: resourcesList,
value: resourcesList[0],
layout: "horizontal",
onValueChanged: function(e) {
var resources = scheduler.option("resources");
for(var i = 0; i < resources.length; i++) {
resources[i].useColorAsDefault = resources[i].label == e.value;
}
scheduler.repaint();
}
});
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.6/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.6/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/21.1.6/js/dx.all.js"></script>
<script src="data.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="scheduler"></div>
<div class="options">
<div class="caption">Use colors of:</div>
<div class="option">
<div id="resources-selector"></div>
</div>
</div>
</div>
</body>
</html>
.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;
}
var resourcesList = ["Assignee", "Room", "Priority"],
data = [
{
text: "Website Re-Design Plan",
assigneeId: 4, roomId: 1, priorityId: 2,
startDate: new Date("2021-04-26T16:30:00.000Z"),
endDate: new Date("2021-04-26T18:30:00.000Z")
}, {
text: "Book Flights to San Fran for Sales Trip",
assigneeId: 2, roomId: 2, priorityId: 1,
startDate: new Date("2021-04-26T19:00:00.000Z"),
endDate: new Date("2021-04-26T20:00:00.000Z"),
allDay: true
}, {
text: "Install New Router in Dev Room",
assigneeId: 1, roomId: 1, priorityId: 2,
startDate: new Date("2021-04-26T21:30:00.000Z"),
endDate: new Date("2021-04-26T22:30:00.000Z")
}, {
text: "Approve Personal Computer Upgrade Plan",
assigneeId: 3, roomId: 2, priorityId: 2,
startDate: new Date("2021-04-27T17:00:00.000Z"),
endDate: new Date("2021-04-27T18:00:00.000Z")
}, {
text: "Final Budget Review",
assigneeId: 1, roomId: 1, priorityId: 1,
startDate: new Date("2021-04-27T19:00:00.000Z"),
endDate: new Date("2021-04-27T20:35:00.000Z")
}, {
text: "New Brochures",
assigneeId: 4, roomId: 3, priorityId: 2,
startDate: new Date("2021-04-27T21:30:00.000Z"),
endDate: new Date("2021-04-27T22:45:00.000Z")
}, {
text: "Install New Database",
assigneeId: 2, roomId: 3, priorityId: 1,
startDate: new Date("2021-04-28T16:45:00.000Z"),
endDate: new Date("2021-04-28T18:15:00.000Z")
}, {
text: "Approve New Online Marketing Strategy",
assigneeId: 4, roomId: 2, priorityId: 1,
startDate: new Date("2021-04-28T19:00:00.000Z"),
endDate: new Date("2021-04-28T21:00:00.000Z")
}, {
text: "Upgrade Personal Computers",
assigneeId: 2, roomId: 2, priorityId: 2,
startDate: new Date("2021-04-28T22:15:00.000Z"),
endDate: new Date("2021-04-28T23:30:00.000Z")
}, {
text: "Customer Workshop",
assigneeId: 3, roomId: 3, priorityId: 1,
startDate: new Date("2021-04-29T18:00:00.000Z"),
endDate: new Date("2021-04-29T19:00:00.000Z"),
allDay: true
}, {
text: "Prepare 2021 Marketing Plan",
assigneeId: 1, roomId: 1, priorityId: 2,
startDate: new Date("2021-04-29T18:00:00.000Z"),
endDate: new Date("2021-04-29T20:30:00.000Z")
}, {
text: "Brochure Design Review",
assigneeId: 4, roomId: 1, priorityId: 1,
startDate: new Date("2021-04-29T21:00:00.000Z"),
endDate: new Date("2021-04-29T22:30:00.000Z")
}, {
text: "Create Icons for Website",
assigneeId: 3, roomId: 3, priorityId: 1,
startDate: new Date("2021-04-30T17:00:00.000Z"),
endDate: new Date("2021-04-30T18:30:00.000Z")
}, {
text: "Upgrade Server Hardware",
assigneeId: 4, roomId: 2, priorityId: 2,
startDate: new Date("2021-04-30T21:30:00.000Z"),
endDate: new Date("2021-04-30T23:00:00.000Z")
}, {
text: "Submit New Website Design",
assigneeId: 1, roomId: 1, priorityId: 2,
startDate: new Date("2021-04-30T23:30:00.000Z"),
endDate: new Date("2021-05-01T01:00:00.000Z")
}, {
text: "Launch New Website",
assigneeId: 2, roomId: 3, priorityId: 1,
startDate: new Date("2021-04-30T19:20:00.000Z"),
endDate: new Date("2021-04-30T21:00:00.000Z")
}
];
var assignees = [
{
text: "Samantha Bright",
id: 1,
color: "#727bd2"
}, {
text: "John Heart",
id: 2,
color: "#32c9ed"
}, {
text: "Todd Hoffman",
id: 3,
color: "#2a7ee4"
}, {
text: "Sandra Johnson",
id: 4,
color: "#7b49d3"
}
];
var rooms = [
{
text: "Room 1",
id: 1,
color: "#00af2c"
}, {
text: "Room 2",
id: 2,
color: "#56ca85"
}, {
text: "Room 3",
id: 3,
color: "#8ecd3c"
}
];
var priorities = [
{
text: "High",
id: 1,
color: "#cc5c53"
}, {
text: "Low",
id: 2,
color: "#ff9747"
}
];
