Calendar Valid Dates

In some cases, not all dates in the range are valid. To handle these situations, the Calendar control has an itemValidator property. This sample uses this property to demonstrate a common use case. It prevents users from selecting dates on weekends and holidays.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wijmo from '@grapecity/wijmo'; import * as input from '@grapecity/wijmo.input'; import { getHolidays } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { let holidays = getHolidays(); // // the calendar let theCalendar = new input.Calendar('#theCalendar', { valueChanged: () => showCurrentDate(), formatItem: (sender, e) => { // apply styles to weekends and holidays let weekday = e.data.getDay(), holiday = getHoliday(e.data); // wijmo.toggleClass(e.item, 'date-weekend', weekday == 0 || weekday == 6); wijmo.toggleClass(e.item, 'date-holiday', holiday != null); e.item.title = holiday || ''; }, itemValidator: (date) => { return (date.getDay() % 6 != 0) && !getHoliday(date); } }); // // show the currently selected date function showCurrentDate() { let el = document.querySelector('#theCalendarOutput'); el.textContent = wijmo.Globalize.format(theCalendar.value, 'D'); } showCurrentDate(); // function getHoliday(date) { let day = date.getDate(), month = date.getMonth() + 1, holiday = holidays[month + '/' + day]; // if (!holiday) { let weekDay = date.getDay(), weekNum = Math.floor((day - 1) / 7) + 1; holiday = holidays[month + '/' + weekNum + '/' + weekDay]; } // return holiday; } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Calendar Validation</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <input id="theCalendar"> <div> The current date is <b><span id="theCalendarOutput"></span></b>. </div> </div> </body> </html> export function getHolidays() { return { '1/1': 'New Year\'s Day', '6/14': 'Flag Day', '7/4': 'Independence Day', '11/11': 'Veteran\'s Day', '12/25': 'Christmas Day', '1/3/1': 'Martin Luther King\'s Birthday', '2/3/1': 'Washington\'s Birthday', '5/3/6': 'Armed Forces Day', '9/1/1': 'Labor Day', '10/2/1': 'Columbus Day', '11/4/4': 'Thanksgiving Day' // fourth Thursday in November }; } .wj-calendar { max-width: 21em; } .wj-calendar .wj-header { color: white; background: #808080; } .wj-calendar .date-holiday:not(.wj-state-selected) { font-weight: bold; color: #008f22; background: #f0fff0; outline: 2pt solid #008f22; } .wj-calendar .date-weekend:not(.wj-state-selected) { background-color: #d8ffa6; } body { margin-bottom: 36px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wijmo from '@grapecity/wijmo'; import * as input from '@grapecity/wijmo.input'; // import { Component, enableProdMode, NgModule, Inject } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjInputModule } from '@grapecity/wijmo.angular2.input'; import { DataService } from './app.data'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { private _holidays: { [key: string]: string }; // constructor(@Inject(DataService) private dataService: DataService) { this._holidays = dataService.getHolidays(); } // formatItem(e: input.FormatItemEventArgs) { // apply styles to weekends and holidays let weekday = e.data.getDay(), holiday = this._getHoliday(e.data); // wijmo.toggleClass(e.item, 'date-weekend', weekday == 0 || weekday == 6); wijmo.toggleClass(e.item, 'date-holiday', holiday != null); e.item.title = holiday || ''; } // validator = (date: Date) => { return (date.getDay() % 6 != 0) && !this._getHoliday(date); } // // gets the holiday for a given date private _getHoliday(date: Date) { let day = date.getDate(), month = date.getMonth() + 1, holiday = this._holidays[month + '/' + day]; // if (!holiday) { let weekDay = date.getDay(), weekNum = Math.floor((day - 1) / 7) + 1; holiday = this._holidays[month + '/' + weekNum + '/' + weekDay]; } // return holiday; } } // @NgModule({ imports: [WjInputModule, BrowserModule], declarations: [AppComponent], providers: [DataService], bootstrap: [AppComponent] }) export class AppModule { } // enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Calendar Validation</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <wj-calendar #theCalendar (formatItem)="formatItem($event)" [itemValidator]="validator"> </wj-calendar> <div> The current date is <b>{{ theCalendar.value | date:'fullDate'}}</b>. </div> </div> import { Injectable } from '@angular/core'; // @Injectable() export class DataService { getHolidays() { return { '1/1': 'New Year\'s Day', '6/14': 'Flag Day', '7/4': 'Independence Day', '11/11': 'Veteran\'s Day', '12/25': 'Christmas Day', '1/3/1': 'Martin Luther King\'s Birthday', // third Monday in January '2/3/1': 'Washington\'s Birthday', // third Monday in February '5/3/6': 'Armed Forces Day', // third Saturday in May '9/1/1': 'Labor Day', // first Monday in September '10/2/1': 'Columbus Day', // second Monday in October '11/4/4': 'Thanksgiving Day' // fourth Thursday in November }; } } .wj-calendar { max-width: 21em; } .wj-calendar .wj-header { color: white; background: #808080; } .wj-calendar .date-holiday:not(.wj-state-selected) { font-weight: bold; color: #008f22; background: #f0fff0; outline: 2pt solid #008f22; } .wj-calendar .date-weekend:not(.wj-state-selected) { background-color: #d8ffa6; } body { margin-bottom: 36px; } <template> <div class="container-fluid"> <wj-calendar :initialized="initCalendar" :formatItem="formatItem" :itemValidator="validator"> </wj-calendar> <div> The current date is <b>{{ theCalendar.value | formatDate }}</b>. </div> </div> </template> <script> import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import Vue from 'vue'; import '@grapecity/wijmo.vue2.core'; import '@grapecity/wijmo.vue2.input'; import { getHolidays } from './data' let App = Vue.extend({ name: 'app', data: function () { return { theCalendar: {}, holidays: getHolidays() } }, methods: { initCalendar: function(calendar){ this.theCalendar = calendar; }, formatItem: function(s,e) { // apply styles to weekends and holidays let weekday = e.data.getDay(), holiday = this._getHoliday(e.data); wijmo.toggleClass(e.item, 'date-weekend', weekday == 0 || weekday == 6); wijmo.toggleClass(e.item, 'date-holiday', holiday != null); e.item.title = holiday || ''; }, validator: function(date) { return (date.getDay() % 6 != 0) && !this._getHoliday(date); }, // gets the holiday for a given date _getHoliday: function(date) { let day = date.getDate(), month = date.getMonth() + 1, holiday = this.holidays[month + '/' + day]; // if (!holiday) { let weekDay = date.getDay(), weekNum = Math.floor((day - 1) / 7) + 1; holiday = this.holidays[month + '/' + weekNum + '/' + weekDay]; } // return holiday; } }, filters: { formatDate: function(time) { return wijmo.Globalize.format(time, 'D'); } } }) let vm = new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> .container-fluid .wj-calendar { max-width: 21em; } .container-fluid .wj-calendar .wj-header { color: white; background: #808080; } .container-fluid .wj-calendar .date-holiday:not(.wj-state-selected) { font-weight: bold; color: #008f22; background: #f0fff0; outline: 2pt solid #008f22; } .container-fluid .wj-calendar .date-weekend:not(.wj-state-selected) { background-color: #d8ffa6; } body { margin-bottom: 36px; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Calendar Validation</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); </script> </head> <body> <div id="app"></div> </body> </html> export function getHolidays() { return { '1/1': 'New Year\'s Day', '6/14': 'Flag Day', '7/4': 'Independence Day', '11/11': 'Veteran\'s Day', '12/25': 'Christmas Day', '1/3/1': 'Martin Luther King\'s Birthday', '2/3/1': 'Washington\'s Birthday', '5/3/6': 'Armed Forces Day', '9/1/1': 'Labor Day', '10/2/1': 'Columbus Day', '11/4/4': 'Thanksgiving Day' // fourth Thursday in November }; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './app.css'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; import * as wijmo from '@grapecity/wijmo'; import * as wjInput from '@grapecity/wijmo.react.input'; import { getHolidays } from './data'; class App extends React.Component { constructor(props) { super(props); this._holidays = getHolidays(); this.state = { value: null }; } render() { return <div className="container-fluid"> <wjInput.Calendar initialized={this._initCalendar.bind(this)} formatItem={this._formatItem.bind(this)} itemValidator={this._validator.bind(this)} valueChanged={this._onValueChanged.bind(this)}> </wjInput.Calendar> <div> The current date is <b>{this._formatDate(this.state.value)}</b>. </div> </div>; } _initCalendar(sender) { this.setState({ value: sender.value }); } _formatItem(sender, e) { // apply styles to weekends and holidays let weekday = e.data.getDay(), holiday = this._getHoliday(e.data); wijmo.toggleClass(e.item, 'date-weekend', weekday == 0 || weekday == 6); wijmo.toggleClass(e.item, 'date-holiday', holiday != null); e.item.title = holiday || ''; } _validator(date) { return (date.getDay() % 6 != 0) && !this._getHoliday(date); } // gets the holiday for a given date _getHoliday(date) { let day = date.getDate(), month = date.getMonth() + 1, holiday = this._holidays[month + '/' + day]; // if (!holiday) { let weekDay = date.getDay(), weekNum = Math.floor((day - 1) / 7) + 1; holiday = this._holidays[month + '/' + weekNum + '/' + weekDay]; } // return holiday; } _formatDate(time) { return wijmo.Globalize.format(time, 'D'); } _onValueChanged(sender) { this.setState({ value: sender.value }); } } ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AutoComplete</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html> .wj-calendar { max-width: 21em; } .wj-calendar .wj-header { color: white; background: #808080; } .wj-calendar .date-holiday:not(.wj-state-selected) { font-weight: bold; color: #008f22; background: #f0fff0; outline: 2pt solid #008f22; } .wj-calendar .date-weekend:not(.wj-state-selected) { background-color: #d8ffa6; } body { margin-bottom: 36px; } export function getHolidays() { return { '1/1': 'New Year\'s Day', '6/14': 'Flag Day', '7/4': 'Independence Day', '11/11': 'Veteran\'s Day', '12/25': 'Christmas Day', '1/3/1': 'Martin Luther King\'s Birthday', '2/3/1': 'Washington\'s Birthday', '5/3/6': 'Armed Forces Day', '9/1/1': 'Labor Day', '10/2/1': 'Columbus Day', '11/4/4': 'Thanksgiving Day' // fourth Thursday in November }; }