blackicedbear/FHC-Core
1
0
Fork 0
mirror of https://github.com/FH-Complete/FHC-Core.git synced 2026-07-18 15:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feature(Calendar Scroll Behavior): only scrolls an entire hour at the time when scrolling with the mouse wheel

Browse Source
This commit is contained in:
SimonGschnell
2025-02-26 09:40:42 +01:00
parent ebbec03de4
commit bad19ccde7
3 changed files with 13 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/components/Calendar/Day/Page.js
+8 -4
View File
@@ -53,6 +53,7 @@ export default {
//TODO: workaround is to watch the active state and refetch in case the lvMenu is empty
active: {
handler(value) {
// handles fetching the lvMenu
if (value) {
if (!this.lvMenu) {
this.fetchLvMenu(this.selectedEvent);
@@ -64,7 +65,7 @@ export default {
events: {
handler(newEvents) {
// if no event is selected, select the first event of the day
if (this.selectedEvent == null && newEvents[this.day.toDateString()].length > 0) {
if (this.selectedEvent == null && newEvents[this.day.toDateString()]?.length > 0) {
let events = newEvents[this.day.toDateString()];
if (Array.isArray(events) && events.length > 0) {
this.setSelectedEvent(events[0]);
@@ -239,6 +240,9 @@ export default {
}
},
methods: {
dayScrollBehavior(event){
this.$refs.dayScrollContainer?.scrollBy({ top: Math.sign(event.deltaY) * 100, behavior: 'instant' });
},
dayGridStyle(day) {
const styleObj = {
'grid-template-columns': '1 1fr',
@@ -355,7 +359,7 @@ export default {
template: /*html*/`
<div class="fhc-calendar-day-page h-100">
<div class="row m-0 h-100">
<div class="col-12 col-xl-6 p-0 h-100">
<div style="overflow:auto" class="col-12 col-xl-6 p-0 h-100">
<div class="d-flex flex-column h-100">
<div ref="header" class="fhc-calendar-week-page-header d-grid border-2 border-bottom text-center" :style="pageHeaderStyle">
<div type="button" class="flex-grow-1" :title="dayText.heading" @click.prevent="changeToMonth(day)">
@@ -363,11 +367,11 @@ export default {
<a href="#" class="small text-secondary text-decoration-none" >{{dayText.datum}}</a>
</div>
</div>
<div id="scroll g-0" style="height: 100%; overflow-y: scroll;">
<div @wheel.prevent="dayScrollBehavior" id="scrollContainer" ref="dayScrollContainer" style="height: 100%; overflow-y: scroll;">
<div ref="eventcontainer" class="position-relative flex-grow-1" >
<div class="all-day-event-container" >
<div class="all-day-event all-day-event-border" v-for="(day,dayindex) in eventsPerDayAndHour">
<div @wheel.stop class="all-day-event all-day-event-border" v-for="(day,dayindex) in eventsPerDayAndHour">
<template v-for="(events,_day) in allDayEvents" :key="_day">
<div v-if="dayindex == _day" v-for="event in events" :key="event" class="d-grid m-1" style="top:0;" @click.prevent="eventClick(event)"
public/js/components/Calendar/Pane.js
+4 -1
View File
@@ -39,6 +39,9 @@ export default {
},
methods: {
scrollBehavior(event){
this.$refs.calendarContainer?.scrollBy({ top: Math.sign(event.deltaY) * 100, behavior: 'instant' });
},
scrollCalendar(event){
this.scrollTop = this.$refs.calendarContainer.scrollTop;
this.clientHeight = this.$refs.calendarContainer.clientHeight;
@@ -82,7 +85,7 @@ export default {
},
template: `
<div ref="carousel" class="calendar-pane carousel slide" @[\`slide.bs.carousel\`]="slide" @[\`slid.bs.carousel\`]="slid" :data-queue="queue">
<div id="calendarContainer" @scroll="scrollCalendar" ref="calendarContainer" class="carousel-inner " style="height:var(--fhc-calendar-pane-height);">
<div id="calendarContainer" @wheel.prevent="scrollBehavior" @scroll="scrollCalendar" ref="calendarContainer" class="carousel-inner " style="height:var(--fhc-calendar-pane-height);">
<div ref="carouselItems" v-for="i in [...Array(3).keys()]" :key="i" class="carousel-item" style="height:var(--fhc-calendar-pane-height);">
<slot :active="i == activeCarouselItemIndex" :index="i" :offset="offsets[i]" />
</div>
public/js/components/Calendar/Week/Page.js
+1 -23
View File
@@ -11,7 +11,6 @@ export default {
hourPositionTime:null,
resizeObserver: null,
width: 0,
scrollContainer: null,
}
},
inject: [
@@ -37,23 +36,6 @@ export default {
'page:forward',
'input',
],
watch: {
active: {
handler(value) {
const activeContainer = document.querySelector("#calendarContainer")
if(value){
Vue.nextTick(() => {
this.scrollContainer = activeContainer;
activeContainer.addEventListener('wheel', this.scrollFunction);
})
}else{
this.scrollContainer=null;
activeContainer?.removeEventListener('wheel', this.scrollFunction);
}
},
immediate: true,
}
},
computed: {
allDayEvents(){
let allDayEvents = {};
@@ -209,10 +191,6 @@ export default {
}
},
methods: {
scrollFunction(event){
event.preventDefault();
this.scrollContainer?.scrollBy({ top: Math.sign(event.deltaY) * 100, behavior: 'instant' });
},
hourGridIdentifier(hour) {
// this is the id attribute that is responsible to scroll the calender to the first event
return 'scroll' + hour + this.focusDate.d + this.week;
@@ -375,7 +353,7 @@ export default {
</div>
<div ref="eventcontainer" class="position-relative flex-grow-1" >
<div class="all-day-event-container" >
<div class="all-day-event all-day-event-border" v-for="(day,dayindex) in eventsPerDayAndHour">
<div @wheel.stop class="all-day-event all-day-event-border" v-for="(day,dayindex) in eventsPerDayAndHour">
<template v-for="(events,_day) in allDayEvents" :key="_day">
<div v-if="dayindex == _day" v-for="event in events" :key="event" class="d-grid m-1" style="top:0;" @click.prevent="weekPageClick(event, _day)"