added vue datepicker11 option; month page header click show months in modal instead of switching page & mode;

application/views/CisRouterView/CisRouterView.php

@@ -8,6 +8,7 @@ $includesArray = array(
 	'tabulator5' => true,
 	'vue3' => true,
 	'primevue3' => true,
+	'vuedatepicker11' => true,
 	'customCSSs' => array(
 		'public/css/components/verticalsplit.css',
 		'public/css/components/searchbar/searchbar.css',

application/views/templates/FHC-Common.php

@@ -28,6 +28,7 @@
 	$tinymce5 = isset($tinymce5) ? $tinymce5 : false;
 	$vue3 = isset($vue3) ? $vue3 : false;
 	$primevue3 = isset($primevue3) ? $primevue3 : false;
+	$vuedatepicker11 = isset($vuedatepicker11) ? $vuedatepicker11 : false;
 
 	// Hooks
 	$addons = isset($addons) ? $addons : false;

application/views/templates/FHC-Footer.php

@@ -152,6 +152,8 @@
 		generateJSsInclude('vendor/npm-asset/primevue/confirmationservice/confirmationservice.min.js');
 	}
 
+	if($vuedatepicker11) generateJSsInclude('vendor/vuejs/vuedatepicker_js11/vue-datepicker.iife.js');
+	
 	// --------------------------------------------------------------------------------------------------------
 	// From public folder
 
@@ -186,6 +188,8 @@
 	// NOTE: keep it as the last but one
 	if ($addons === true) generateAddonsJSsInclude($calledPath.'/'.$calledMethod);
 
+	
+	
 	// Eventually required JS
 	// NOTE: keep it as the latest
 	generateJSsInclude($customJSs);

application/views/templates/FHC-Header.php

@@ -92,7 +92,12 @@
 				generateCSSsInclude('vendor/npm-asset/primeicons/primeicons.css');
 			}
 
-			// --------------------------------------------------------------------------------------------------------
+			if ($vuedatepicker11 === true)
+			{
+				generateCSSsInclude('vendor/vuejs/vuedatepicker_css11/main.css');
+			}
+			
+		// --------------------------------------------------------------------------------------------------------
 			// From public folder
 
 			// AjaxLib CSS

composer.json

@@ -370,6 +370,28 @@
 				}
 			}
 		},
+		{
+			"type": "package",
+			"package": {
+				"name": "vuejs/vuedatepicker_js11",
+				"version": "11.0.1",
+				"dist": {
+					"url": "https://unpkg.com/@vuepic/vue-datepicker@11.0.1/dist/vue-datepicker.iife.js",
+					"type": "file"
+				}
+			}
+		},
+		{
+			"type": "package",
+			"package": {
+				"name": "vuejs/vuedatepicker_css11",
+				"version": "11.0.1",
+				"dist": {
+					"url": "https://unpkg.com/@vuepic/vue-datepicker@11.0.1/dist/main.css",
+					"type": "file"
+				}
+			}
+		},
 		{
 			"type": "package",
 			"package": {
@@ -456,7 +478,9 @@
 		"vuejs/vuejs3": "3.3.8",
 		"vuejs/vuerouter4": "4.1.3",
 		"vuejs/vuedatepicker_js": "7.2.0",
-		"vuejs/vuedatepicker_css": "7.2.0"
+		"vuejs/vuedatepicker_css": "7.2.0",
+		"vuejs/vuedatepicker_js11": "11.0.1",
+		"vuejs/vuedatepicker_css11": "11.0.1"
 
 	},
 	"config": {

public/js/components/Calendar/Month.js

@@ -1,14 +1,17 @@
 import CalendarAbstract from './Abstract.js';
 import CalendarPane from './Pane.js';
 import CalendarMonthPage from './Month/Page.js';
-
+import BsModal from "../Bootstrap/Modal.js";
+import Months from "./Months";
 export default {
 	mixins: [
 		CalendarAbstract
 	],
 	components: {
 		CalendarMonthPage,
-		CalendarPane
+		CalendarPane,
+		BsModal,
+		Months
 	},
 	data() {
 		return {
@@ -21,6 +24,16 @@ export default {
 		}
 	},
 	methods: {
+		handleMonthChanged(month) {
+			this.$emit('change:offset', { y: 0, m: month - this.focusDate.m, d: 0 });
+			this.$refs.modalDatepickerContainer.hide()
+		},
+		hideMonthsModal() {
+			this.$refs.modalDatepickerContainer.hide()
+		},
+		handleHeaderClickMonth() {
+			this.$refs.modalDatepickerContainer.show()
+		},
 		paneChanged(dir) {
 			if (this.syncOnNextChange) {
 				this.syncOnNextChange = false;
@@ -65,7 +78,7 @@ export default {
 	},
 	template: `
 	<div class="fhc-calendar-month">
-		<calendar-header :title="title" @prev="prev" @next="next" @updateMode="$emit('updateMode', $event)" @click="$emit('updateMode', 'months')" >
+		<calendar-header :title="title" @prev="prev" @next="next" @updateMode="$emit('updateMode', $event)" @click="handleHeaderClickMonth">
 			<template #calendarDownloads>
 				<slot name="calendarDownloads"></slot>
 			</template>
@@ -77,5 +90,12 @@ export default {
 				</template>
 			</calendar-month-page>
 		</calendar-pane>
-	</div>`
+	</div>
+
+	<bs-modal ref="modalDatepickerContainer" dialogClass='modal-lg' class="bootstrap-prompt">
+		<template v-slot:default>
+			<months @change="handleMonthChanged"></months>
+		</template>
+	</bs-modal>
+`
 }

public/js/components/Calendar/Months.js

@@ -4,6 +4,9 @@ export default {
 	mixins: [
 		CalendarAbstract
 	],
+	emits: [
+		'change'
+	],
 	inject: [
 		'size'
 	],
@@ -22,10 +25,9 @@ export default {
 	},
 	template: `
 	<div class="fhc-calendar-months">
-		<calendar-header :title="title" @prev="focusDate.y--" @next="focusDate.y++" @click="$emit('updateMode', 'years')" @updateMode="$emit('updateMode', $event)" />
 		<div class="d-flex flex-wrap">
 			<div v-for="(month, key) in months" :key="key" class="d-grid col-4">
-				<button @click="focusDate.m = key; $emit('updateMode', 'month')" class="btn btn-outline-secondary" :class="{'border-0': key != focusDate.m}">
+				<button @click=" $emit('change', key); focusDate.m = key;" class="btn btn-outline-secondary" :class="{'border-0': key != focusDate.m}">
 					{{month}}
 				</button>
 			</div>

public/js/components/Cis/Stundenplan/Stundenplan.js

@@ -355,12 +355,12 @@ const Stundenplan = {
 					<span class="flex-grow-1 text-center ">{{event.topic}}</span>
 				</div>
 			</div>
-			<div v-else @click="showModal($event, event)" class="p-1">
+			<div v-else @click="showModal(event)" class="p-1">
 				<span>{{event.topic}}</span>
 			</div>
 		</template>
 		<template #weekPage="{event,day}">
-			<div @click="showModal(event); " type="button"
+			<div @click="showModal(event)" type="button"
 			class=" position-relative border border-secondary border d-flex flex-col align-items-center justify-content-evenly h-100"
 			:class="{'p-1':event.allDayEvent}"
 			style="overflow: auto;">