Your search did not match any results.
Calendar

Calendar

Documentation

The Calendar is a widget that displays a calendar and allows an end user to select the required date within a specified date range.

Copy to CodeSandBox
Apply
Reset
<template> <div id="calendar-demo"> <div class="widget-container"> <dx-calendar id="calendar-container" v-model="currentValue" :min="minDateValue" :max="maxDateValue" :disabled-dates="disabledDates" :first-day-of-week="firstDay" :disabled="disabled" :zoom-level="zoomLevel" :cell-template="cellTemplate" > <template #custom="{ data: cell }"> <span :class="getCellCssClass(cell.date)"> {{ cell.text }} </span> </template> </dx-calendar> </div> <div class="options"> <div class="caption">Options</div> <div class="option"> <dx-check-box :value="false" text="Specified min value" @value-changed="setMinDate" /> </div> <div class="option"> <dx-check-box :value="false" text="Specified max value" @value-changed="setMaxDate" /> </div> <div class="option"> <dx-check-box :value="false" text="Disable weekend" @value-changed="disableWeekend" /> </div> <div class="option"> <dx-check-box :value="false" text="Monday as the first day of a week" @value-changed="setFirstDay" /> </div> <div class="option"> <dx-check-box :value="false" text="Use the Custom Cell Template" @value-changed="useCellTemplate" /> </div> <div class="option"> <dx-check-box v-model="disabled" text="Disabled" /> </div> <div class="option"> <span>Zoom level</span> <dx-select-box id="zoom-level" :data-source="zoomLevels" v-model="zoomLevel" /> </div> <div class="option"> <span>Selected date</span> <dx-date-box id="selected-date" v-model="currentValue" width="100%" /> </div> </div> </div> </template> <script> import { DxCheckBox, DxSelectBox, DxDateBox, DxCalendar } from 'devextreme-vue'; export default { components: { DxCheckBox, DxSelectBox, DxDateBox, DxCalendar }, data() { return { minDateValue: null, maxDateValue: null, disabledDates: null, firstDay: 0, currentValue: new Date(), zoomLevels: ['month', 'year', 'decade', 'century'], cellTemplate: 'cell', disabled: false, zoomLevel: 'month' }; }, methods: { isWeekend(date) { const day = date.getDay(); return day === 0 || day === 6; }, setMinDate(e) { if(e.value) { this.minDateValue = new Date((new Date).getTime() - 1000 * 60 * 60 * 24 * 3); } else { this.minDateValue = undefined; } }, setMaxDate(e) { if(e.value) { this.maxDateValue = new Date((new Date).getTime() + 1000 * 60 * 60 * 24 * 3); } else { this.maxDateValue = undefined; } }, disableWeekend(e) { if(e.value) { this.disabledDates = (data) => data.view === 'month' && this.isWeekend(data.date); } else { this.disabledDates = undefined; } }, setFirstDay(e) { if(e.value) { this.firstDay = 1; } else { this.firstDay = 0; } }, useCellTemplate(e) { if(e.value) { this.cellTemplate = 'custom'; } else { this.cellTemplate = 'cell'; } }, getCellCssClass(date) { let cssClass = ''; const holydays = [[1, 0], [4, 6], [25, 11]]; if(this.isWeekend(date)) { cssClass = 'weekend'; } holydays.forEach((item) => { if(date.getDate() === item[0] && date.getMonth() === item[1]) { cssClass = 'holyday'; return false; } }); return cssClass; } } }; </script> <style scoped> .widget-container { margin-right: 320px; } #calendar-container { margin: auto; } .dx-calendar-cell:not(.dx-calendar-other-month) .weekend, .dx-calendar-cell:not(.dx-calendar-other-month) .holyday { text-shadow: none; font-weight: bold; } .dx-calendar-cell:not(.dx-calendar-other-month) .weekend { color: #3030FF; } .dx-state-disabled.dx-calendar .dx-calendar-cell:not(.dx-calendar-other-month) .weekend { color: #8080FF; } .dx-calendar-cell:not(.dx-calendar-other-month) .holyday { color: #FF3030; } .dx-state-disabled.dx-calendar .dx-calendar-cell:not(.dx-calendar-other-month) .holyday { color: #FF8080; } .options { padding: 20px; background-color: rgba(191, 191, 191, 0.15); position: absolute; right: 0; top: 0; bottom: 0; width: 260px; } .caption { font-weight: 500; font-size: 18px; } .option { margin-top: 10px; } </style>
import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', components: { App }, template: '<App/>' });
<!DOCTYPE html> <html> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.7/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.7/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import('./index.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> <span v-if="false">Loading...</span> </div> </div> </body> </html>
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, map: { vue: 'npm:vue@2.6.3/dist/vue.esm.browser.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@latest/index.js', 'devextreme': 'npm:devextreme@19.1', 'devextreme-vue': 'npm:devextreme-vue@19.1', jszip: 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.7/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, meta: { '*.vue': { loader: 'vue-loader' } }, packages: { 'devextreme-vue': { main: 'index.js' }, 'devextreme': { defaultExtension: 'js' } }, babelOptions: { sourceMaps: false, stage0: true } });