import 'bootstrap.css';
import '@mescius/wijmo.styles/wijmo.css';
import './styles.css';
import { CollectionView } from '@mescius/wijmo';
import { createSchedulerDefinitionPreset, FlexScheduler, SchedulerBuiltInViewItem } from '@mescius/wijmo.scheduler';
import { getEvents, getOffices } from './data';
document.readyState === 'loading' ? document.addEventListener('DOMContentLoaded', init) : init();
function init() {
const definition = createSchedulerDefinitionPreset(SchedulerBuiltInViewItem.Day);
const scheduler = new FlexScheduler('#theScheduler', {
itemsSource: new CollectionView(getEvents()),
resources: [
{
fieldExpr: 'officeId',
label: 'office',
dataSource: getOffices(),
valueExpr: 'id',
displayExpr: 'name',
backgroundColorExpr: 'backgroundColor',
foreColorExpr: 'foreColor',
},
],
definition,
toolbarViewItems: [{ name: 'Day', key: SchedulerBuiltInViewItem.Day }],
displayDate: new Date('2026-03-29T12:00:00Z'),
timeZone: 'Europe/London',
});
const timeZone = document.querySelector('#timeZone');
const zoneTime = document.querySelector('#zoneTime');
const zoneName = document.querySelector('#zoneName');
if (!timeZone || !zoneTime || !zoneName) {
return;
}
const applyTimeZone = () => {
const selectedTimeZone = timeZone.value || null;
scheduler.timeZone = selectedTimeZone;
zoneTime.value = formatReferenceInstant(selectedTimeZone);
zoneName.textContent = timeZone.selectedOptions[0].text;
};
timeZone.addEventListener('change', applyTimeZone);
applyTimeZone();
}
function formatReferenceInstant(timeZone) {
const instant = new Date('2026-03-29T01:00:00Z');
const resolvedTimeZone = timeZone || Intl.DateTimeFormat().resolvedOptions().timeZone;
const formatter = new Intl.DateTimeFormat(undefined, {
timeZone: resolvedTimeZone,
weekday: 'short',
month: 'short',
day: 'numeric',
hour: 'numeric',
minute: '2-digit',
timeZoneName: 'short',
});
return formatter.format(instant);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MESCIUS Wijmo Scheduler Time Zones</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<!-- SystemJS -->
<script src="https://cdn.jsdelivr.net/npm/systemjs@0.21.5/dist/system.src.js" integrity="sha512-skZbMyvYdNoZfLmiGn5ii6KmklM82rYX2uWctBhzaXPxJgiv4XBwJnFGr5k8s+6tE1pcR1nuTKghozJHyzMcoA==" crossorigin="anonymous"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app');
</script>
</head>
<body>
<main class="container-fluid">
<div class="time-zone-bar">
<label class="time-zone-control" for="timeZone">
<span><i class="bi bi-globe2" aria-hidden="true"></i> Time zone</span>
<select id="timeZone" class="form-select form-select-sm" aria-describedby="zoneTime fixedInstant">
<option value="">Browser local</option>
<option value="UTC">UTC</option>
<optgroup label="Americas">
<option value="America/Los_Angeles">Los Angeles</option>
<option value="America/Denver">Denver</option>
<option value="America/Chicago">Chicago</option>
<option value="America/New_York">New York</option>
</optgroup>
<optgroup label="Europe and Middle East">
<option value="Europe/London" selected>London</option>
<option value="Europe/Berlin">Berlin</option>
<option value="Asia/Dubai">Dubai</option>
</optgroup>
<optgroup label="Asia Pacific">
<option value="Asia/Kolkata">Kolkata</option>
<option value="Asia/Shanghai">Shanghai</option>
<option value="Asia/Tokyo">Tokyo</option>
<option value="Australia/Sydney">Sydney</option>
</optgroup>
</select>
</label>
<div class="time-zone-status" aria-live="polite">
<span><strong id="zoneName">Browser local</strong><output id="zoneTime" for="timeZone"></output></span>
<span><strong>Reference instant</strong><output id="fixedInstant">Mar 29, 2026, 01:00 UTC</output></span>
</div>
</div>
<div id="theScheduler"></div>
</main>
</body>
</html>
function utcDate(value) {
return new Date(value);
}
export function getOffices() {
return [
{ id: 'shanghai', name: 'Shanghai', backgroundColor: '#1d4ed8', foreColor: '#ffffff' },
{ id: 'los-angeles', name: 'Los Angeles', backgroundColor: '#a21caf', foreColor: '#ffffff' },
{ id: 'london', name: 'London', backgroundColor: '#047857', foreColor: '#ffffff' },
{ id: 'global', name: 'Global', backgroundColor: '#b45309', foreColor: '#ffffff' },
];
}
export function getEvents() {
return [
{
id: 1,
subject: 'Release Handoff',
start: utcDate('2026-05-11T00:30:00Z'),
end: utcDate('2026-05-11T01:30:00Z'),
officeId: 'shanghai',
},
{
id: 2,
subject: 'Design Review',
start: utcDate('2026-05-11T16:00:00Z'),
end: utcDate('2026-05-11T17:30:00Z'),
officeId: 'los-angeles',
},
{
id: 3,
subject: 'Partner Briefing',
start: utcDate('2026-05-12T08:00:00Z'),
end: utcDate('2026-05-12T09:00:00Z'),
officeId: 'london',
},
{
id: 4,
subject: 'Operations Sync',
start: utcDate('2026-05-12T16:00:00Z'),
end: utcDate('2026-05-12T17:00:00Z'),
officeId: 'global',
},
{
id: 5,
subject: 'Customer Workshop',
start: utcDate('2026-05-13T22:00:00Z'),
end: utcDate('2026-05-14T00:00:00Z'),
officeId: 'los-angeles',
},
{
id: 6,
subject: 'Roadmap Review',
start: utcDate('2026-05-14T07:00:00Z'),
end: utcDate('2026-05-14T08:30:00Z'),
officeId: 'shanghai',
},
{
id: 7,
subject: 'Weekly Wrap-up',
start: utcDate('2026-05-15T15:00:00Z'),
end: utcDate('2026-05-15T16:00:00Z'),
officeId: 'global',
},
{
id: 8,
subject: 'DST Transition',
start: utcDate('2026-03-29T00:30:00Z'),
end: utcDate('2026-03-29T02:30:00Z'),
officeId: 'london',
},
];
}
body {
color: #1f2937;
font-size: 15px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
user-select: none;
margin: 0;
}
.container-fluid {
box-sizing: border-box;
margin: 0;
padding: 5px;
}
.time-zone-bar {
display: grid;
grid-template-columns: minmax(230px, 290px) minmax(0, 1fr);
align-items: center;
gap: 8px 12px;
min-height: 52px;
margin-bottom: 6px;
padding: 5px 9px;
border: 1px solid #dbe2ea;
background: #f8fafc;
}
.time-zone-control {
display: flex;
flex-direction: column;
gap: 4px;
margin: 0;
font-weight: 600;
}
.time-zone-control > span {
display: inline-flex;
align-items: center;
gap: 6px;
color: #334155;
font-size: 12px;
}
.time-zone-status {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
color: #526170;
font-size: 13px;
}
.time-zone-status span {
display: flex;
min-width: 0;
min-height: 42px;
flex-direction: column;
justify-content: center;
padding: 4px 9px;
border-left: 2px solid #bfdbfe;
background: #ffffff;
}
.time-zone-status strong {
overflow: hidden;
color: #334155;
font-size: 12px;
text-overflow: ellipsis;
white-space: nowrap;
}
.time-zone-status output {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.form-select:focus {
border-color: #0f6cbd;
box-shadow: 0 0 0 2px rgb(15 108 189 / 20%);
}
#theScheduler {
height: 720px;
min-height: 560px;
}
@media (max-width: 640px) {
.time-zone-bar {
grid-template-columns: 1fr;
}
.time-zone-status {
grid-template-columns: 1fr;
gap: 6px;
}
#theScheduler {
height: 710px;
min-height: 710px;
}
}
input,
textarea,
[contenteditable="true"] {
user-select: text;
}
(function (global) {
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true,
},
meta: {
'*.css': { loader: 'css' },
},
paths: {
// paths serve as alias
'npm:': 'node_modules/',
'cdn:': 'https://cdn.mescius.io/demoapps/packages/wijmojs/5.20262.60-rc/',
'pcdn:': 'https://cdn.jsdelivr.net/npm/',
},
// map tells the System loader where to look for things
map: {
'@mescius/wijmo': 'cdn:@mescius/wijmo/index.js',
'@mescius/wijmo.input': 'cdn:@mescius/wijmo.input/index.js',
'@mescius/wijmo.scheduler': 'cdn:@mescius/wijmo.scheduler/index.js',
'@mescius/wijmo.styles': 'cdn:@mescius/wijmo.styles',
'@mescius/wijmo.cultures': 'cdn:@mescius/wijmo.cultures',
jszip: 'pcdn:jszip@3.8.0/dist/jszip.js',
'bootstrap.css': 'pcdn:bootstrap@5.3.8/dist/css/bootstrap.min.css',
css: 'pcdn:systemjs-plugin-css@0.1.37/css.js',
'plugin-babel': 'pcdn:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'pcdn:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',
},
packages: {
src: {
defaultExtension: 'js',
},
node_modules: {
defaultExtension: 'js',
},
},
});
})(this);
