DevExtreme jQuery - Overview
The Calendar is a widget 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 option. For example, numbers remain numbers until you pass a string to the value option.
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 option.
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;