[events] AgendaView fixed styling on low res devices and fixed icons
This commit is contained in:
parent
494a555985
commit
dd33e77514
|
|
@ -12,7 +12,7 @@
|
||||||
align="right"
|
align="right"
|
||||||
style="position: sticky; top: 5px; padding-right: 5px; z-index: 999"
|
style="position: sticky; top: 5px; padding-right: 5px; z-index: 999"
|
||||||
>
|
>
|
||||||
<q-btn round color="negative" icon="close" dense rounded @click="editDone(false)" />
|
<q-btn round color="negative" icon="mdi-close" dense rounded @click="editDone(false)" />
|
||||||
</div>
|
</div>
|
||||||
<div class="col" style="margin: 0; padding: 0; margin-top: -2.4em">
|
<div class="col" style="margin: 0; padding: 0; margin-top: -2.4em">
|
||||||
<edit-event v-model="editor" :date="editor.start" @done="editDone" />
|
<edit-event v-model="editor" :date="editor.start" @done="editDone" />
|
||||||
|
|
@ -21,94 +21,95 @@
|
||||||
</q-card>
|
</q-card>
|
||||||
</q-dialog>
|
</q-dialog>
|
||||||
<q-card>
|
<q-card>
|
||||||
<div style="max-width: 1800px; width: 100%">
|
<q-toolbar class="bg-primary text-white q-my-md shadow-2 items-center row justify-center">
|
||||||
<q-toolbar class="bg-primary text-white q-my-md shadow-2 items-center row justify-center">
|
<q-btn flat dense class="absolute-left q-ml-sm"
|
||||||
<q-btn flat dense class="row absolute-left q-ml-sm"
|
>{{ asMonth(selectedDate) }} {{ asYear(selectedDate) }}
|
||||||
>{{ asMonth(selectedDate) }} {{ asYear(selectedDate) }}
|
<q-popup-proxy transition-show="scale" transition-hide="scale" @before-show="updateProxy">
|
||||||
<q-popup-proxy transition-show="scale" transition-hide="scale" @before-show="updateProxy">
|
<q-date v-model="proxyDate">
|
||||||
<q-date v-model="proxyDate">
|
<div class="row items-center justify-end q-gutter-sm">
|
||||||
<div class="row items-center justify-end q-gutter-sm">
|
<q-btn v-close-popup label="Cancel" color="primary" flat />
|
||||||
<q-btn v-close-popup label="Cancel" color="primary" flat />
|
<q-btn
|
||||||
<q-btn
|
v-close-popup
|
||||||
v-close-popup
|
label="OK"
|
||||||
label="OK"
|
color="primary"
|
||||||
color="primary"
|
flat
|
||||||
flat
|
@click="saveSelectedDate(proxyDate)"
|
||||||
@click="saveSelectedDate(proxyDate)"
|
/>
|
||||||
/>
|
</div>
|
||||||
</div>
|
</q-date>
|
||||||
</q-date>
|
</q-popup-proxy>
|
||||||
</q-popup-proxy>
|
</q-btn>
|
||||||
</q-btn>
|
<div
|
||||||
<div class="row justify-center items-center">
|
class="row"
|
||||||
<q-btn flat dense label="Zurück" @click="calendarPrev" />
|
:class="{ 'absolute-right': windowWidth < 600, 'q-mr-sm': windowWidth < 600 }"
|
||||||
<q-separator vertical />
|
|
||||||
<q-btn
|
|
||||||
flat
|
|
||||||
dense
|
|
||||||
:label="calendarDays == 1 ? 'Heute' : 'Diese Woche'"
|
|
||||||
@click="calendarNow"
|
|
||||||
/>
|
|
||||||
<q-separator vertical />
|
|
||||||
<q-btn flat dense label="Weiter" @click="calendarNext" />
|
|
||||||
</div>
|
|
||||||
<!-- <q-space /> -->
|
|
||||||
|
|
||||||
<q-btn-toggle
|
|
||||||
v-if="windowWidth >= 600"
|
|
||||||
v-model="calendarView"
|
|
||||||
class="row absolute-right"
|
|
||||||
flat
|
|
||||||
stretch
|
|
||||||
toggle-color=""
|
|
||||||
:options="[
|
|
||||||
{ label: 'Tag', value: 'day' },
|
|
||||||
{ label: 'Woche', value: 'week' },
|
|
||||||
]"
|
|
||||||
/>
|
|
||||||
</q-toolbar>
|
|
||||||
<q-calendar-agenda
|
|
||||||
v-model="selectedDate"
|
|
||||||
:view="calendarRealView"
|
|
||||||
:max-days="calendarDays"
|
|
||||||
:weekdays="[1, 2, 3, 4, 5, 6, 0]"
|
|
||||||
locale="de-de"
|
|
||||||
style="height: 100%; min-height: 400px"
|
|
||||||
>
|
>
|
||||||
<template #head-day-button="{ scope: { dayLabel, timestamp, activeDate } }">
|
<q-btn flat dense label="Zurück" @click="calendarPrev" />
|
||||||
<q-btn
|
<q-separator vertical />
|
||||||
round
|
<q-btn
|
||||||
dense
|
flat
|
||||||
size="sm"
|
dense
|
||||||
class="q-mb-xs"
|
:label="calendarDays == 1 ? 'Heute' : 'Diese Woche'"
|
||||||
:label="dayLabel"
|
@click="calendarNow"
|
||||||
:color="formatDayColor(timestamp.current, activeDate)"
|
/>
|
||||||
>
|
<q-separator vertical />
|
||||||
<q-menu>
|
<q-btn flat dense label="Weiter" @click="calendarNext" />
|
||||||
<q-list style="min-width: 100px">
|
</div>
|
||||||
<q-item clickable @click="showDay(timestamp.date)">
|
<!-- <q-space /> -->
|
||||||
<q-item-section>Anzeigen</q-item-section>
|
|
||||||
</q-item>
|
<q-btn-toggle
|
||||||
<q-item clickable @click="newEvent(timestamp.date)">
|
v-if="windowWidth >= 600"
|
||||||
<q-item-section>Neue Veranstaltung</q-item-section>
|
v-model="calendarView"
|
||||||
</q-item>
|
class="row absolute-right"
|
||||||
</q-list>
|
flat
|
||||||
</q-menu>
|
stretch
|
||||||
</q-btn>
|
toggle-color=""
|
||||||
</template>
|
:options="[
|
||||||
<template #day="{ scope: { timestamp } }">
|
{ label: 'Tag', value: 'day' },
|
||||||
<div itemref="" class="q-pb-sm" style="min-height: 200px">
|
{ label: 'Woche', value: 'week' },
|
||||||
<eventslot
|
]"
|
||||||
v-for="(agenda, index) in events[timestamp.weekday]"
|
/>
|
||||||
:key="index"
|
</q-toolbar>
|
||||||
v-model="events[timestamp.weekday][index]"
|
<q-calendar-agenda
|
||||||
@removeEvent="remove"
|
v-model="selectedDate"
|
||||||
@editEvent="edit"
|
:view="calendarRealView"
|
||||||
/>
|
:max-days="calendarDays"
|
||||||
</div>
|
:weekdays="[1, 2, 3, 4, 5, 6, 0]"
|
||||||
</template>
|
locale="de-de"
|
||||||
</q-calendar-agenda>
|
style="height: 100%; min-height: 400px"
|
||||||
</div>
|
>
|
||||||
|
<template #head-day-button="{ scope: { dayLabel, timestamp, activeDate } }">
|
||||||
|
<q-btn
|
||||||
|
round
|
||||||
|
dense
|
||||||
|
size="sm"
|
||||||
|
class="q-mb-xs"
|
||||||
|
:label="dayLabel"
|
||||||
|
:color="formatDayColor(timestamp.current, activeDate)"
|
||||||
|
>
|
||||||
|
<q-menu>
|
||||||
|
<q-list style="min-width: 100px">
|
||||||
|
<q-item clickable @click="showDay(timestamp.date)">
|
||||||
|
<q-item-section>Anzeigen</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
<q-item clickable @click="newEvent(timestamp.date)">
|
||||||
|
<q-item-section>Neue Veranstaltung</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-menu>
|
||||||
|
</q-btn>
|
||||||
|
</template>
|
||||||
|
<template #day="{ scope: { timestamp } }">
|
||||||
|
<div itemref="" class="q-pb-sm" style="min-height: 200px">
|
||||||
|
<eventslot
|
||||||
|
v-for="(agenda, index) in events[timestamp.weekday]"
|
||||||
|
:key="index"
|
||||||
|
v-model="events[timestamp.weekday][index]"
|
||||||
|
@removeEvent="remove"
|
||||||
|
@editEvent="edit"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</q-calendar-agenda>
|
||||||
</q-card>
|
</q-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -178,7 +179,6 @@ export default defineComponent({
|
||||||
|
|
||||||
async function loadAgendas() {
|
async function loadAgendas() {
|
||||||
const selected = new Date(selectedDate.value);
|
const selected = new Date(selectedDate.value);
|
||||||
console.log(selected);
|
|
||||||
const start = calendarRealView.value === 'day' ? selected : startOfWeek(selected);
|
const start = calendarRealView.value === 'day' ? selected : startOfWeek(selected);
|
||||||
const end = date.addToDate(start, { days: calendarDays.value });
|
const end = date.addToDate(start, { days: calendarDays.value });
|
||||||
|
|
||||||
|
|
@ -262,7 +262,8 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
|
|
||||||
function newEvent(start: Date | string | number) {
|
function newEvent(start: Date | string | number) {
|
||||||
editor.value = Object.assign({}, emptyEvent, { start: start });
|
if (typeof start === 'string') start = date.extractDate(start, 'YYYY-MM-DD');
|
||||||
|
editor.value = emptyEvent(new Date(start));
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue