import 'bootstrap.css';
import '@mescius/wijmo.styles/wijmo.css';
import './styles.css';
//
import * as wjcCore from '@mescius/wijmo';
import * as wjcScheduler from '@mescius/wijmo.scheduler';
import { getDisplayDate, getMeetings, getRooms } from './data';
//
document.readyState === 'loading' ? document.addEventListener('DOMContentLoaded', init) : init();
function init() {
const rooms = getRooms();
new wjcScheduler.FlexScheduler('#theScheduler', {
itemsSource: new wjcCore.CollectionView(getMeetings()),
resources: [
{
fieldExpr: 'roomCode',
label: 'Room',
dataSource: rooms,
valueExpr: 'code',
displayExpr: 'roomName',
backgroundColorExpr: 'fill',
foreColorExpr: 'textColor',
},
],
definition: getResourceGroupingDefinition(),
displayDate: getDisplayDate(),
workHours: [{ start: '08:00', end: '17:00' }],
showToolbar: false,
});
}
function getResourceGroupingDefinition() {
return {
key: 'resourceGrouping',
rows: {
bindings: [
{
type: wjcScheduler.SchedulerAxisBindingType.Time,
unit: wjcScheduler.SchedulerTimeUnit.Hour,
visible: (args) => args.hour >= 8 && args.hour < 17,
},
],
},
columns: {
bindings: [
{
type: wjcScheduler.SchedulerAxisBindingType.Resource,
fieldExpr: 'roomCode',
},
],
},
cellSemantic: wjcScheduler.SchedulerCellSemantic.Timed,
};
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MESCIUS Wijmo Scheduler Resource Grouping</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="grouping-bar">
<div class="grouping-title">
<strong><i class="bi bi-columns-gap" aria-hidden="true"></i> Room utilization</strong>
<span>Wednesday, May 13</span>
</div>
<span class="grouping-note">Columns grouped by room</span>
</div>
<div id="theScheduler"></div>
</main>
</body>
</html>
function createDate(day, hour, minute = 0) {
return new Date(2026, 4, day, hour, minute);
}
export function getDisplayDate() {
return createDate(13, 9);
}
export function getRooms() {
return [
{ code: 'atlas', roomName: 'Atlas', fill: '#1d4ed8', textColor: '#ffffff' },
{ code: 'cedar', roomName: 'Cedar', fill: '#0f766e', textColor: '#ffffff' },
{ code: 'studio', roomName: 'Design Studio', fill: '#7e22ce', textColor: '#ffffff' },
{ code: 'summit', roomName: 'Summit', fill: '#92400e', textColor: '#ffffff' },
];
}
export function getMeetings() {
return [
{ id: 1, subject: 'Product Sync', start: createDate(13, 9), end: createDate(13, 10), roomCode: 'atlas' },
{ id: 2, subject: 'Release Readiness', start: createDate(13, 14), end: createDate(13, 15), roomCode: 'atlas' },
{ id: 3, subject: 'Hiring Panel', start: createDate(13, 10), end: createDate(13, 11, 30), roomCode: 'cedar' },
{ id: 4, subject: 'Engineering Retro', start: createDate(13, 15), end: createDate(13, 16), roomCode: 'cedar' },
{
id: 5,
subject: 'Design Critique',
start: createDate(13, 9, 30),
end: createDate(13, 10, 30),
roomCode: 'studio',
},
{
id: 6,
subject: 'Prototype Testing',
start: createDate(13, 11),
end: createDate(13, 12, 30),
roomCode: 'studio',
},
{
id: 7,
subject: 'Customer Workshop',
start: createDate(13, 13),
end: createDate(13, 14, 30),
roomCode: 'summit',
},
{
id: 8,
subject: 'Leadership Review',
start: createDate(13, 15, 30),
end: createDate(13, 16, 30),
roomCode: 'summit',
},
];
}
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;
}
.grouping-bar {
display: flex;
min-height: 44px;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 6px;
padding: 6px 10px;
border: 1px solid #dbe2ea;
background: #f8fafc;
}
.grouping-title {
display: flex;
align-items: baseline;
gap: 10px;
}
.grouping-title strong {
color: #0f172a;
font-size: 14px;
}
.grouping-title span,
.grouping-note {
color: #64748b;
font-size: 12px;
}
.grouping-note {
padding: 3px 7px;
border-left: 3px solid #0f6cbd;
background: #ffffff;
font-weight: 600;
}
#theScheduler {
height: 600px;
min-height: 520px;
}
@media (max-width: 640px) {
.grouping-bar,
.grouping-title {
align-items: flex-start;
flex-direction: column;
gap: 3px;
}
#theScheduler {
height: 640px;
min-height: 600px;
}
}
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);
