$(function () {
const currentDate = new Date(2021, 4, 25);
const getLocations = function(date) {
const timeZones = DevExpress.utils.getTimeZones(date);
return timeZones.filter(function(timeZone) {
return locations.indexOf(timeZone.id) !== -1;
});
};
const demoLocations = getLocations(currentDate);
var scheduler = $("#scheduler").dxScheduler({
dataSource: data,
views: ["workWeek"],
timeZone: demoLocations[0].id,
currentView: "workWeek",
currentDate: currentDate,
startDayHour: 8,
height: 600,
editing: {
allowTimeZoneEditing: true
},
onOptionChanged: function(e) {
if(e.name === 'currentDate') {
locationSwitcher.option('items', getLocations(e.value));
}
},
onAppointmentFormOpening: function(e) {
const form = e.form;
const startDateTimezoneEditor = form.getEditor('startDateTimeZone');
const endDateTimezoneEditor = form.getEditor('endDateTimeZone');
const startDateDataSource = startDateTimezoneEditor.option('dataSource');
const endDateDataSource = endDateTimezoneEditor.option('dataSource');
startDateDataSource.filter(['id', 'contains', 'Europe']);
endDateDataSource.filter(['id', 'contains', 'Europe']);
startDateDataSource.load();
endDateDataSource.load();
}
}).dxScheduler("instance");
const locationSwitcher = $("#location-switcher").dxSelectBox({
items: demoLocations,
displayExpr: "title",
valueExpr: "id",
width: 240,
value: demoLocations[0].id,
onValueChanged: function(data) {
scheduler.option("timeZone", data.value);
}
}).dxSelectBox('instance');
});
<!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="option">
<span>Office Time Zone</span>
<div id="location-switcher"></div>
</div>
<div id="scheduler"></div>
</div>
</body>
</html>
.option {
display: flex;
}
.option > span {
display: flex;
align-items: center;
margin-right: 10px;
}
.dx-scheduler {
margin-top: 20px;
}
var data = [
{
text: "Stand-up meeting",
startDate: "2021-05-24T15:30:00.000Z",
endDate: "2021-05-24T15:45:00.000Z",
recurrenceRule: "FREQ=DAILY"
}, {
text: "Book Flights to San Fran for Sales Trip",
startDate: "2021-05-26T18:00:00.000Z",
endDate: "2021-05-26T19:00:00.000Z"
}, {
text: "New Brochures",
startDate: "2021-05-28T18:30:00.000Z",
endDate: "2021-05-28T18:45:00.000Z"
}, {
text: "Website Re-Design Plan",
startDate: "2021-05-25T12:30:00.000Z",
endDate: "2021-05-25T13:30:00.000Z"
}, {
text: "Book Flights to San Fran for Sales Trip",
startDate: "2021-05-26T16:00:00.000Z",
endDate: "2021-05-26T15:00:00.000Z"
}, {
text: "Prepare 2021 Marketing Plan",
startDate: "2021-05-24T07:00:00.000Z",
endDate: "2021-05-24T09:30:00.000Z"
}, {
text: "Launch New Website",
startDate: "2021-05-26T08:00:00.000Z",
endDate: "2021-05-26T10:00:00.000Z"
}, {
text: "Submit New Website Design",
startDate: "2021-05-27T09:30:00.000Z",
endDate: "2021-05-27T11:00:00.000Z"
}, {
text: "Upgrade Server Hardware",
startDate: "2021-05-28T06:30:00.000Z",
endDate: "2021-05-28T08:00:00.000Z"
}, {
text: "Approve New Online Marketing Strategy",
startDate: "2021-05-28T11:00:00.000Z",
endDate: "2021-05-28T12:30:00.000Z"
}, {
text: "Final Budget Review",
startDate: "2021-05-25T09:00:00.000Z",
endDate: "2021-05-25T10:35:00.000Z"
}];
var locations = ['Europe/London', 'Europe/Berlin', 'Europe/Helsinki'];