Add Calendar to Dashboard (#227)

Hi!, The calendar was supported using
element-ui and vue.js
pull/3759/head
elsiosanchez 2020-01-20 16:04:57 -04:00 committed by Yamel Senih
parent 8425f1c965
commit 3af4d67678
5 changed files with 43 additions and 2 deletions

View File

@ -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",

View File

@ -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>

View File

@ -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
} }

View File

@ -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?',

View File

@ -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',