DevExtreme Vue - 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.
- <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>
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.
- <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>
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.