double page calendar on xl display

This commit is contained in:
les 2020-01-15 23:17:38 +01:00
parent 7c1f1de53f
commit daebfe378b

View file

@ -2,8 +2,9 @@
#calendar #calendar
v-calendar( v-calendar(
title-position='left' title-position='left'
:locale='$i18n.locale'
is-dark is-dark
:columns="$screens({ default: 1, lg: 2 })"
:locale='$i18n.locale'
:attributes='attributes' :attributes='attributes'
:from-page.sync='page' :from-page.sync='page'
is-expanded is-expanded
@ -13,8 +14,8 @@
</template> </template>
<script> <script>
import { mapState, mapActions, mapGetters } from 'vuex' import { mapState, mapActions, mapGetters } from 'vuex'
import moment from 'dayjs' import moment from 'moment-timezone'
import { intersection, sample, take, get } from 'lodash' import { take, get } from 'lodash'
export default { export default {
name: 'Calendar', name: 'Calendar',
@ -73,10 +74,11 @@ export default {
attributes = attributes.concat(this.filteredEventsWithPast attributes = attributes.concat(this.filteredEventsWithPast
.filter(e => e.multidate) .filter(e => e.multidate)
.map(e => ({ key: e.id, .map(e => ({
key: e.id,
highlight: getColor(e), highlight: getColor(e),
dates: { dates: { start: new Date(e.start_datetime * 1000), end: new Date(e.end_datetime * 1000) }
start: new Date(e.start_datetime * 1000), end: new Date(e.end_datetime * 1000) } }))) })))
return attributes return attributes
} }
@ -85,15 +87,11 @@ export default {
</script> </script>
<style> <style>
#calendar {
margin: 0 auto;
max-width: 500px;
align-self: center;
}
.vc-opacity-0 { .vc-opacity-0 {
opacity: 0.2 !important; opacity: 0.3 !important;
} }
/* .vc-highlight { /* .vc-highlight {
color: red; color: red;
height: 22px !important; height: 22px !important;
@ -102,6 +100,6 @@ export default {
} */ } */
.past-event { .past-event {
opacity: 0.2; opacity: 0.3;
} }
</style> </style>