# Calendar Overview

Learn about Wijmo's Calendar component in this tutorial

## Content

The Calendar control displays a one-month calendar and allows users to select a date. Use the **value** property to get or set the currently selected date.

By default, user can select a day in the Calendar control. This default behavior can be changed by using the **selectionMode** property which determines whether user is allowed to select days, months, or no values at all. Use the **min** and **max** properties to restrict the range of dates that user can select.

![Calendar](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/input/calendar-overview.png)

##### HTML

```html
<input  id="theCalendar" />
```

##### Javascript

```javascript
import * as wijmo from '@mescius/wijmo';
import * as input from '@mescius/wijmo.input';

function init() {
    // the calendar
    let theCalendar = new input.Calendar('#theCalendar', {
        valueChanged: () => showCurrentDate()
    });    
}
```


You can use `keyActionTab` to modify the behavior of the ​**Tab** and ​**Shift+Tab**​ keys in the Calendar control, making it easier to navigate the Calendar using the keyboard.

```javascript
import * as input from '@mescius/wijmo.input';

new input.Calendar('#theCalendar', {
    keyActionTab: input.CalendarTabKeyAction.All // all functional elements can receive focus
});
```

![calendar-focus](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/calendar-focus.ffcd4c.gif?width=302)

To pre-select dates via keyboard, you can enable `focusMode`, which allows date pre-selection without altering the Calendar's value. In this mode, a hover effect will be applied to the dates.

```javascript
import * as input from '@mescius/wijmo.input';

new input.Calendar('#theCalendar', {
    focusMode: true // enable focus mode
});
```

![calendar-pre-select](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/calendar-pre-select.d4e471.gif?width=302)