Last active
March 30, 2018 08:01
-
-
Save EricMcRay/c5418a4d854b2b84be6a2cda5acabdf1 to your computer and use it in GitHub Desktop.
vcalendar combined multiple calendar
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script lang="ts"> | |
| import { Vue, Component, Prop, Emit, Watch } from 'vue-property-decorator'; | |
| import moment from 'moment'; | |
| import { CreateElement } from 'vue/types/vue'; | |
| type Page = { | |
| month: number; | |
| year: number; | |
| }; | |
| const today = moment(); | |
| const currentPage: Page = { month: today.month() + 1, year: today.year() }; | |
| @Component | |
| export default class extends Vue { | |
| calendars = {}; | |
| @Prop({ default: 1 }) | |
| wide: number; | |
| @Prop({ default: () => currentPage }) | |
| fromPage: Page; | |
| fromPage_: Page = currentPage; | |
| paddedPage(pad: number) { | |
| const { month, year } = this.fromPage_; | |
| const nextDate = moment() | |
| .month(month - 1) | |
| .year(year) | |
| .add(pad - 1, 'months'); | |
| const fromPage = { month: nextDate.month() + 1, year: nextDate.year() }; | |
| return fromPage; | |
| } | |
| onPageChange(pad: number) { | |
| return (newPage: Page) => { | |
| const { month, year } = newPage; | |
| const nextDate = moment(); | |
| nextDate | |
| .month(month - 1) | |
| .year(year) | |
| .subtract(pad - 1, 'months'); | |
| const fromPage = { month: nextDate.month() + 1, year: nextDate.year() }; | |
| this.updateFromPage(fromPage); | |
| }; | |
| } | |
| @Emit('update:fromPage') | |
| updateFromPage(fromPage: Page) { | |
| if (this.fromPage_.month === fromPage.month && this.fromPage_.year === fromPage.year) { | |
| return; | |
| } | |
| this.fromPage_ = fromPage; | |
| } | |
| @Watch('fromPage') | |
| onFromPageChanged(newVal: Page) { | |
| this.updateFromPage(newVal); | |
| } | |
| created() { | |
| this.updateFromPage(this.fromPage); | |
| } | |
| render(h: CreateElement) { | |
| const calendars = []; | |
| for (let i = 1; i <= this.wide; i++) { | |
| const calendar = h('v-calendar', { | |
| attrs: { | |
| ...this.$attrs | |
| }, | |
| props: { | |
| ...this.$attrs, | |
| fromPage: this.paddedPage(i) | |
| }, | |
| on: { | |
| ...this.$listeners, | |
| 'update:fromPage': this.onPageChange(i) | |
| }, | |
| scopedSlots: this.$scopedSlots | |
| }); | |
| calendars.push(calendar); | |
| } | |
| return h('div', {}, calendars); | |
| } | |
| } | |
| </script> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment