window.onload = function () {
const dataSource = new DevExpress.data.DataSource({
store: data,
filter: ['startDateTimeZone', locations[0].value],
});
const currentLocation = ko.observable(locations[0].value);
const timeZone = ko.computed(() => {
const result = currentLocation();
dataSource.filter(['startDateTimeZone', result]);
return result;
});
const viewModel = {
schedulerOptions: {
dataSource,
views: ['workWeek'],
currentView: 'workWeek',
currentDate: new Date(2021, 3, 27),
height: 600,
timeZone,
resources: [
{
fieldExpr: 'startDateTimeZone',
valueExpr: 'value',
dataSource: locations,
},
],
onAppointmentFormOpening(e) {
e.form.itemOption('startDateTimeZone', { visible: true });
e.form.itemOption('endDateTimeZone', { visible: true });
},
},
locationSwitcherOptions: {
items: locations,
width: 200,
value: currentLocation,
displayExpr: 'text',
valueExpr: 'value',
},
};
ko.applyBindings(viewModel, document.getElementById('scheduler-demo'));
};
<!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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.2.3/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/22.2.3/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-demo">
<div data-bind="dxScheduler: schedulerOptions"></div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<span>Office Location</span>
<div data-bind="dxSelectBox: locationSwitcherOptions"></div>
</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;
}
.option > span {
position: relative;
top: 2px;
margin-right: 10px;
}
.option > .dx-selectbox {
display: inline-block;
vertical-align: middle;
}
const data = [
{
text: 'Stand-up meeting',
startDate: '2021-04-26T15:30:00.000Z',
endDate: '2021-04-26T15:45:00.000Z',
recurrenceRule: 'FREQ=DAILY',
startDateTimeZone: 'America/Los_Angeles',
endDateTimeZone: 'America/Los_Angeles',
}, {
text: 'Website Re-Design Plan',
startDate: '2017-04-25T16:30:00.000Z',
endDate: '2017-04-25T18:30:00.000Z',
startDateTimeZone: 'America/Los_Angeles',
endDateTimeZone: 'America/Los_Angeles',
}, {
text: 'Book Flights to San Fran for Sales Trip',
startDate: '2021-04-28T18:00:00.000Z',
endDate: '2021-04-28T19:00:00.000Z',
startDateTimeZone: 'America/Los_Angeles',
endDateTimeZone: 'America/Los_Angeles',
}, {
text: 'Install New Router in Dev Room',
startDate: '2017-04-27T17:00:00.000Z',
endDate: '2017-04-27T21:30:00.000Z',
startDateTimeZone: 'America/Los_Angeles',
endDateTimeZone: 'America/Los_Angeles',
}, {
text: 'Approve Personal Computer Upgrade Plan',
startDate: '2017-04-28T16:00:00.000Z',
endDate: '2017-04-28T17:00:00.000Z',
startDateTimeZone: 'America/Los_Angeles',
endDateTimeZone: 'America/Los_Angeles',
}, {
text: 'New Brochures',
startDate: '2017-04-28T19:30:00.000Z',
endDate: '2017-04-28T20:45:00.000Z',
startDateTimeZone: 'America/Los_Angeles',
endDateTimeZone: 'America/Los_Angeles',
}, {
text: 'Daily meeting',
startDate: '2017-04-24T12:30:00.000Z',
endDate: '2017-04-24T12:45:00.000Z',
recurrenceRule: 'FREQ=DAILY',
startDateTimeZone: 'America/New_York',
endDateTimeZone: 'America/New_York',
}, {
text: 'Website Re-Design Plan',
startDate: '2021-04-27T13:30:00.000Z',
endDate: '2017-04-25T14:30:00.000Z',
startDateTimeZone: 'America/New_York',
endDateTimeZone: 'America/New_York',
}, {
text: 'Book Flights to San Fran for Sales Trip',
startDate: '2017-04-26T14:00:00.000Z',
endDate: '2021-04-28T15:00:00.000Z',
startDateTimeZone: 'America/New_York',
endDateTimeZone: 'America/New_York',
}, {
text: 'Install New Router in Dev Room',
startDate: '2017-04-27T14:30:00.000Z',
endDate: '2017-04-27T17:30:00.000Z',
startDateTimeZone: 'America/New_York',
endDateTimeZone: 'America/New_York',
}, {
text: 'Approve Personal Computer Upgrade Plan',
startDate: '2017-04-25T15:00:00.000Z',
endDate: '2017-04-25T16:00:00.000Z',
startDateTimeZone: 'America/New_York',
endDateTimeZone: 'America/New_York',
}, {
text: 'New Brochures',
startDate: '2017-04-28T13:30:00.000Z',
endDate: '2017-04-28T14:45:00.000Z',
startDateTimeZone: 'America/New_York',
endDateTimeZone: 'America/New_York',
}, {
text: 'Upgrade Personal Computers',
startDate: '2017-04-28T15:15:00.000Z',
endDate: '2017-04-28T16:30:00.000Z',
startDateTimeZone: 'America/New_York',
endDateTimeZone: 'America/New_York',
}, {
text: 'Prepare 2021 Marketing Plan',
startDate: '2021-04-26T07:00:00.000Z',
endDate: '2021-04-26T09:30:00.000Z',
startDateTimeZone: 'Europe/Berlin',
endDateTimeZone: 'Europe/Berlin',
}, {
text: 'Launch New Website',
startDate: '2021-04-28T08:00:00.000Z',
endDate: '2021-04-28T10:00:00.000Z',
startDateTimeZone: 'Europe/Berlin',
endDateTimeZone: 'Europe/Berlin',
}, {
text: 'Submit New Website Design',
startDate: '2021-04-29T09:30:00.000Z',
endDate: '2021-04-29T11:00:00.000Z',
startDateTimeZone: 'Europe/Berlin',
endDateTimeZone: 'Europe/Berlin',
}, {
text: 'Upgrade Server Hardware',
startDate: '2021-04-30T06:30:00.000Z',
endDate: '2021-04-30T08:00:00.000Z',
startDateTimeZone: 'Europe/Berlin',
endDateTimeZone: 'Europe/Berlin',
}, {
text: 'Approve New Online Marketing Strategy',
startDate: '2021-04-30T11:00:00.000Z',
endDate: '2021-04-30T12:30:00.000Z',
startDateTimeZone: 'Europe/Berlin',
endDateTimeZone: 'Europe/Berlin',
}, {
text: 'Final Budget Review',
startDate: '2021-04-27T09:00:00.000Z',
endDate: '2021-04-27T10:35:00.000Z',
startDateTimeZone: 'Europe/Berlin',
endDateTimeZone: 'Europe/Berlin',
}];
const locations = [{
value: 'America/Los_Angeles',
text: 'Los Angeles',
color: '#1e90ff',
}, {
value: 'America/New_York',
text: 'New York',
color: '#56ca85',
}, {
value: 'Europe/Berlin',
text: 'Berlin',
color: '#ff9747',
}];