vcalendar combined multiple calendar

cobined-calendar.vue

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