import 'bootstrap.css';
import '@mescius/wijmo.styles/wijmo.css';
import './styles.css';
//
import { CollectionView, Globalize } from '@mescius/wijmo';
import * as wjcScheduler from '@mescius/wijmo.scheduler';
import { getDisplayDate, getEvents, getRooms } from './data';
//
document.readyState === 'loading' ? document.addEventListener('DOMContentLoaded', init) : init();
function init() {
const scheduler = new wjcScheduler.FlexScheduler('#theScheduler', {
itemsSource: new CollectionView(getEvents()),
resources: [
{
fieldExpr: 'roomId',
label: 'Room',
dataSource: getRooms(),
valueExpr: 'id',
displayExpr: 'name',
backgroundColorExpr: 'backgroundColor',
foreColorExpr: 'foreColor',
},
],
definition: getWorkWeekDefinition(),
displayDate: getDisplayDate(),
workHours: [{ start: '08:00', end: '18:00' }],
toolbarViewItems: [{ name: 'Work Week', key: wjcScheduler.SchedulerBuiltInViewItem.WorkWeek }],
allowDragEvent: true,
allowResizeEvent: true,
});
const allowDrag = document.getElementById('allowDrag');
const allowResize = document.getElementById('allowResize');
const status = document.getElementById('interactionStatus');
allowDrag.addEventListener('change', () => {
scheduler.allowDragEvent = allowDrag.checked;
updateModeStatus();
});
allowResize.addEventListener('change', () => {
scheduler.allowResizeEvent = allowResize.checked;
updateModeStatus();
});
scheduler.itemChanged.addHandler((_sender, args) => {
const item = args.result && args.result.item;
if (args.request.action === wjcScheduler.SchedulerItemChangeAction.Update && item) {
status.textContent = `${item.subject}: ${formatTime(item.start)} - ${formatTime(item.end)}.`;
}
});
function updateModeStatus() {
if (allowDrag.checked && allowResize.checked) {
status.textContent = 'Drag and resize are enabled.';
}
else if (allowDrag.checked || allowResize.checked) {
status.textContent = `${allowDrag.checked ? 'Drag' : 'Resize'} is enabled.`;
}
else {
status.textContent = 'Drag and resize are disabled.';
}
}
}
function getWorkWeekDefinition() {
const definition = wjcScheduler.createSchedulerDefinitionPreset(wjcScheduler.SchedulerBuiltInViewItem.WorkWeek);
return Object.assign(Object.assign({}, definition), { rows: {
bindings: [
{
type: wjcScheduler.SchedulerAxisBindingType.Time,
unit: wjcScheduler.SchedulerTimeUnit.Hour,
visible: (args) => args.hour >= 8 && args.hour < 18,
},
],
} });
}
function formatTime(value) {
return Globalize.format(value, 'ddd h:mm tt');
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MESCIUS Wijmo Scheduler Drag and Resize</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">
<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="interaction-toolbar" role="group" aria-label="Drag and resize settings">
<label class="form-check form-switch">
<input id="allowDrag" class="form-check-input" type="checkbox" checked>
<span class="form-check-label">Allow drag</span>
</label>
<label class="form-check form-switch">
<input id="allowResize" class="form-check-input" type="checkbox" checked>
<span class="form-check-label">Allow resize</span>
</label>
<p id="interactionStatus" class="interaction-status" role="status" aria-live="polite"><i class="bi bi-arrows-move" aria-hidden="true"></i> Drag an event to reschedule; drag its top or bottom edge to change duration.</p>
</div>
<div id="theScheduler"></div>
</main>
</body>
</html>
export function getDisplayDate() {
return new Date(2026, 4, 11);
}
export function getRooms() {
return [
{ id: 'atlas', name: 'Atlas Room', backgroundColor: '#0f6cbd', foreColor: '#ffffff' },
{ id: 'cedar', name: 'Cedar Room', backgroundColor: '#16803c', foreColor: '#ffffff' },
];
}
export function getEvents() {
return [
{
id: 1,
subject: 'Planning',
start: new Date(2026, 4, 11, 9),
end: new Date(2026, 4, 11, 10, 30),
roomId: 'atlas',
},
{
id: 2,
subject: 'Design review',
start: new Date(2026, 4, 12, 11),
end: new Date(2026, 4, 12, 12, 30),
roomId: 'cedar',
},
{
id: 3,
subject: 'Customer call',
start: new Date(2026, 4, 13, 14),
end: new Date(2026, 4, 13, 15),
roomId: 'atlas',
},
{
id: 4,
subject: 'Release check',
start: new Date(2026, 4, 14, 10),
end: new Date(2026, 4, 14, 12),
roomId: 'cedar',
},
{
id: 5,
subject: 'Team sync',
start: new Date(2026, 4, 15, 13),
end: new Date(2026, 4, 15, 14, 30),
roomId: 'atlas',
},
];
}
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;
}
.interaction-toolbar {
display: flex;
align-items: center;
gap: 10px 22px;
min-height: 44px;
margin-bottom: 6px;
padding: 5px 9px;
border: 1px solid #dbe2ea;
background: #f8fafc;
}
.form-check {
min-width: 116px;
margin: 0;
}
.interaction-status {
min-width: 0;
margin: 0;
color: #334155;
font-size: 13px;
font-weight: 500;
}
.form-check-input:focus {
border-color: #0f6cbd;
box-shadow: 0 0 0 2px rgb(15 108 189 / 22%);
}
#theScheduler {
height: calc(100vh - 52px);
min-height: 600px;
}
@media (max-width: 620px) {
.interaction-toolbar {
align-items: flex-start;
flex-wrap: wrap;
gap: 8px 16px;
}
.interaction-status {
flex: 1 1 100%;
}
#theScheduler {
height: 680px;
min-height: 680px;
}
}
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);
