$(function() {
$(".scheduler").dxScheduler({
timeZone: "America/Los_Angeles",
dataSource: data,
views: ["month"],
currentView: "month",
currentDate: new Date(2021, 7, 2, 11, 30),
firstDayOfWeek: 1,
startDayHour: 8,
endDayHour: 18,
showAllDayPanel: false,
height: 600,
groups: ["employeeID"],
resources: [
{
fieldExpr: "employeeID",
allowMultiple: false,
dataSource: employees,
label: "Employee"
}
],
dataCellTemplate: function (cellData, index, container) {
var employeeID = cellData.groups.employeeID,
currentTraining = getCurrentTraining(cellData.startDate.getDate(), employeeID);
var wrapper = $("<div>")
.toggleClass("employee-weekend-" + employeeID, isWeekEnd(cellData.startDate)).appendTo(container)
.addClass("employee-" + employeeID)
.addClass("dx-template-wrapper");
wrapper.append($("<div>")
.text(cellData.text)
.addClass(currentTraining)
.addClass("day-cell")
);
},
resourceCellTemplate: function (cellData) {
var name = $("<div>")
.addClass("name")
.css({ backgroundColor: cellData.color })
.append($("<h2>")
.text(cellData.text));
var avatar = $("<div>")
.addClass("avatar")
.html("<img src=" + cellData.data.avatar + ">")
.attr("title", cellData.text);
var info = $("<div>")
.addClass("info")
.css({ color: cellData.color })
.html("Age: " + cellData.data.age + "<br/><b>" + cellData.data.discipline + "</b>");
return $("<div>").append([name, avatar, info]);
}
});
function isWeekEnd(date) {
var day = date.getDay();
return day === 0 || day === 6;
}
function getCurrentTraining(date, employeeID) {
var result = (date + employeeID) % 3,
currentTraining = "training-background-" + result;
return currentTraining;
}
});
<!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/20.2.5/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/20.2.5/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 class="scheduler"></div>
</div>
</body>
</html>
.dx-scheduler-group-header, .dx-scheduler-date-table-cell {
position: relative;
}
.dx-scheduler-date-table-other-month.dx-scheduler-date-table-cell {
opacity: 1;
color: rgba(0, 0, 0, 0.3);
}
.dx-scheduler-date-table-cell .dx-template-wrapper {
position: absolute;
height: 100%;
width: 100%;
}
.avatar {
width: 155px;
float: left;
overflow: hidden;
position: relative;
height: 125px;
}
.name {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.name h2 {
color: #fff;
text-align: left;
padding: 0 0 5px 175px;
margin: 0;
}
.info {
width: auto;
text-align: left;
height: 100%;
font-size: 11pt;
font-weight: normal;
padding: 25px 20px;
color: #707070;
}
.dx-color-scheme-contrast .info {
color: #FFF;
}
.day-cell {
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
}
.employee-1 {
background-color: rgba(86, 202, 133, 0.1);
}
.employee-2 {
background-color: rgba(255, 151, 71, 0.1);
}
.employee-weekend-1 {
background-color: rgba(86, 202, 133, 0.2);
}
.employee-weekend-2 {
background-color: rgba(255, 151, 71, 0.2);
}
.training-background-0 {
background-image: url("../../../../images/gym/icon-abs.png");
}
.training-background-1 {
background-image: url("../../../../images/gym/icon-step.png");
}
.training-background-2 {
background-image: url("../../../../images/gym/icon-fitball.png");
}
.dx-theme-material .name h2 {
font-size: 28px;
}
var employees = [{
text : "John Heart",
id: 1,
color: "#56ca85",
avatar: "../../../../images/gym/coach-man.png",
age: 27,
discipline: "ABS, Fitball, StepFit"
}, {
text : "Sandra Johnson",
id: 2,
color: "#ff9747",
avatar: "../../../../images/gym/coach-woman.png",
age: 25,
discipline: "ABS, Fitball, StepFit"
}];
var data = [{
text: "Helen",
employeeID: 2,
startDate: new Date("2021-07-27T16:30:00.000Z"),
endDate: new Date("2021-07-27T18:30:00.000Z")
}, {
text: "Helen",
employeeID: 2,
startDate: new Date("2021-08-05T16:30:00.000Z"),
endDate: new Date("2021-08-06T18:30:00.000Z")
}, {
text: "Alex",
employeeID: 1,
startDate: new Date("2021-07-28T16:30:00.000Z"),
endDate: new Date("2021-07-28T18:30:00.000Z")
}, {
text: "Alex",
employeeID: 1,
startDate: new Date("2021-08-06T19:00:00.000Z"),
endDate: new Date("2021-08-06T20:00:00.000Z")
}, {
text: "Alex",
employeeID: 2,
startDate: new Date("2021-08-11T16:30:00.000Z"),
endDate: new Date("2021-08-11T18:30:00.000Z")
}, {
text: "Stan",
employeeID: 1,
startDate: new Date("2021-08-02T16:30:00.000Z"),
endDate: new Date("2021-08-02T18:30:00.000Z")
}, {
text: "Stan",
employeeID: 1,
startDate: new Date("2021-08-23T16:30:00.000Z"),
endDate: new Date("2021-08-23T18:30:00.000Z")
}, {
text: "Stan",
employeeID: 1,
startDate: new Date("2021-08-25T16:30:00.000Z"),
endDate: new Date("2021-08-25T18:30:00.000Z")
}, {
text: "Rachel",
employeeID: 2,
startDate: new Date("2021-07-30T16:30:00.000Z"),
endDate: new Date("2021-07-30T18:30:00.000Z")
}, {
text: "Rachel",
employeeID: 2,
startDate: new Date("2021-08-02T16:30:00.000Z"),
endDate: new Date("2021-08-02T18:30:00.000Z")
}, {
text: "Rachel",
employeeID: 1,
startDate: new Date("2021-08-16T16:30:00.000Z"),
endDate: new Date("2021-08-16T18:30:00.000Z")
}, {
text: "Kelly",
employeeID: 2,
startDate: new Date("2021-08-10T16:30:00.000Z"),
endDate: new Date("2021-08-10T18:30:00.000Z")
}, {
text: "Kelly",
employeeID: 2,
startDate: new Date("2021-08-24T16:30:00.000Z"),
endDate: new Date("2021-08-24T18:30:00.000Z")
}];