JavaScript/jQuery Calendar - Overview
The Calendar is a UI component that displays a calendar and allows an end user to select the required date within a specified date range.
The following code adds a simple Calendar to your page.
jQuery
<div id="calendarContainer"></div>
$(function() { $("#calendarContainer").dxCalendar({ value: new Date() }); });
Angular
<dx-calendar [(value)]="date"> </dx-calendar>
import { DxCalendarModule } from "devextreme-angular"; // ... export class AppComponent { date: Date = new Date() } @NgModule({ imports: [ // ... DxCalendarModule ], // ... })
Vue
<template> <DxCalendar :value="date" /> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import DxCalendar from 'devextreme-vue/calendar'; export default { components: { DxCalendar }, data() { return { date: new Date() } } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import Calendar from 'devextreme-react/calendar'; const date = new Date(); class App extends React.Component { render() { return ( <Calendar defaultValue={date} /> ); } } export default App;
The Calendar accepts values of the following formats: dates, numeric values specifying the number of milliseconds since January 1, 1970, 00:00:00, and strings that match the following patterns: 'yyyy-MM-dd'
, 'yyyy-MM-ddTHH:mm:ss'
, 'yyyy-MM-ddTHH:mm:ssZ'
, or 'yyyy-MM-ddTHH:mm:ssx'
. Note that in code, the format stays the same until a value of a different format is assigned to the value property. For example, numbers remain numbers until you pass a string to the value property.
To specify which day should be considered the beginning of the week, pass its index (0 - for Sunday, 1 - for Monday, and so on) to the firstDayOfWeek property.
jQuery
$(function() { $("#calendarContainer").dxCalendar({ firstDayOfWeek: 1 }); });
Angular
<dx-calendar ... [firstDayOfWeek]="1"> </dx-calendar>
import { DxCalendarModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxCalendarModule ], // ... })
Vue
<template> <DxCalendar :first-day-of-week="1" /> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import DxCalendar from 'devextreme-vue/calendar'; export default { components: { DxCalendar } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import Calendar from 'devextreme-react/calendar'; class App extends React.Component { render() { return ( <Calendar firstDayOfWeek={1} /> ); } } export default App;
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.