$(function() {
var scheduler = $("#scheduler").dxScheduler({
dataSource: data,
views: ["week", "timelineWeek"],
currentView: "week",
showCurrentTimeIndicator: true,
showAllDayPanel: false,
shadeUntilCurrentTime: true,
currentDate: new Date(),
editing: false,
height: 600,
resources: [{
fieldExpr: "movieId",
dataSource: moviesData
}],
appointmentTemplate: function(model) {
var movieInfo = getMovieById(model.appointmentData.movieId) || {};
return $("<div class='movie'>" +
"<img src='" + movieInfo.image + "' />" +
"<div class='movie-text'>" + movieInfo.text + "</div>" +
"</div>");
},
onContentReady: function(e) {
var currentHour = new Date().getHours() - 1;
e.component.scrollToTime(currentHour, 30, new Date());
},
onAppointmentClick: function(e) {
e.cancel = true;
},
onAppointmentDblClick: function(e) {
e.cancel = true;
}
}).dxScheduler("instance");
$("#show-indicator").dxSwitch({
value: true,
onValueChanged: function(e) {
scheduler.option("showCurrentTimeIndicator", e.value);
}
});
$("#allow-shading").dxSwitch({
value: true,
onValueChanged: function(e) {
scheduler.option("shadeUntilCurrentTime", e.value);
}
});
$("#update-interval").dxNumberBox({
min: 1,
max: 1200,
value: 10,
step: 10,
showSpinButtons: true,
width: "100px",
format: "#0 s",
onValueChanged: function(e) {
scheduler.option("indicatorUpdateInterval", e.value * 1000);
}
});
function getMovieById(id) {
return DevExpress.data.query(moviesData)
.filter("id", id)
.toArray()[0];
}
});
<!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.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/20.2.4/js/dx.all.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="data.js"></script>
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="scheduler"></div>
<div class="options">
<div class="column">
<div class="option">
<div class="label">Current time indicator</div>
<div class="value">
<div id="show-indicator"></div>
</div>
</div>
<div class="option">
<div class="label">Shading until current time</div>
<div class="value">
<div id="allow-shading"></div>
</div>
</div>
</div>
<div class="column">
<div class="option">
<div class="label">Update position in</div>
<div class="value">
<div id="update-interval"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
.dx-scheduler-appointment {
color: #000000;
font-weight: 500;
background-color: #e4e4e4;
}
.dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content {
padding: 5px 0px 5px 7px;
}
.options {
background-color: rgba(191, 191, 191, 0.15);
margin-top: 20px;
}
.column {
width: 40%;
display: inline-block;
margin: 15px 3%;
text-align: left;
vertical-align: top;
}
.option {
padding: 5px 0;
}
.label, .value {
display: inline-block;
vertical-align: middle;
}
.label {
width: 180px;
}
.value {
width: 30%;
}
.movie img {
height: 70px;
}
.movie-text {
font-size: 90%;
white-space: normal;
}
#allow-shading, #show-indicator {
height: 36px;
}
var today = new Date();
today.setHours(0, 0, 0, 0);
today.setDate(today.getDate() - today.getDay() + 3);
var data = [
{
movieId: 1,
startDate: new Date(today.getTime() - 113.5 * 3600000),
endDate: new Date(today.getTime() - 111.5 * 3600000),
recurrenceRule: "FREQ=HOURLY;INTERVAL=15;COUNT=15"
}, {
movieId: 2,
startDate: new Date(today.getTime() - 110.5 * 3600000),
endDate: new Date(today.getTime() - 108.5 * 3600000),
recurrenceRule: "FREQ=HOURLY;INTERVAL=15;COUNT=15"
}, {
movieId: 3,
startDate: new Date(today.getTime() - 106.5 * 3600000),
endDate: new Date(today.getTime() - 104.5 * 3600000),
recurrenceRule: "FREQ=HOURLY;INTERVAL=15;COUNT=15"
}, {
movieId: 4,
startDate: new Date(today.getTime() - 104 * 3600000),
endDate: new Date(today.getTime() - 102 * 3600000),
recurrenceRule: "FREQ=HOURLY;INTERVAL=15;COUNT=15"
}, {
movieId: 5,
startDate: new Date(today.getTime() - 101 * 3600000),
endDate: new Date(today.getTime() - 99 * 3600000),
recurrenceRule: "FREQ=HOURLY;INTERVAL=15;COUNT=15"
}
];
var moviesData = [{
id: 1,
text: "His Girl Friday",
image: "../../../../images/movies/HisGirlFriday.jpg"
}, {
id: 2,
text: "Royal Wedding",
image: "../../../../images/movies/RoyalWedding.jpg"
}, {
id: 3,
text: "A Star Is Born",
image: "../../../../images/movies/AStartIsBorn.jpg"
}, {
id: 4,
text: "The Screaming Skull",
image: "../../../../images/movies/ScreamingSkull.jpg"
}, {
id: 5,
text: "It's a Wonderful Life",
image: "../../../../images/movies/ItsAWonderfulLife.jpg"
}];