Calendar Control

Theme:

The Calendar control displays a one-month calendar by default. It allows users to select any date by day, month or year. The selectionMode can switch between Day or Month by clicking the "MM, YYYY" in the upper left.

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'; document.readyState === 'complete' ? init() : window.onload = init; function init() { // the calendar let theCalendar = new input.Calendar('#theCalendar', { valueChanged: () => showCurrentDate() }); // show the currently selected date function showCurrentDate() { let el = document.querySelector('#theCalendarOutput'); el.textContent = wijmo.Globalize.format(theCalendar.value, 'D'); } showCurrentDate(); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Calendar Overview</title> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <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> .wj-calendar { width: 28em; } body { margin-bottom: 36px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import { Component, enableProdMode, NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjInputModule } from '@grapecity/wijmo.angular2.input'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { } // @NgModule({ imports: [WjInputModule, BrowserModule], declarations: [AppComponent], 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 Overview</title> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script>  <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> </wj-calendar> <div> The current date is <b>{{ theCalendar.value | date:'fullDate'}}</b>. </div> </div> .wj-calendar { width: 28em; } body { margin-bottom: 36px; } <template> <div class="container-fluid"> <wj-calendar :initialized="initCalendar"> </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'; let App = Vue.extend({ name: 'app', data: function () { return { theCalendar: {} } }, methods: { initCalendar: function(calendar){ this.theCalendar = calendar; } }, 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 { width: 28em; } 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 Overview</title> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <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> 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'; class App extends React.Component { constructor(props) { super(props); this.state = { value: null }; } render() { return <div className="container-fluid"> <wjInput.Calendar initialized={this._initCalendar.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 }); } _onValueChanged(sender) { this.setState({ value: sender.value }); } _formatDate(time) { return wijmo.Globalize.format(time, 'D'); } } 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">  <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 { width: 28em; } body { margin-bottom: 36px; }