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';
//
document.readyState === 'loading' ? document.addEventListener('DOMContentLoaded', init) : init();
function init() {
const visibleRangeInputs = Array.from(document.querySelectorAll('input[name="visibleRange"]'));
let selectedRangeKey = null;
const scheduler = 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: createDefinition(),
displayDate: getDisplayDate(),
workHours: [{ start: '09:00', end: '18:00' }],
toolbarViewItems: [],
});
const updateDefinition = () => {
const range = getVisibleRange(selectedRangeKey);
scheduler.definition = createDefinition(range && range[0] != null ? range[0] : 0, range && range[1] != null ? range[1] : 0);
};
visibleRangeInputs.forEach((input) => {
input.addEventListener('change', () => {
selectedRangeKey = input.value;
updateDefinition();
});
});
}
function getVisibleRange(key) {
const ranges = {
'visible-9-18': [9, 18],
'visible-8-20': [8, 20],
'visible-6-22': [6, 22],
'visible-6-12': [6, 12],
'visible-12-18': [12, 18],
'visible-0-24': [0, 24],
};
return key && ranges[key] ? ranges[key] : null;
}
function createDefinition(start = 0, end = 0) {
return {
key: 'visibleWeek',
rows: {
bindings: [
{
type: wjcScheduler.SchedulerAxisBindingType.Time,
unit: wjcScheduler.SchedulerTimeUnit.Hour,
visible: (args) => args.hour !== undefined &&
(start < end
? args.hour >= start && args.hour < end
: (args.hour >= 9 && args.hour < 12) || (args.hour >= 13 && args.hour < 18)),
},
],
},
columns: {
bindings: [
{
type: wjcScheduler.SchedulerAxisBindingType.Time,
unit: wjcScheduler.SchedulerTimeUnit.DayOfWeek,
visible: (args) => args.dayOfWeek !== undefined &&
args.dayOfWeek >= wjcScheduler.SchedulerDayOfWeek.Monday &&
args.dayOfWeek <= wjcScheduler.SchedulerDayOfWeek.Friday,
},
],
},
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 Visible Function</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="demo-toolbar">
<div class="demo-toolbar-header">
<strong id="visibleTimeLabel">Visible time</strong>
<span>Default: Monday-Friday, 09:00-12:00 and 13:00-18:00</span>
</div>
<div class="visible-range-options" role="radiogroup" aria-labelledby="visibleTimeLabel">
<label><input type="radio" name="visibleRange" value="visible-9-18"> Business hours (09:00-18:00)</label>
<label><input type="radio" name="visibleRange" value="visible-8-20"> Core hours (08:00-20:00)</label>
<label><input type="radio" name="visibleRange" value="visible-6-22"> Extended hours (06:00-22:00)</label>
<label><input type="radio" name="visibleRange" value="visible-6-12"> Morning hours (06:00-12:00)</label>
<label><input type="radio" name="visibleRange" value="visible-12-18"> Afternoon hours (12:00-18:00)</label>
<label><input type="radio" name="visibleRange" value="visible-0-24"> Full day (00:00-24:00)</label>
</div>
</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' },
];
}
html,
body {
height: 100%;
margin: 0;
}
body {
color: #1f2937;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: 15px;
user-select: none;
}
.container-fluid {
box-sizing: border-box;
display: flex;
flex-direction: column;
height: 100%;
margin: 0;
padding: 5px;
}
.demo-toolbar {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 6px;
padding: 10px 14px;
border: 1px solid #dbe2ea;
background: #f8fafc;
}
.demo-toolbar-header {
display: flex;
align-items: baseline;
justify-content: space-between;
width: 100%;
gap: 16px;
}
.demo-toolbar-header strong {
color: #111827;
font-size: 14px;
font-weight: 600;
white-space: nowrap;
}
.demo-toolbar-header span {
color: #64748b;
font-size: 12px;
line-height: 1.4;
text-align: right;
}
.visible-range-options {
display: flex;
width: 100%;
flex-wrap: wrap;
align-items: center;
gap: 6px 18px;
}
.visible-range-options label {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0;
color: #334155;
white-space: nowrap;
cursor: pointer;
}
.visible-range-options input {
margin: 0;
accent-color: #4f46e5;
}
#theScheduler {
flex: 1 1 auto;
width: 100%;
min-height: 520px;
}
@media (max-width: 760px) {
.container-fluid {
height: auto;
min-height: 100%;
}
.demo-toolbar {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.demo-toolbar-header {
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.demo-toolbar-header span {
text-align: left;
}
.visible-range-options {
gap: 8px 14px;
}
#theScheduler {
flex: none;
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);
