import 'bootstrap.css';
import '@mescius/wijmo.styles/wijmo.css';
import './styles.css';
//
import * as wijmo from '@mescius/wijmo';
import * as input from '@mescius/wijmo.input';
//
import { getEvents } from './data';
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
// create the events to show on our calendar
let events = getEvents();
// create the calendar
let calendar = document.getElementById('calendar'), tooltip = new wijmo.Tooltip();
for (let i = 0, start = new Date(); i < 12; i++) {
let month = createMonthControl(wijmo.DateTime.addMonths(start, -i));
calendar.appendChild(month);
}
// create a month
function createMonthControl(date) {
// create the calendar
let month = wijmo.createElement('<div class="month"></div>'), cal = new input.Calendar(month, {
showHeader: false,
selectionMode: 'None',
value: date,
formatItem: formatDayCell
});
cal.refresh();
// disable changing months with the mouse wheel
cal.removeEventListener(cal.hostElement, 'wheel');
// add a custom header element
let fmt = wijmo.format('<div class="month-header">' +
'<div class="month-title">{header}</div>' +
'<div class="month-status">{uptime}% uptime</div>' +
'</div>', {
header: wijmo.Globalize.format(date, 'MMMM yyyy'),
uptime: getUptime()
});
let newHeader = wijmo.createElement(fmt);
let hdr = cal.hostElement.querySelector('.wj-calendar-header');
hdr.parentElement.insertBefore(newHeader, hdr);
// show only first letter of the week days
let cells = cal.hostElement.querySelectorAll('table tr.wj-header td');
for (let i = 0; i < 7; i++) {
cells[i].textContent = cells[i].textContent.substr(0, 1);
}
return month;
}
// format the calendar cells to show events
function formatDayCell(sender, e) {
let event = getEvent(e.data), html = `<div>${e.data.getDate()}</div>`;
html += event
? `<img src="https://status.slack.com/img/v2/Table${event.type}.png"/>`
: '<img/>';
// format cell content
e.item.innerHTML = html;
// add tooltip to cell
let tip = wijmo.format('<div class="event-tip event-type-{eventType}">' +
'<div>{date:MMM d, yyyy}</div>' +
'<div class="event">{eventMessage}</div>' +
'</div>', {
date: e.data,
eventMessage: event ? event.msg : 'No incidents, outages, or maintenance.',
eventType: event ? event.type.toLocaleLowerCase() : 'none'
});
tooltip.setTooltip(e.item, tip);
}
function getUptime() {
let tm = [100, 99.75, 99.998, 99.98, 99.996, 99.93];
return tm[Math.floor(Math.random() * tm.length)];
}
function getEvent(date) {
for (let i = 0; i < events.length; i++) {
if (wijmo.DateTime.sameDate(events[i].date, date)) {
return events[i];
}
}
return null;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MESCIUS Wijmo Calendar Customization</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SystemJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.21.5/system.src.js" integrity="sha512-skZbMyvYdNoZfLmiGn5ii6KmklM82rYX2uWctBhzaXPxJgiv4XBwJnFGr5k8s+6tE1pcR1nuTKghozJHyzMcoA==" crossorigin="anonymous"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app');
</script>
</head>
<body>
<div class="container-fluid">
<div class="legend">
<div><img src="https://status.slack.com/img/v2/TableMaintenance.png"> Maintenance</div>
<div><img src="https://status.slack.com/img/v2/TableIncident.png"> Incident</div>
<div><img src="https://status.slack.com/img/v2/TableNotice.png"> Notice</div>
<div><img src="https://status.slack.com/img/v2/TableOutage.png"> Outage</div>
</div>
<div id="calendar" class="calendar">
</div>
</div>
</body>
</html>
import { DateTime } from '@mescius/wijmo';
//
// generate some events between now and a year ago
export function getEvents() {
let arr = [], types = ['Maintenance', 'Incident', 'Notice', 'Outage'], messages = ['Connectivity Issues', 'ISP Reported Problem', 'Message Server Overflow', 'Security Alert', 'Email Failure', 'Power Instability', 'Power Outage'];
//
for (let i = 0; i < 120; i++) {
let dt = DateTime.addDays(new Date(), -Math.round(Math.random() * 365));
arr.push({
id: i,
date: dt,
type: types[Math.floor(Math.random() * types.length)],
msg: messages[Math.floor(Math.random() * messages.length)]
});
}
//
return arr;
}
@media (min-width: 1200px) {
.container-fluid {
width: 1250px;
}
}
body {
background-color: #f5f5f5;
font-size: 16px;
font-family: -apple-system-font, 'Segoe UI', 'Roboto', sans-serif;
padding: 0 0 10px;
}
.legend {
display: flex;
justify-content: flex-end;
}
.legend div {
margin-left: 24px;
}
.calendar {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 32px;
padding-bottom: 90px;
}
.calendar .wj-calendar {
width: 390px;
padding: 12px 12px 36px;
background-color: white;
margin: 8px;
}
.calendar .wj-calendar .wj-content {
border: none;
}
.calendar .wj-calendar .wj-day-today {
font-weight: normal;
}
.calendar .wj-calendar .wj-state-selected {
background: inherit;
color: inherit;
}
.calendar .wj-calendar tr:not(.wj-header) td:hover {
background: #eee;
}
.calendar .wj-calendar .month-header {
display: flex;
justify-content: space-between;
align-items: baseline;
font-weight: bold;
margin-bottom: 20px;
}
.calendar .wj-calendar .month-header .month-title{
font-size: 150%;
}
.calendar .wj-calendar img {
height: 12px;
margin-top: -12px;
}
.calendar .wj-calendar-month .wj-header {
font-size: 100%;
background-color: inherit;
font-weight: normal;
}
.calendar .wj-calendar .wj-day-othermonth {
visibility: hidden;
}
.wj-tooltip {
background-color: #fff;
padding: 0;
border: 1px solid rgba(0,0,0,0.1);
border-radius: 0;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
box-sizing: border-box;
width: 450px;
}
.wj-tooltip .event {
margin-top: 12px;
font-weight: bold;
}
.wj-tooltip .event-tip {
border-top: 4px solid green;
padding: 24px;
}
.wj-tooltip .event-tip.event-type-maintenance {
border-top-color: #3f46ad;
}
.wj-tooltip .event-tip.event-type-incident {
border-top-color: #eeb522;
}
.wj-tooltip .event-tip.event-type-notice {
border-top-color: #ff944b;
}
.wj-tooltip .event-tip.event-type-outage {
border-top-color: #eb4d5c;
}
(function (global) {
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
meta: {
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'jszip': 'npm:jszip/dist/jszip.js',
'@mescius/wijmo': 'npm:@mescius/wijmo/index.js',
'@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js',
'@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles',
'@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures',
'@mescius/wijmo.chart': 'npm:@mescius/wijmo.chart/index.js',
'@mescius/wijmo.chart.analytics': 'npm:@mescius/wijmo.chart.analytics/index.js',
'@mescius/wijmo.chart.animation': 'npm:@mescius/wijmo.chart.animation/index.js',
'@mescius/wijmo.chart.annotation': 'npm:@mescius/wijmo.chart.annotation/index.js',
'@mescius/wijmo.chart.finance': 'npm:@mescius/wijmo.chart.finance/index.js',
'@mescius/wijmo.chart.finance.analytics': 'npm:@mescius/wijmo.chart.finance.analytics/index.js',
'@mescius/wijmo.chart.hierarchical': 'npm:@mescius/wijmo.chart.hierarchical/index.js',
'@mescius/wijmo.chart.interaction': 'npm:@mescius/wijmo.chart.interaction/index.js',
'@mescius/wijmo.chart.radar': 'npm:@mescius/wijmo.chart.radar/index.js',
'@mescius/wijmo.chart.render': 'npm:@mescius/wijmo.chart.render/index.js',
'@mescius/wijmo.chart.webgl': 'npm:@mescius/wijmo.chart.webgl/index.js',
'@mescius/wijmo.chart.map': 'npm:@mescius/wijmo.chart.map/index.js',
'@mescius/wijmo.gauge': 'npm:@mescius/wijmo.gauge/index.js',
'@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js',
'@mescius/wijmo.grid.detail': 'npm:@mescius/wijmo.grid.detail/index.js',
'@mescius/wijmo.grid.filter': 'npm:@mescius/wijmo.grid.filter/index.js',
'@mescius/wijmo.grid.search': 'npm:@mescius/wijmo.grid.search/index.js',
'@mescius/wijmo.grid.grouppanel': 'npm:@mescius/wijmo.grid.grouppanel/index.js',
'@mescius/wijmo.grid.multirow': 'npm:@mescius/wijmo.grid.multirow/index.js',
'@mescius/wijmo.grid.transposed': 'npm:@mescius/wijmo.grid.transposed/index.js',
'@mescius/wijmo.grid.transposedmultirow': 'npm:@mescius/wijmo.grid.transposedmultirow/index.js',
'@mescius/wijmo.grid.pdf': 'npm:@mescius/wijmo.grid.pdf/index.js',
'@mescius/wijmo.grid.sheet': 'npm:@mescius/wijmo.grid.sheet/index.js',
'@mescius/wijmo.grid.xlsx': 'npm:@mescius/wijmo.grid.xlsx/index.js',
'@mescius/wijmo.grid.selector': 'npm:@mescius/wijmo.grid.selector/index.js',
'@mescius/wijmo.grid.cellmaker': 'npm:@mescius/wijmo.grid.cellmaker/index.js',
'@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js',
'@mescius/wijmo.odata': 'npm:@mescius/wijmo.odata/index.js',
'@mescius/wijmo.olap': 'npm:@mescius/wijmo.olap/index.js',
'@mescius/wijmo.rest': 'npm:@mescius/wijmo.rest/index.js',
'@mescius/wijmo.pdf': 'npm:@mescius/wijmo.pdf/index.js',
'@mescius/wijmo.pdf.security': 'npm:@mescius/wijmo.pdf.security/index.js',
'@mescius/wijmo.viewer': 'npm:@mescius/wijmo.viewer/index.js',
'@mescius/wijmo.xlsx': 'npm:@mescius/wijmo.xlsx/index.js',
'@mescius/wijmo.undo': 'npm:@mescius/wijmo.undo/index.js',
'@mescius/wijmo.interop.grid': 'npm:@mescius/wijmo.interop.grid/index.js',
'@mescius/wijmo.touch': 'npm:@mescius/wijmo.touch/index.js',
'@mescius/wijmo.cloud': 'npm:@mescius/wijmo.cloud/index.js',
'@mescius/wijmo.barcode': 'npm:@mescius/wijmo.barcode/index.js',
'@mescius/wijmo.barcode.common': 'npm:@mescius/wijmo.barcode.common/index.js',
'@mescius/wijmo.barcode.composite': 'npm:@mescius/wijmo.barcode.composite/index.js',
'@mescius/wijmo.barcode.specialized': 'npm:@mescius/wijmo.barcode.specialized/index.js',
'jszip': 'npm:jszip/dist/jszip.js',
'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
})(this);
