blackicedbear/FHC-Core
1
0
Fork 0
mirror of https://github.com/FH-Complete/FHC-Core.git synced 2026-07-18 23:42:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

lets the user change the view of the calendar in the header with a select and highlights the date fields to change the view of the current calendar

Browse Source
This commit is contained in:
SimonGschnell
2024-10-07 14:49:02 +02:00
parent 25a64cbcae
commit e75872adaa
12 changed files with 64 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/components/calendar.css
+11
View File
@@ -2,6 +2,10 @@
background-color: #e9ecef;
}
.fhc-calendar-week-page-header > div:hover{
background-color: #dddfe2;
}
.fhc-calendar-months .col-4,
.fhc-calendar-years .col-4 {
padding: 0.1875em 0;
@@ -117,6 +121,13 @@
align-items: center;
justify-content: end;
}
.fhc-calendar-month-page-weekday:hover {
background-color:#37789c;
color:white;
}
.fhc-calendar-sm .fhc-calendar-month-page-day,
.fhc-calendar-xs .fhc-calendar-month-page-day {
position: relative;
public/js/components/Calendar/Abstract.js
+1 -1
View File
@@ -10,7 +10,7 @@ export default {
'size'
],
emits: [
'update:mode',
'updateMode',
'change:range',
'input'
]
public/js/components/Calendar/Calendar.js
+4 -2
View File
@@ -6,6 +6,7 @@ import CalendarWeeks from './Weeks.js';
import CalendarMinimized from './Minimized.js';
import CalendarDate from '../../composables/CalendarDate.js';
// TODO(chris): week/month toggle
export default {
@@ -28,7 +29,8 @@ export default {
noMonthView: this.noMonthView,
noWeekView: this.noWeekView,
eventsAreNull: Vue.computed(() => this.events === null),
classHeader: this.classHeader
classHeader: this.classHeader,
mode: Vue.computed(()=>this.mode),
};
},
props: {
@@ -135,7 +137,7 @@ export default {
},
template: /*html*/`
<div ref="container" class="fhc-calendar card" :class="sizeClass">
<component v-slot="{event,day}" :is="'calendar-' + mode" @update:mode="mode=$event" @change:range="$emit('change:range',$event)" @input="handleInput" >
<component v-slot="{event,day}" :is="'calendar-' + mode" @updateMode="mode = $event" @change:range="$emit('change:range',$event)" @input="handleInput" >
<!--Week Page layout-->
<slot :event="event" :day="day"></slot>
</component>
public/js/components/Calendar/Header.js
+30 -8
View File
@@ -1,13 +1,28 @@
export default {
data(){
return{
selected: this.mode,
modes:{
week:"Woche",
weeks:"Kalendarwochen",
month:"Monat",
months:"Monate",
years:"Jahre",
},
}
},
inject: [
'eventsAreNull',
'size',
'classHeader'
'classHeader',
'mode',
'updateMode',
],
props: {
title: String
},
emits: [
'updateMode',
'prev',
'next',
'click'
@@ -30,12 +45,19 @@ export default {
}
},
template: `
<div class="calendar-header card-header btn-group w-100" :class="classHeader">
<button class="btn btn-outline-secondary border-0 flex-grow-0" :class="{'btn-sm':!this.size}" @click="$emit('prev')"><i class="fa fa-chevron-left"></i></button>
<button class="btn btn-link link-secondary text-decoration-none" :class="{'btn-sm': !this.size}" @click="$emit('click')">
{{ title }}
<i v-if="eventsAreNull" class="fa fa-spinner fa-pulse"></i>
</button>
<button class="btn btn-outline-secondary border-0 flex-grow-0" :class="{'btn-sm': !this.size}" @click="$emit('next')"><i class="fa fa-chevron-right"></i></button>
<div class="calendar-header card-header row w-100" :class="classHeader">
<button class="btn btn-outline-secondary border-0 col-auto" :class="{'btn-sm':!this.size}" @click="$emit('prev')"><i class="fa fa-chevron-left"></i></button>
<div class="col text-center">
<div class="d-flex justify-content-center align-items-center">
<button class="btn btn-link link-secondary text-decoration-none" :class="{'btn-sm': !this.size}" @click="$emit('click')">
{{ title }}
<i v-if="eventsAreNull" class="fa fa-spinner fa-pulse"></i>
</button>
<select class="form-select w-auto" aria-label="Default select example">
<option :selected="mode_kurzbz == mode" @click="$emit('updateMode',mode_kurzbz)" v-for="(mode_bezeichnung,mode_kurzbz) in modes">{{mode_bezeichnung}}</option>
</select>
</div>
</div>
<button class="col-auto btn btn-outline-secondary border-0" :class="{'btn-sm': !this.size}" @click="$emit('next')"><i class="fa fa-chevron-right"></i></button>
</div>`
}
public/js/components/Calendar/Month.js
+2 -2
View File
@@ -61,9 +61,9 @@ export default {
},
template: `
<div class="fhc-calendar-month">
<calendar-header :title="title" @prev="prev" @next="next" @click="$emit('update:mode', 'months')" />
<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" @update:mode="$emit('update:mode', $event)" @page:back="prev" @page:forward="next" @input="selectDay" />
<calendar-month-page :year="focusDate.y" :month="focusDate.m+slot.offset" @updateMode="$emit('updateMode', $event)" @page:back="prev" @page:forward="next" @input="selectDay" />
</calendar-pane>
</div>`
}
public/js/components/Calendar/Month/Page.js
+2 -2
View File
@@ -14,7 +14,7 @@ export default {
month: Number
},
emits: [
'update:mode',
'updateMode',
'page:back',
'page:forward',
'input'
@@ -50,7 +50,7 @@ export default {
if (!this.noWeekView) {
if (!this.focusDate.isInWeek(week.no, week.y))
this.focusDate.set(week.days[0]);
this.$emit('update:mode', 'week');
this.$emit('updateMode', 'week');
}
}
},
public/js/components/Calendar/Months.js
+2 -2
View File
@@ -22,10 +22,10 @@ export default {
},
template: `
<div class="fhc-calendar-months">
<calendar-header :title="title" @prev="focusDate.y--" @next="focusDate.y++" @click="$emit('update:mode', 'years')" />
<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('update:mode', 'month')" class="btn btn-outline-secondary" :class="{'border-0': key != focusDate.m}">
<button @click="focusDate.m = key; $emit('updateMode', 'month')" class="btn btn-outline-secondary" :class="{'border-0': key != focusDate.m}">
{{month}}
</button>
</div>
public/js/components/Calendar/Week.js
+2 -2
View File
@@ -40,9 +40,9 @@ export default {
},
template: `
<div class="fhc-calendar-week">
<calendar-header :title="title" @prev="prev" @next="next" @click="$emit('update:mode', 'weeks')" />
<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 v-slot="{event,day}" :year="focusDate.y" :week="focusDate.w+slot.offset" @update:mode="$emit('update:mode', $event)" @page:back="prev" @page:forward="next" @input="selectEvent" >
<calendar-week-page v-slot="{event,day}" :year="focusDate.y" :week="focusDate.w+slot.offset" @updateMode="$emit('updateMode', $event)" @page:back="prev" @page:forward="next" @input="selectEvent" >
<slot :event="event" :day="day" ></slot>
</calendar-week-page>
</calendar-pane>
public/js/components/Calendar/Week/Page.js
+4 -4
View File
@@ -16,7 +16,7 @@ export default {
week: Number
},
emits: [
'update:mode',
'updateMode',
'page:back',
'page:forward',
'input'
@@ -82,7 +82,7 @@ export default {
if (!this.noMonthView) {
this.date.set(day);
this.focusDate.set(day);
this.$emit('update:mode', 'month');
this.$emit('updateMode', 'month');
}
},
dateToMinutesOfDay(day) {
@@ -97,9 +97,9 @@ export default {
<div class="d-flex flex-column border-top">
<div class="fhc-calendar-week-page-header border-2 border-bottom text-center d-flex" style="position:sticky; top:0; " >
<div v-for="day in days" :key="day" class="flex-grow-1" :title="day.toLocaleString(undefined, {dateStyle:'short'})">
<div type="button" v-for="day in days" :key="day" class="test flex-grow-1" :title="day.toLocaleString(undefined, {dateStyle:'short'})" @click.prevent="changeToMonth(day)">
<div class="fw-bold">{{day.toLocaleString(undefined, {weekday: size < 2 ? 'narrow' : (size < 3 ? 'short' : 'long')})}}</div>
<a href="#" class="small text-secondary text-decoration-none" @click.prevent="changeToMonth(day)">{{day.toLocaleString(undefined, [{day:'numeric',month:'numeric'},{day:'numeric',month:'numeric'},{day:'numeric',month:'numeric'},{dateStyle:'short'}][this.size])}}</a>
<a href="#" class="small text-secondary text-decoration-none" >{{day.toLocaleString(undefined, [{day:'numeric',month:'numeric'},{day:'numeric',month:'numeric'},{day:'numeric',month:'numeric'},{dateStyle:'short'}][this.size])}}</a>
</div>
</div>
<div ref="eventcontainer" class="flex-grow-1">
public/js/components/Calendar/Weeks.js
+2 -2
View File
@@ -22,12 +22,12 @@ export default {
setWeek(week) {
// TODO(chris): test is there a week jump on year select? => yes there is if the same month/day are in different weeks ... should we prevent that?
this.focusDate.w = week;
this.$emit('update:mode', 'week');
this.$emit('updateMode', 'week');
}
},
template: `
<div class="fhc-calendar-weeks">
<calendar-header :title="title" @prev="focusDate.y--" @next="focusDate.y++" @click="$emit('update:mode', 'years')" />
<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="(week, key) in weeks" :key="key" class="d-grid col-2">
<button @click="setWeek(week)" class="btn btn-outline-secondary" :class="{'border-0': week != focusDate.w}">
public/js/components/Calendar/Years.js
+2 -2
View File
@@ -51,9 +51,9 @@ export default {
},
template: `
<div class="fhc-calendar-years">
<calendar-header :title="title" @prev="prev" @next="next" @click="$emit('update:mode')" />
<calendar-header :title="title" @prev="prev" @next="next" @click="$emit('updateMode')" @updateMode="$emit('updateMode')" />
<calendar-pane ref="pane" v-slot="slot" @slid="paneChanged">
<calendar-years-page :data-test="slot.index" :start="start+range*slot.offset" :end="start+range*slot.offset+range" @update:mode="$emit('update:mode')"/>
<calendar-years-page :data-test="slot.index" :start="start+range*slot.offset" :end="start+range*slot.offset+range" @updateMode="$emit('updateMode')"/>
</calendar-pane>
</div>`
}
public/js/components/Calendar/Years/Page.js
+2 -2
View File
@@ -7,7 +7,7 @@ export default {
end: Number
},
emits: [
'update:mode'
'updateMode'
],
data() {
return {
@@ -21,7 +21,7 @@ export default {
template: `
<div class="fhc-calendar-years-page d-flex flex-wrap">
<div v-for="year in years" :key="year" class="d-grid col-4">
<button class="btn btn-outline-secondary" :class="{'border-0': year != focusDate.y}" @click="focusDate.y = year; $emit('update:mode')">
<button class="btn btn-outline-secondary" :class="{'border-0': year != focusDate.y}" @click="focusDate.y = year; $emit('updateMode')">
{{year}}
</button>
</div>