calendar

mail@pastecode.io avatar
unknown
jsx
2 years ago
1.2 kB
2
Indexable
Never
@Component
	class CalendarExample extends VueComponent {
		interval: DateInterval = weekInterval

		/**
		 * Пример реализации простой логики выбора периода
		 */
		handleDayClick(day: Date) {
			if (this.interval.start) {
				if (this.interval.end) {
					this.interval.start = day
					this.interval.end = null
				} else {
					if (isBefore(day, this.interval.start)) {
						this.interval.end = this.interval.start
						this.interval.start = day
					} else {
						this.interval.end = day
					}
				}
			} else {
				if (!this.interval.end) {
					this.interval.start = day
				}
			}
		}

		isDisabled(day: Date) {
			if (this.interval.start && !this.interval.end) {
				return isBefore(addWeeks(this.interval.start, 1), day) || isAfter(this.interval.start, day)
			}

			return false
		}

		render() {
			return (
				<Calendar
					renderDay={(context) => {
						return (
							<CalendarDay
								key={context.day.toLocaleDateString()}
								whenDayClick={this.handleDayClick}
								context={context}
								isDisabled={this.isDisabled(context.day)}
								selected={this.interval}
							/>
						)}}
				/>
			)
		}
	}