diff --git a/public/js/components/Calendar/Day/Page.js b/public/js/components/Calendar/Day/Page.js
index b9f0e34a8..105e5c834 100644
--- a/public/js/components/Calendar/Day/Page.js
+++ b/public/js/components/Calendar/Day/Page.js
@@ -15,7 +15,8 @@ export default {
 		'focusDate',
 		'size',
 		'events',
-		'noMonthView'
+		'noMonthView',
+		'isSliding'
 	],
 	props: {
 		year: Number,
@@ -39,6 +40,9 @@ export default {
 			return result;
 		},
 		eventsPerDayAndHour() {
+			// return early if the calendar pane is sliding
+			if (this.isSliding) return {};
+
 			const res = {};
 			this.days.forEach(day => {
 				let key = day.toDateString();
diff --git a/public/js/components/Calendar/Pane.js b/public/js/components/Calendar/Pane.js
index 8ff9b6259..f5574b728 100644
--- a/public/js/components/Calendar/Pane.js
+++ b/public/js/components/Calendar/Pane.js
@@ -6,7 +6,13 @@ export default {
 		return {
 			carousel: null,
 			queue: 0,
-			offset: 0
+			offset: 0,
+			slideAnimation:false,
+		}
+	},
+	provide() {
+		return {
+			isSliding: Vue.computed(() => this.slideAnimation),
 		}
 	},
 	computed: {
@@ -34,6 +40,10 @@ export default {
 				else
 					this.carousel.prev();
 			}
+			this.slideAnimation = false;
+		},
+		slide(evt) {
+			this.slideAnimation = true;
 		}
 	},
 	mounted() {
@@ -45,7 +55,7 @@ export default {
 		}
 	},
 	template: `
-	<div ref="carousel" class="calendar-pane carousel slide" @[\`slid.bs.carousel\`]="slid" :data-queue="queue">
+	<div ref="carousel" class="calendar-pane carousel slide" @[\`slide.bs.carousel\`]="slide" @[\`slid.bs.carousel\`]="slid" :data-queue="queue">
 		<!--height calc function just for user testing purpose (has to be fixed)-->
 		<div class="carousel-inner " style="height:calc(100vh - 220px); overflow:scroll">
 			<div v-for="i in [...Array(3).keys()]" :key="i" class="carousel-item">
diff --git a/public/js/components/Calendar/Week/Page.js b/public/js/components/Calendar/Week/Page.js
index 868e8ea85..c0fc7df61 100644
--- a/public/js/components/Calendar/Week/Page.js
+++ b/public/js/components/Calendar/Week/Page.js
@@ -15,7 +15,8 @@ export default {
 		'focusDate',
 		'size',
 		'events',
-		'noMonthView'
+		'noMonthView',
+		'isSliding'
 	],
 	props: {
 		year: Number,
@@ -45,6 +46,9 @@ export default {
 
 		},
 		eventsPerDayAndHour() {
+			// return early if the calendar pane is sliding
+			if (this.isSliding) return {};
+			
 			const res = {};
 			this.days.forEach(day => {
 				let key = day.toDateString();