Overview
DevExtreme HTML5 JavaScript Scheduler is a versatile scheduling component for Vue. Its main features include appointment editing, time zones support, vertical and horizontal orientation, and many more. You can use Vue syntax and techniques to instantiate and configure the Scheduler or handle its events. In addition, the component supports prop validation and templates that use named slots. Find out more about DevExtreme Vue components on GitHub.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
<template>
<dx-scheduler
:data-source="dataSource"
:current-date="currentDate"
:views="views"
:groups="groups"
:height="600"
:show-all-day-panel="true"
:first-day-of-week="1"
:start-day-hour="8"
:end-day-hour="18"
current-view="month"
data-cell-template="dataCellTemplate"
resource-cell-template="resourceCellTemplate"
>
<dx-resource
:data-source="employees"
:allow-multiple="false"
label="Employee"
field-expr="employeeID"
/>
<resource-cell
slot="resourceCellTemplate"
slot-scope="{ data: employee }"
:employee="employee"
/>
<data-cell
slot="dataCellTemplate"
slot-scope="{ data: cellData }"
:cell-data="cellData"
/>
</dx-scheduler>
</template>
<script>
import { DxScheduler, DxResource } from 'devextreme-vue/scheduler';
import { employees, data } from './data.js';
import DataCell from './DataCell.vue';
import ResourceCell from './ResourceCell.vue';
export default {
components: {
DxScheduler,
DxResource,
DataCell,
ResourceCell
},
data() {
return {
groups: ['employeeID'],
views: ['month'],
currentDate: new Date(2016, 7, 2, 11, 30),
employees,
dataSource: data
};
}
};
</script>
<style>
.dx-scheduler-date-table-other-month.dx-scheduler-date-table-cell {
opacity: 1;
color: rgba(0, 0, 0, 0.3);
}
.dx-template-wrapper {
position: relative;
height: 100%;
}
</style>
<template>
<div
:class="markWeekEnd(cellData)"
>
<div :class="markTraining(cellData)">
{{ cellData.text }}
</div>
</div>
</template>
<script>
export default {
props: {
cellData: {
type: Object,
default: () => {}
}
},
methods: {
markWeekEnd(cellData) {
function isWeekEnd(date) {
const day = date.getDay();
return day === 0 || day === 6;
}
const classObject = {};
classObject[`employee-${cellData.groups.employeeID}`] = true;
classObject[`employee-weekend-${cellData.groups.employeeID}`] = isWeekEnd(cellData.startDate);
return classObject;
},
markTraining(cellData) {
const classObject = {
'day-cell': true
};
classObject[this.getCurrentTraining(cellData.startDate.getDate(), cellData.groups.employeeID)] = true;
return classObject;
},
getCurrentTraining(date, employeeID) {
var result = (date + employeeID) % 3,
currentTraining = `training-background-${result}`;
return currentTraining;
}
}
};
</script>
<style>
.day-cell {
height: 100%;
background-position: center center;
background-repeat: no-repeat;
}
.employee-1 {
background-color: rgba(86, 202, 133, 0.1);
}
.employee-2 {
background-color: rgba(255, 151, 71, 0.1);
}
.employee-weekend-1 {
background-color: rgba(86, 202, 133, 0.2);
}
.employee-weekend-2 {
background-color: rgba(255, 151, 71, 0.2);
}
.training-background-0 {
background-image: url("../../../../images/gym/icon-abs.png");
}
.training-background-1 {
background-image: url("../../../../images/gym/icon-step.png");
}
.training-background-2 {
background-image: url("../../../../images/gym/icon-fitball.png");
}
</style>
<template>
<div>
<div
:style="'background:' + employee.color"
class="name"
>
<h2>{{ employee.text }}</h2>
</div>
<div class="avatar">
<img :src="employee.data.avatar">
</div>
<div
:style="'color:' + employee.color"
class="info"
>
Age: {{ employee.data.age }}
<br>
<b>{{ employee.data.discipline }}</b>
</div>
</div>
</template>
<script>
export default {
props: {
employee: {
type: Object,
default: () => {}
}
}
};
</script>
<style>
.avatar {
width: 155px;
float: left;
overflow: hidden;
position: relative;
height: 125px;
}
.name {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.name h2 {
color: #fff;
text-align: left;
padding: 0 0 5px 175px;
margin: 0;
}
.dx-theme-material .name h2 {
font-size: 28px;
}
.info {
width: auto;
text-align: left;
height: 100%;
font-size: 11pt;
font-weight: normal;
padding: 25px 20px;
color: #707070;
}
.dx-color-scheme-contrast .info {
color: #FFF;
}
</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.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.4/css/dx.light.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>
export const employees = [{
text : 'John Heart',
id: 1,
color: '#56ca85',
avatar: '../../../../images/gym/coach-man.png',
age: 27,
discipline: 'ABS, Fitball, StepFit'
}, {
text : 'Sandra Johnson',
id: 2,
color: '#ff9747',
avatar: '../../../../images/gym/coach-woman.png',
age: 25,
discipline: 'ABS, Fitball, StepFit'
}];
export const data = [{
text: 'Helen',
employeeID: 2,
startDate: new Date(2016, 7, 2, 9, 30),
endDate: new Date(2016, 7, 2, 11, 30)
}, {
text: 'Helen',
employeeID: 2,
startDate: new Date(2016, 7, 11, 9, 30),
endDate: new Date(2016, 7, 12, 11, 30)
}, {
text: 'Alex',
employeeID: 1,
startDate: new Date(2016, 7, 3, 9, 30),
endDate: new Date(2016, 7, 3, 11, 30)
}, {
text: 'Alex',
employeeID: 1,
startDate: new Date(2016, 7, 12, 12, 0),
endDate: new Date(2016, 7, 12, 13, 0)
}, {
text: 'Alex',
employeeID: 2,
startDate: new Date(2016, 7, 17, 9, 30),
endDate: new Date(2016, 7, 17, 11, 30)
}, {
text: 'Stan',
employeeID: 1,
startDate: new Date(2016, 7, 8, 9, 30),
endDate: new Date(2016, 7, 8, 11, 30)
}, {
text: 'Stan',
employeeID: 1,
startDate: new Date(2016, 7, 29, 9, 30),
endDate: new Date(2016, 7, 29, 11, 30)
}, {
text: 'Stan',
employeeID: 1,
startDate: new Date(2016, 7, 31, 9, 30),
endDate: new Date(2016, 7, 31, 11, 30)
},
{
text: 'Rachel',
employeeID: 2,
startDate: new Date(2016, 7, 5, 9, 30),
endDate: new Date(2016, 7, 5, 11, 30)
}, {
text: 'Rachel',
employeeID: 2,
startDate: new Date(2016, 7, 8, 9, 30),
endDate: new Date(2016, 7, 8, 11, 30)
}, {
text: 'Rachel',
employeeID: 1,
startDate: new Date(2016, 7, 22, 9, 30),
endDate: new Date(2016, 7, 22, 11, 30)
}, {
text: 'Kelly',
employeeID: 2,
startDate: new Date(2016, 7, 16, 9, 30),
endDate: new Date(2016, 7, 16, 11, 30)
}, {
text: 'Kelly',
employeeID: 2,
startDate: new Date(2016, 7, 30, 9, 30),
endDate: new Date(2016, 7, 30, 11, 30)
}];
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: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.6/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
}
});