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, getEvents, getResources } from './data';
//
const customDefinitions = createCustomDefinitions();
const toolbarViewItems = [
{ name: 'Week', key: wjcScheduler.SchedulerBuiltInViewItem.Week },
{ name: 'Month', key: wjcScheduler.SchedulerBuiltInViewItem.Month },
{ name: 'Team Day', key: customDefinitions.teamDay.key, definition: customDefinitions.teamDay },
{ name: 'Focus Days', key: customDefinitions.focusDays.key, definition: customDefinitions.focusDays },
{
name: 'Team Timeline',
key: customDefinitions.teamTimeline.key,
definition: customDefinitions.teamTimeline,
},
{
name: 'Team Week Board',
key: customDefinitions.teamWeekBoard.key,
definition: customDefinitions.teamWeekBoard,
},
];
document.readyState === 'loading' ? document.addEventListener('DOMContentLoaded', init) : init();
function init() {
new wjcScheduler.FlexScheduler('#theScheduler', {
itemsSource: new wjcCore.CollectionView(getEvents()),
resources: [
{
fieldExpr: 'teamId',
label: 'team',
dataSource: getResources(),
valueExpr: 'id',
displayExpr: 'name',
backgroundColorExpr: 'backgroundColor',
foreColorExpr: 'foreColor',
},
],
definition: Object.assign(Object.assign({}, wjcScheduler.createSchedulerDefinitionPreset(wjcScheduler.SchedulerBuiltInViewItem.Week)), { rows: { bindings: [createCustomDefinitions().teamDay.rows.bindings[0]] } }),
displayDate: getDisplayDate(),
workHours: [{ start: '07:00', end: '19:00' }],
toolbarViewItems,
});
}
function createCustomDefinitions() {
const hourBinding = () => ({
type: wjcScheduler.SchedulerAxisBindingType.Time,
unit: wjcScheduler.SchedulerTimeUnit.Hour,
visible: (args) => args.hour !== undefined && args.hour >= 7 && args.hour < 19,
});
const dayBinding = () => ({
type: wjcScheduler.SchedulerAxisBindingType.Time,
unit: wjcScheduler.SchedulerTimeUnit.DayOfWeek,
});
const teamBinding = () => ({
type: wjcScheduler.SchedulerAxisBindingType.Resource,
fieldExpr: 'teamId',
});
return {
teamDay: {
key: 'teamDay',
rows: { bindings: [hourBinding()] },
columns: { bindings: [teamBinding()] },
cellSemantic: wjcScheduler.SchedulerCellSemantic.Timed,
},
focusDays: {
key: 'focusDays',
rows: { bindings: [hourBinding()] },
columns: {
bindings: [
Object.assign(Object.assign({}, dayBinding()), { visible: (args) => args.dayOfWeek !== undefined &&
args.dayOfWeek >= wjcScheduler.SchedulerDayOfWeek.Tuesday &&
args.dayOfWeek <= wjcScheduler.SchedulerDayOfWeek.Thursday }),
],
},
cellSemantic: wjcScheduler.SchedulerCellSemantic.Timed,
},
teamTimeline: {
key: 'teamTimeline',
rows: { bindings: [teamBinding()] },
columns: { bindings: [dayBinding(), hourBinding()] },
cellSemantic: wjcScheduler.SchedulerCellSemantic.Timed,
},
teamWeekBoard: {
key: 'teamWeekBoard',
rows: { bindings: [teamBinding()] },
columns: { bindings: [dayBinding()] },
cellSemantic: wjcScheduler.SchedulerCellSemantic.Summary,
},
};
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MESCIUS Wijmo Scheduler Built-in with Customize Views</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 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="view-description" role="note">
<strong>Built-in views:</strong> Week, Month.
<strong>Custom views:</strong> Team Day, Focus Days, Team Timeline, Team Week Board.
</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 getResources() {
return [
{ id: 'engineering', name: 'Engineering', backgroundColor: '#0f766e', foreColor: '#ffffff' },
{ id: 'design', name: 'Design', backgroundColor: '#7c3aed', foreColor: '#ffffff' },
{ id: 'product', name: 'Product', backgroundColor: '#2563eb', foreColor: '#ffffff' },
{ id: 'marketing', name: 'Marketing', backgroundColor: '#b45309', foreColor: '#ffffff' },
];
}
export function getEvents() {
return [
{
id: 1,
subject: 'Sprint Planning',
start: createDate(11, 9),
end: createDate(11, 10, 30),
teamId: 'engineering',
},
{ id: 2, subject: 'Roadmap Review', start: createDate(11, 11), end: createDate(11, 12), teamId: 'product' },
{
id: 3,
subject: 'Campaign Kickoff',
start: createDate(11, 14),
end: createDate(11, 15, 30),
teamId: 'marketing',
},
{ id: 4, subject: 'Design Critique', start: createDate(12, 10), end: createDate(12, 11, 30), teamId: 'design' },
{ id: 5, subject: 'Customer Interview', start: createDate(12, 13), end: createDate(12, 14), teamId: 'product' },
{
id: 6,
subject: 'API Design Review',
start: createDate(13, 9),
end: createDate(13, 10, 30),
teamId: 'engineering',
},
{ id: 7, subject: 'Launch Assets', start: createDate(13, 11), end: createDate(13, 12, 30), teamId: 'design' },
{ id: 8, subject: 'Partner Briefing', start: createDate(13, 14), end: createDate(13, 15), teamId: 'marketing' },
{
id: 9,
subject: 'Release Readiness',
start: createDate(14, 9, 30),
end: createDate(14, 11),
teamId: 'engineering',
},
{
id: 10,
subject: 'Content Review',
start: createDate(14, 13),
end: createDate(14, 14, 30),
teamId: 'marketing',
},
{ id: 11, subject: 'Usability Testing', start: createDate(15, 10), end: createDate(15, 12), teamId: 'design' },
{ id: 12, subject: 'Weekly Wrap-up', start: createDate(15, 15), end: createDate(15, 16), teamId: 'product' },
];
}
body {
margin: 0;
user-select: none;
}
.container-fluid {
box-sizing: border-box;
margin: 0;
padding: 5px;
}
.view-description {
margin-bottom: 6px;
padding: 6px 10px;
border: 1px solid #dbe2ea;
background: #f8fafc;
color: #526170;
font-size: 13px;
line-height: 1.4;
}
.view-description strong {
color: #334155;
}
#theScheduler {
height: calc(100vh - 48px);
min-height: 520px;
}
@media (max-width: 760px) {
#theScheduler {
height: 720px;
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);
