mirror of
https://github.com/FH-Complete/FHC-Core.git
synced 2026-06-26 00:19:28 +00:00
update(Stundenplan Style): changes the background/color styles for Calendar events in the different views
This commit is contained in:
SimonGschnell
@@ -190,7 +190,7 @@ export default {
|
||||
methods: {
|
||||
handleInput(day) {
|
||||
this.$emit(day[0], day[1]);
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
const allowedInitialModes = ['years'];
|
||||
@@ -227,11 +227,11 @@ export default {
|
||||
template: /*html*/`
|
||||
<div ref="container" class="fhc-calendar card h-100" :class="sizeClass">
|
||||
<component :is="'calendar-' + mode" @updateMode="mode = $event" @change:range="$emit('change:range',$event)" @input="handleInput" >
|
||||
<template #monthPage="{event,day,isSelected}">
|
||||
<slot name="monthPage" :event="event" :day="day" :isSelected="isSelected"></slot>
|
||||
<template #monthPage="{event,day}">
|
||||
<slot name="monthPage" :event="event" :day="day" ></slot>
|
||||
</template>
|
||||
<template #weekPage="{event,day,isSelected}">
|
||||
<slot name="weekPage" :event="event" :day="day" :isSelected="isSelected"></slot>
|
||||
<template #weekPage="{event,day}">
|
||||
<slot name="weekPage" :event="event" :day="day" ></slot>
|
||||
</template>
|
||||
<template #dayPage="{event,day,mobile}">
|
||||
<slot name="dayPage" :event="event" :day="day" :mobile="mobile"></slot>
|
||||
|
||||
@@ -309,10 +309,10 @@ export default {
|
||||
</div>
|
||||
</div>
|
||||
<div id="scroll g-0" style="height: 100%; overflow: scroll;">
|
||||
|
||||
|
||||
<div ref="eventcontainer" class="position-relative flex-grow-1" @mousemove="calcHourPosition" @mouseleave="hourPosition = null" >
|
||||
<div :id="hourGridIdentifier(hour)" v-for="hour in hours" :key="hour" class="position-absolute box-shadow-border-top" :style="hourGridStyle(hour)"></div>
|
||||
|
||||
|
||||
<Transition>
|
||||
<div v-if="hourPosition && !noEventsCondition" class="position-absolute border-top small" :style="indicatorStyle">
|
||||
<span class="border border-top-0 px-2 bg-white">{{hourPositionTime}}</span>
|
||||
@@ -321,12 +321,12 @@ export default {
|
||||
<div>
|
||||
<h1 v-if="noEventsCondition" class="m-0 text-secondary" ref="noEventsText" :style="noLvStyle">Keine Lehrveranstaltungen</h1>
|
||||
<div :class="{'fhc-calendar-no-events-overlay':noEventsCondition, 'events':true}">
|
||||
|
||||
|
||||
<div class="hours">
|
||||
<div v-for="hour in hours" style="min-height:100px" :key="hour" class="text-muted text-end small" :ref="'hour' + hour">{{hour}}:00</div>
|
||||
</div>
|
||||
<div v-for="day in eventsPerDayAndHour" :key="day" class=" day border-start" :style="dayGridStyle">
|
||||
<div v-for="event in day.events" :key="event" :style="eventGridStyle(day,event)" :class="{'selectedEvent':event.orig == selectedEvent}" class="mx-2 small rounded overflow-hidden " >
|
||||
<div v-for="event in day.events" :key="event" :style="eventGridStyle(day,event)" v-contrast :selected="event.orig == selectedEvent" class="fhc-entry mx-2 small rounded overflow-hidden " >
|
||||
<!-- desktop version of the page template, parent receives slotProp mobile = false -->
|
||||
<div class="d-none d-xl-block h-100 " @click.prevent="eventClick(event)">
|
||||
<slot name="dayPage" :event="event" :day="day" :mobile="false">
|
||||
|
||||
@@ -64,8 +64,8 @@ export default {
|
||||
<calendar-header :title="title" @prev="prev" @next="next" @updateMode="$emit('updateMode', $event)" @click="$emit('updateMode', 'months')" />
|
||||
<calendar-pane ref="pane" v-slot="slot" @slid="paneChanged">
|
||||
<calendar-month-page :year="focusDate.y" :month="focusDate.m+slot.offset" @updateMode="$emit('updateMode', $event)" @page:back="prev" @page:forward="next" @input="selectDay" >
|
||||
<template #monthPage="{event,day,isSelected}">
|
||||
<slot name="monthPage" :event="event" :day="day" :isSelected="isSelected"></slot>
|
||||
<template #monthPage="{event,day}">
|
||||
<slot name="monthPage" :event="event" :day="day" ></slot>
|
||||
</template>
|
||||
</calendar-month-page>
|
||||
</calendar-pane>
|
||||
|
||||
@@ -102,8 +102,8 @@ export default {
|
||||
<a href="#" @click.prevent="clickEvent(day,week)" @mouseover="highlight(week,day)" @mouseleave="highlightedWeek = null; highlightedDay = null" v-for="day in week.days" :key="day" :class="{'fhc-calendar-month-page-day-highlight': isHighlighted(week, day)}" class="fhc-calendar-month-page-day text-decoration-none overflow-hidden" :class="{active:date.compare(day),'opacity-50':day.getMonth() != month}" >
|
||||
<span class="no">{{day.getDate()}}</span>
|
||||
<span v-if="events[day.toDateString()] && events[day.toDateString()].length" class="events">
|
||||
<div @click="setSelectedEvent(event);" v-for="event in events[day.toDateString()]" :key="event.id" >
|
||||
<slot name="monthPage" :event="event" :day="day" :isSelected="event == selectedEvent">
|
||||
<div @click="setSelectedEvent(event);" v-for="event in events[day.toDateString()]" :key="event.id" :style="{'background-color': event.color}" class="fhc-entry" :selected="event == selectedEvent" v-contrast >
|
||||
<slot name="monthPage" :event="event" :day="day" >
|
||||
<p>this is a placeholder which means that no template was passed to the Calendar Page slot</p>
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
@@ -43,8 +43,8 @@ export default {
|
||||
<calendar-header :title="title" @prev="prev" @next="next" @updateMode="$emit('updateMode', $event)" @click="$emit('updateMode', 'weeks')"/>
|
||||
<calendar-pane ref="pane" v-slot="slot" @slid="paneChanged">
|
||||
<calendar-week-page :year="focusDate.wYear" :week="focusDate.w+slot.offset" @updateMode="$emit('updateMode', $event)" @page:back="prev" @page:forward="next" @input="selectEvent" >
|
||||
<template #weekPage="{event,day,isSelected}">
|
||||
<slot name="weekPage" :event="event" :day="day" :isSelected="isSelected"></slot>
|
||||
<template #weekPage="{event,day}">
|
||||
<slot name="weekPage" :event="event" :day="day" ></slot>
|
||||
</template>
|
||||
</calendar-week-page>
|
||||
</calendar-pane>
|
||||
|
||||
@@ -238,8 +238,8 @@ export default {
|
||||
<div v-for="hour in hours" style="min-height:100px" :key="hour" class="text-muted text-end small" :ref="'hour' + hour">{{hour}}:00</div>
|
||||
</div>
|
||||
<div v-for="day in eventsPerDayAndHour" :key="day" class=" day border-start" :style="dayGridStyle(day)">
|
||||
<div v-for="event in day.events" :key="event" @click.prevent="weekPageClick(event.orig, day)" :style="eventGridStyle(day,event)" class="mx-2 small rounded overflow-hidden " >
|
||||
<slot name="weekPage" :event="event" :day="day" :isSelected="event.orig == selectedEvent">
|
||||
<div v-for="event in day.events" :key="event" @click.prevent="weekPageClick(event.orig, day)" :selected="event.orig == selectedEvent" :style="eventGridStyle(day,event)" class="mx-2 small rounded overflow-hidden fhc-entry " v-contrast >
|
||||
<slot name="weekPage" :event="event" :day="day">
|
||||
<p>this is a placeholder which means that no template was passed to the Calendar Page slot</p>
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
@@ -121,13 +121,13 @@ export default{
|
||||
template: /*html*/`
|
||||
<lv-modal v-if="currentlySelectedEvent" :showMenu="false" :event="currentlySelectedEvent" ref="lvmodal" />
|
||||
<fhc-calendar @selectedEvent="setSelectedEvent" :initial-date="currentDay" @change:range="updateRange" :events="events" initial-mode="week" show-weeks @select:day="selectDay" v-model:minimized="minimized">
|
||||
<template #monthPage="{event,day,isSelected}">
|
||||
<span class="fhc-entry" :class="{'selectedEvent':isSelected}" style="color:white" :style="{'background-color': event.color}">
|
||||
<template #monthPage="{event,day}">
|
||||
<span >
|
||||
{{event.topic}}
|
||||
</span>
|
||||
</template>
|
||||
<template #weekPage="{event,day,isSelected}">
|
||||
<div @click="showModal(event?.orig)" type="button" :class="{'selectedEvent':isSelected}" class="fhc-entry border border-secondary border d-flex flex-column align-items-center justify-content-evenly h-100">
|
||||
<template #weekPage="{event,day}">
|
||||
<div @click="showModal(event?.orig)" type="button" class=" border border-secondary border d-flex flex-column align-items-center justify-content-evenly h-100">
|
||||
<span>{{event?.orig.topic}}</span>
|
||||
<span v-for="lektor in event?.orig.lektor">{{lektor.kurzbz}}</span>
|
||||
<span>{{event?.orig.ort_kurzbz}}</span>
|
||||
|
||||
@@ -127,14 +127,14 @@ export const Stundenplan = {
|
||||
<hr>
|
||||
<lv-modal v-if="currentlySelectedEvent" :event="currentlySelectedEvent" ref="lvmodal" />
|
||||
<fhc-calendar @selectedEvent="setSelectedEvent" :initial-date="currentDay" @change:range="updateRange" :events="events" initial-mode="week" show-weeks @select:day="selectDay" v-model:minimized="minimized">
|
||||
<template #monthPage="{event,day,isSelected}">
|
||||
<span class="fhc-entry" :class="{'selectedEvent':isSelected}" style="color:white" :style="{'background-color': event.color}">
|
||||
<template #monthPage="{event,day}">
|
||||
<span class="fhc-entry" >
|
||||
{{event.topic}}
|
||||
</span>
|
||||
</template>
|
||||
<template #weekPage="{event,day,isSelected}">
|
||||
<div @click="showModal(event?.orig); console.log(event.orig)" type="button" :class="{'selectedEvent':isSelected}"
|
||||
class="fhc-entry position-relative border border-secondary border d-flex flex-row align-items-center
|
||||
<template #weekPage="{event,day}">
|
||||
<div @click="showModal(event?.orig); " type="button"
|
||||
class=" position-relative border border-secondary border d-flex flex-row align-items-center
|
||||
justify-content-evenly h-100" style="max-height: 75px; overflow: auto;">
|
||||
|
||||
<div v-if="event?.orig?.beginn && event?.orig?.ende" >
|
||||
|
||||
@@ -190,8 +190,8 @@ export default {
|
||||
<lv-modal v-if="selectedEvent" ref="lvmodal" :event="selectedEvent" />
|
||||
<content-modal :content_id="roomInfoContentID" dialogClass="modal-lg" ref="contentModal"/>
|
||||
<fhc-calendar @change:range="updateRange" :initial-date="currentDay" class="border-0" class-header="p-0" @select:day="selectDay" :widget="true" v-model:minimized="minimized" :events="events" no-week-view :show-weeks="false" >
|
||||
<template #monthPage="{event,day,isSelected}">
|
||||
<span class="fhc-entry" :class="{'selectedEvent':isSelected}" style="color:white" :style="{'background-color': event.color}">
|
||||
<template #monthPage="{event,day}">
|
||||
<span >
|
||||
{{event.topic}}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user