カレンダー:カスタム表示

これはSlackステータスページのWijmoバージョンです。いくつかのCalendarコントロールを表示し、重要なイベントが行われた日にアイコンを追加するためにformatItemイベントを使用します。プレーンCSSはカレンダーの外観をカスタマイズするために使用されます。

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}%</div>' + '</div>', { header: wijmo.Globalize.format(date, 'y'), 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:d}</div>' + '<div class="event">{eventMessage}</div>' + '</div>', { date: e.data, eventMessage: event ? event.msg : 'インシデント、停止、またはメンテナンスはありません。', 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"> メンテナンス</div> <div><img src="https://status.slack.com/img/v2/TableIncident.png"> インシデント</div> <div><img src="https://status.slack.com/img/v2/TableNotice.png"> 通知</div> <div><img src="https://status.slack.com/img/v2/TableOutage.png"> 停止</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 = ['接続性の問題', 'ISPから報告された問題', 'メッセージサーバーのオーバーフロー', 'セキュリティの警告', '電子メールの失敗', '電源の不安定性', '停電']; // 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);