Stundenplan Widget Basic

public/css/components/dashboard.css

@@ -1,3 +1,5 @@
+@import './calendar.css';
+
 .alert-danger .form-check-input:checked {
 	border-color: #842029;
 	background-color: #842029;

public/js/apps/Dashboard/Admin.js

@@ -1,7 +1,7 @@
 import {CoreNavigationCmpt} from '../../components/navigation/Navigation.js';
 import DashboardAdmin from '../../components/Dashboard/Admin.js';
 
-Vue.createApp({
+const app = Vue.createApp({
   data: () => ({
       appSideMenuEntries: {}
     }),
@@ -9,4 +9,6 @@ Vue.createApp({
     CoreNavigationCmpt,
     DashboardAdmin
   }
-}).mount('#main');
+});
+app.config.unwrapInjectedRef = true;
+app.mount('#main');

public/js/apps/Dashboard/Fhc.js

@@ -1,10 +1,12 @@
 import FhcDashboard from '../../components/Dashboard/Dashboard.js';
 
-Vue.createApp({
+const app = Vue.createApp({
   data: () => ({
       appSideMenuEntries: {}
     }),
   components: {
     FhcDashboard
   }
-}).mount('#content');
+});
+app.config.unwrapInjectedRef = true;
+app.mount('#content');

public/js/components/DashboardWidget/Stundenplan.js

@@ -0,0 +1,55 @@
+import AbstractWidget from './Abstract';
+import FhcCalendar from '../Calendar/Calendar';
+
+export default {
+	mixins: [
+		AbstractWidget
+	],
+	components: {
+		FhcCalendar
+	},
+	data() {
+		return {
+			minimized: true,
+			events: null,
+			currentDay: new Date()
+		}
+	},
+	computed: {
+		currentEvents() {
+			return (this.events || []).filter(evt => evt.end > this.currentDay && evt.start <= this.currentDay);
+		}
+	},
+	methods: {
+		selectDay(day) {
+			this.minimized = true;
+		}
+	},
+	created() {
+		axios
+			.get(this.apiurl + '/components/Cis/Stundenplan')
+			.then(res => {
+				res.data.retval.forEach((el, i) => {
+					el.id = i;
+					el.color = '#' + (el.farbe || 'CCCCCC');
+					el.start = new Date(el.datum + ' ' + this.stunden[el.stunde].beginn);
+					el.end = new Date(el.datum + ' ' + this.stunden[el.stunde].ende);
+					el.title = el.lehrfach;
+					if (el.lehrform)
+						el.title += '-' + el.lehrform;
+				});
+				this.events = res.data.retval || [];
+			})
+			.catch(err => { console.error('ERROR: ', err.response.data) });
+	},
+	template: `
+	<div class="dashboard-widget-stundenplan" v-if="configMode">
+		config
+	</div>
+	<div class="dashboard-widget-stundenplan" v-else>
+		<fhc-calendar class="border-0" @select:day="selectDay" v-model:minimized="minimized" :events="events" no-week-view :show-weeks="false" />
+		<div v-show="minimized">
+			{{currentEvents}}
+		</div>
+	</div>`
+}