HTWK/htwkalender
1
1
Fork 0
mirror of https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender.git synced 2025-07-23 13:08:48 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat:#60 added localization for more pages

Browse Source
This commit is contained in:
masterElmar
2023-11-15 17:46:25 +01:00
parent 00399c32d9
commit 7e261438d5
18 changed files with 236 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/src/components/RoomOccupation.vue
View File

@ -3,9 +3,11 @@ import FullCalendar from "@fullcalendar/vue3";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
import timeGridPlugin from "@fullcalendar/timegrid";
import { computed, ref, Ref, watch } from "vue";
import { computed, ComputedRef, ref, Ref, watch } from "vue";
import { CalendarOptions, EventInput } from "@fullcalendar/core";
import { fetchEventsByRoomAndDuration } from "../api/fetchRoom.ts";
import { useI18n } from "vue-i18n";
const { t } = useI18n({ useScope: 'global' })
const props = defineProps({
room: {
@ -53,7 +55,14 @@ async function getOccupation() {
calendar?.refetchEvents();
}
const calendarOptions: CalendarOptions = {
import allLocales from "@fullcalendar/core/locales-all";
const calendarOptions: ComputedRef<CalendarOptions> = computed(() =>
{
return {
locales: allLocales,
locale: t('languageCode'),
plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
initialView: "week",
dayHeaderFormat: { weekday: "short", omitCommas: true },
@ -65,6 +74,7 @@ const calendarOptions: CalendarOptions = {
},
views: {
week: {
description: "Wochenansicht",
type: "timeGrid",
slotLabelFormat: {
hour: "numeric",
@ -77,7 +87,6 @@ const calendarOptions: CalendarOptions = {
titleFormat: { month: "short", day: "numeric" },
slotMinTime: "06:00:00",
slotMaxTime: "22:00:00",
duration: { days: 7 },
firstDay: 1,
allDaySlot: false,
@ -106,7 +115,7 @@ const calendarOptions: CalendarOptions = {
start: "week,Day",
},
datesSet: function (dateInfo) {
datesSet: function (dateInfo: any) {
const view = dateInfo.view;
const offset = new Date().getTimezoneOffset();
const startDate = new Date(view.activeStart.getTime() - offset * 60 * 1000);
@ -115,7 +124,7 @@ const calendarOptions: CalendarOptions = {
currentDateTo.value = endDate.toISOString().split("T")[0];
getOccupation();
},
events: function (_info, successCallback, failureCallback) {
events: function (_info: any, successCallback: any, failureCallback: any) {
if (occupations.value.length === 0) {
failureCallback(new Error("no events"));
} else {
@ -130,8 +139,8 @@ const calendarOptions: CalendarOptions = {
);
}
},
};
}})
</script>
<template>
<FullCalendar ref="fullCalendar" :options="calendarOptions" />
<FullCalendar ref="fullCalendar" :options="calendarOptions"/>
</template>