Add Calendar to Dashboard (#227)
Hi!, The calendar was supported using element-ui and vue.jspull/3759/head
parent
8425f1c965
commit
3af4d67678
|
@ -55,7 +55,7 @@
|
||||||
"driver.js": "0.9.5",
|
"driver.js": "0.9.5",
|
||||||
"dropzone": "5.5.1",
|
"dropzone": "5.5.1",
|
||||||
"echarts": "4.2.1",
|
"echarts": "4.2.1",
|
||||||
"element-ui": "2.7.0",
|
"element-ui": "2.13.0",
|
||||||
"file-saver": "2.0.1",
|
"file-saver": "2.0.1",
|
||||||
"fuse.js": "3.4.4",
|
"fuse.js": "3.4.4",
|
||||||
"js-cookie": "2.2.0",
|
"js-cookie": "2.2.0",
|
||||||
|
|
|
@ -0,0 +1,39 @@
|
||||||
|
<template>
|
||||||
|
<el-collapse v-model="activeCalendar" accordion>
|
||||||
|
<el-collapse-item name="calendar">
|
||||||
|
<template slot="title">
|
||||||
|
<i class="el-icon-date" style="margin-right: 4px;margin-left: 10px;" />
|
||||||
|
{{ $t('route.calendar') }}
|
||||||
|
</template>
|
||||||
|
<el-calendar>
|
||||||
|
<!-- Use 2.5 slot syntax. If you use Vue 2.6, please use new slot syntax-->
|
||||||
|
<template
|
||||||
|
slot="dateCell"
|
||||||
|
slot-scope="{date, data}"
|
||||||
|
>
|
||||||
|
<p :class="data.isSelected ? 'is-selected' : ''">
|
||||||
|
{{ data.day.split('-').slice(2).join('-') }} {{ data.isSelected ? '✔️' : '' }}
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
</el-calendar>
|
||||||
|
</el-collapse-item>
|
||||||
|
</el-collapse>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'Calendar',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
activeCalendar: 'calendar',
|
||||||
|
value: new Date()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.is-selected {
|
||||||
|
color: #1989FA;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -25,7 +25,7 @@ export default {
|
||||||
// load the component that is indicated in the attributes of received property
|
// load the component that is indicated in the attributes of received property
|
||||||
renderDashboard() {
|
renderDashboard() {
|
||||||
// TODO: Add support to this list of currently unsupported dashboards
|
// TODO: Add support to this list of currently unsupported dashboards
|
||||||
const unsupportedDashboards = ['activities', 'views', 'calendar', 'performance']
|
const unsupportedDashboards = ['activities', 'views', 'performance']
|
||||||
if (unsupportedDashboards.includes(this.metadata.fileName)) {
|
if (unsupportedDashboards.includes(this.metadata.fileName)) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
export default {
|
export default {
|
||||||
route: {
|
route: {
|
||||||
dashboard: 'Dashboard',
|
dashboard: 'Dashboard',
|
||||||
|
calendar: 'Calendar',
|
||||||
documentation: 'Documentation',
|
documentation: 'Documentation',
|
||||||
guide: 'Guide',
|
guide: 'Guide',
|
||||||
forgotPassword: 'Forgot Password?',
|
forgotPassword: 'Forgot Password?',
|
||||||
|
|
|
@ -2,6 +2,7 @@ export default {
|
||||||
route: {
|
route: {
|
||||||
dashboard: 'Panel de control',
|
dashboard: 'Panel de control',
|
||||||
documentation: 'Documentación',
|
documentation: 'Documentación',
|
||||||
|
calendar: 'Calendario',
|
||||||
forgotPassword: '¿Olvidó su Contraseña?',
|
forgotPassword: '¿Olvidó su Contraseña?',
|
||||||
userEnrollment: 'Registrarse',
|
userEnrollment: 'Registrarse',
|
||||||
guide: 'Guía',
|
guide: 'Guía',
|
||||||
|
|
Loading…
Reference in New Issue