diff --git a/src/documentation/examples/date-and-time.vue b/src/documentation/examples/date-and-time.vue index cc2a7ae3..2cfdbfce 100644 --- a/src/documentation/examples/date-and-time.vue +++ b/src/documentation/examples/date-and-time.vue @@ -88,8 +88,9 @@ example(title="Scroll the View to a Particular Time" anchor="scroll-to-time") code view.scrollTop() p Scrolls the calendar body to the top. li.mt3 - code view.scrollToTime(minutes) + code view.scrollToTime(minutes, scrollToOptions) p Scrolls the calendar body to the given time in minutes. E.g. #[code view.scrollToCurrentTime(13 * 60)]. + p If you need to disable smooth behavior, you can set second argument of the function as options, e.g. #[code view.scrollToCurrentTime(13 * 60, { behavior: undefined })]. li.mt3 code view.scrollToCurrentTime() p Scrolls the calendar body to the current time. @@ -98,9 +99,12 @@ example(title="Scroll the View to a Particular Time" anchor="scroll-to-time") w-button.mt2.mr2(@click="exScrollToTime.scrollTop") w-icon mdi mdi-format-vertical-align-top | Scroll top + w-button.mt2.mr2(@click="exScrollToTime.scrollToTime(12 * 60, { behavior: undefined })") + w-icon mdi mdi-format-vertical-align-center + | Scroll to 12:00, fast w-button.mt2.mr2(@click="exScrollToTime.scrollToTime(12 * 60)") w-icon mdi mdi-format-vertical-align-center - | Scroll to 12:00 + | Scroll to 12:00, smooth w-button.mt2.mr2(@click="exScrollToTime.scrollToCurrentTime") w-icon mdi mdi-format-vertical-align-bottom | Scroll to current time diff --git a/src/types/vue-cal.ts b/src/types/vue-cal.ts index f05f6109..a495e02a 100644 --- a/src/types/vue-cal.ts +++ b/src/types/vue-cal.ts @@ -186,7 +186,7 @@ export interface VueCalView { createEvent: (event: VueCalEvent) => void deleteEvent: (eventId: number, forceStage?: number) => void scrollToCurrentTime: () => void - scrollToTime: (minutes: number) => void + scrollToTime: (minutes: number, scrollToOptions?: ScrollToOptions) => void scrollTop: () => void // Others viewDate: Date diff --git a/src/vue-cal/core/view.js b/src/vue-cal/core/view.js index 80b469e9..c453ffc1 100644 --- a/src/vue-cal/core/view.js +++ b/src/vue-cal/core/view.js @@ -535,10 +535,10 @@ export const useView = ({ config, dateUtils, emit, texts, eventsManager }, vueca updateView() } - function scrollToTime (minutes) { + function scrollToTime (minutes, scrollToOptions = { behavior: 'smooth' }) { const scrollableEl = vuecalEl.value?.querySelector('.vuecal__scrollable') const anchor = minutes ? minutes * config.timeCellHeight / config.timeStep : 0 - scrollableEl?.scrollTo({ top: anchor, behavior: 'smooth' }) + scrollableEl?.scrollTo({ ...scrollToOptions, top: anchor }) } function scrollToCurrentTime () {