Your search did not match any results.
Scheduler

Time Zones Support

API Reference
The DevExtreme HTML5 Scheduler allows you to replicate the functionality found in today’s most popular web-based calendar/scheduling apps. The widget displays appointments across a timetable and allows you to quickly change between different timetable views using the View Selector and navigate to the required date using the Date Navigator. Of course, the widget also makes it easy to create, modify and delete appointments as needed. In this demo, appointments can be associated with resources (based on resource association, appointments are colored differently).
Copy to Codepen
Apply
Reset
$(function(){ var dataSource = new DevExpress.data.DataSource({ store: data, filter: ["startDateTimeZone", locations[0].value] }); var scheduler = $(".scheduler").dxScheduler({ dataSource: dataSource, views: ["workWeek"], currentView: "workWeek", currentDate: new Date(2015, 4, 25), startDayHour: 8, width: "100%", height: 600, timeZone: locations[0].value, resources: [ { fieldExpr: "startDateTimeZone", valueExpr: "value", dataSource: locations } ], onAppointmentFormCreated: function(e){ e.form.itemOption("startDateTimeZone", { visible: true }); e.form.itemOption("endDateTimeZone", { visible: true }); } }).dxScheduler("instance"); $("#location-switcher").dxSelectBox({ items: locations, width: 200, value: locations[0].value, displayExpr: "text", valueExpr: "value", onValueChanged: function(data) { dataSource.filter(["startDateTimeZone", data.value]); scheduler.option("timeZone", data.value); } }); });
<!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="js/jquery-3.1.0.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/16.2.4/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="locations"> <span>Office Location</span> <div id="location-switcher"></div> </div> <div class="scheduler"></div> </div> </body> </html>
.locations { margin-bottom: 10px; } .locations > span { position: relative; top: 2px; margin-right: 10px; } .locations > .dx-selectbox { display: inline-block; vertical-align: middle; }
var data = [ { text : "Stand-up meeting", startDate : "2015-05-25T15:30:00.000Z", endDate : "2015-05-25T15:45:00.000Z", recurrenceRule: "FREQ=DAILY", startDateTimeZone: "America/Los_Angeles", endDateTimeZone: "America/Los_Angeles" }, { text : "Website Re-Design Plan", startDate : "2015-05-26T16:30:00.000Z", endDate : "2015-05-26T18:30:00.000Z", startDateTimeZone: "America/Los_Angeles", endDateTimeZone: "America/Los_Angeles" }, { text : "Book Flights to San Fran for Sales Trip", startDate : "2015-05-27T18:00:00.000Z", endDate : "2015-05-27T19:00:00.000Z", startDateTimeZone: "America/Los_Angeles", endDateTimeZone: "America/Los_Angeles" }, { text : "Install New Router in Dev Room", startDate : "2015-05-28T17:00:00.000Z", endDate : "2015-05-28T21:30:00.000Z", startDateTimeZone: "America/Los_Angeles", endDateTimeZone: "America/Los_Angeles" }, { text : "Approve Personal Computer Upgrade Plan", startDate : "2015-05-29T16:00:00.000Z", endDate : "2015-05-29T17:00:00.000Z", startDateTimeZone: "America/Los_Angeles", endDateTimeZone: "America/Los_Angeles" }, { text : "New Brochures", startDate : "2015-05-29T19:30:00.000Z", endDate : "2015-05-29T20:45:00.000Z", startDateTimeZone: "America/Los_Angeles", endDateTimeZone: "America/Los_Angeles" }, { text : "Daily meeting", startDate : "2015-05-25T12:30:00.000Z", endDate : "2015-05-25T12:45:00.000Z", recurrenceRule: "FREQ=DAILY", startDateTimeZone: "America/New_York", endDateTimeZone: "America/New_York" }, { text : "Website Re-Design Plan", startDate : "2015-05-26T13:30:00.000Z", endDate : "2015-05-26T14:30:00.000Z", startDateTimeZone: "America/New_York", endDateTimeZone: "America/New_York" }, { text : "Book Flights to San Fran for Sales Trip", startDate : "2015-05-27T14:00:00.000Z", endDate : "2015-05-27T15:00:00.000Z", startDateTimeZone: "America/New_York", endDateTimeZone: "America/New_York" }, { text : "Install New Router in Dev Room", startDate : "2015-05-28T14:30:00.000Z", endDate : "2015-05-28T17:30:00.000Z", startDateTimeZone: "America/New_York", endDateTimeZone: "America/New_York" }, { text : "Approve Personal Computer Upgrade Plan", startDate : "2015-05-26T15:00:00.000Z", endDate : "2015-05-26T16:00:00.000Z", startDateTimeZone: "America/New_York", endDateTimeZone: "America/New_York" }, { text : "New Brochures", startDate : "2015-05-29T13:30:00.000Z", endDate : "2015-05-29T14:45:00.000Z", startDateTimeZone: "America/New_York", endDateTimeZone: "America/New_York" }, { text : "Upgrade Personal Computers", startDate : "2015-05-29T15:15:00.000Z", endDate : "2015-05-29T16:30:00.000Z", startDateTimeZone: "America/New_York", endDateTimeZone: "America/New_York" }, { text : "Prepare 2015 Marketing Plan", startDate : "2015-05-25T07:00:00.000Z", endDate : "2015-05-25T09:30:00.000Z", startDateTimeZone: "Europe/Berlin", endDateTimeZone: "Europe/Berlin" }, { text : "Launch New Website", startDate : "2015-05-27T08:00:00.000Z", endDate : "2015-05-27T10:00:00.000Z", startDateTimeZone: "Europe/Berlin", endDateTimeZone: "Europe/Berlin" }, { text : "Submit New Website Design", startDate : "2015-05-28T09:30:00.000Z", endDate : "2015-05-28T11:00:00.000Z", startDateTimeZone: "Europe/Berlin", endDateTimeZone: "Europe/Berlin" }, { text : "Upgrade Server Hardware", startDate : "2015-05-29T06:30:00.000Z", endDate : "2015-05-29T08:00:00.000Z", startDateTimeZone: "Europe/Berlin", endDateTimeZone: "Europe/Berlin" }, { text: "Approve New Online Marketing Strategy", startDate: "2015-05-29T11:00:00.000Z", endDate: "2015-05-29T12:30:00.000Z", startDateTimeZone: "Europe/Berlin", endDateTimeZone: "Europe/Berlin" }, { text : "Final Budget Review", startDate : "2015-05-26T09:00:00.000Z", endDate : "2015-05-26T10:35:00.000Z", startDateTimeZone: "Europe/Berlin", endDateTimeZone: "Europe/Berlin" }]; var 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" }];