add planning view for calendar app

This commit is contained in:
Julien Fastré 2022-07-01 18:23:46 +02:00
parent 8bbd3b01d9
commit a604902074
2 changed files with 8 additions and 13 deletions

View File

@ -164,7 +164,7 @@ class RemoteEventConverter
public function convertAvailabilityToRemoteEvent(array $event): RemoteEvent public function convertAvailabilityToRemoteEvent(array $event): RemoteEvent
{ {
$startDate = $startDate =
DateTimeImmutable::createFromFormat(self::REMOTE_DATE_FORMAT, $event['start']['dateTime']) DateTimeImmutable::createFromFormat(self::REMOTE_DATE_FORMAT, $event['start']['dateTime'], $this->remoteDateTimeZone)
->setTimezone($this->defaultDateTimeZone); ->setTimezone($this->defaultDateTimeZone);
$endDate = $endDate =
DateTimeImmutable::createFromFormat(self::REMOTE_DATE_FORMAT, $event['end']['dateTime'], $this->remoteDateTimeZone) DateTimeImmutable::createFromFormat(self::REMOTE_DATE_FORMAT, $event['end']['dateTime'], $this->remoteDateTimeZone)
@ -210,7 +210,7 @@ class RemoteEventConverter
public function convertToRemote(array $event): RemoteEvent public function convertToRemote(array $event): RemoteEvent
{ {
$startDate = $startDate =
DateTimeImmutable::createFromFormat(self::REMOTE_DATE_FORMAT, $event['start']['dateTime']) DateTimeImmutable::createFromFormat(self::REMOTE_DATE_FORMAT, $event['start']['dateTime'], $this->remoteDateTimeZone)
->setTimezone($this->defaultDateTimeZone); ->setTimezone($this->defaultDateTimeZone);
$endDate = $endDate =
DateTimeImmutable::createFromFormat(self::REMOTE_DATE_FORMAT, $event['end']['dateTime'], $this->remoteDateTimeZone) DateTimeImmutable::createFromFormat(self::REMOTE_DATE_FORMAT, $event['end']['dateTime'], $this->remoteDateTimeZone)

View File

@ -103,9 +103,9 @@
<template v-slot:eventContent='arg'> <template v-slot:eventContent='arg'>
<span> <span>
<b v-if="arg.event.extendedProps.is === 'remote'">{{ arg.event.title}}</b> <b v-if="arg.event.extendedProps.is === 'remote'">{{ arg.event.title}}</b>
<b v-else-if="arg.event.extendedProps.is === 'range'">{{ arg.timeText }} - {{ arg.event.extendedProps.locationName }} <small>{{ arg.event.extendedProps.userLabel }}</small></b> <b v-else-if="arg.event.extendedProps.is === 'range'">{{ arg.timeText }} {{ arg.event.extendedProps.locationName }} <small>{{ arg.event.extendedProps.userLabel }}</small></b>
<b v-else-if="arg.event.extendedProps.is === 'current'">{{ arg.timeText }} - {{ $t('current_selected')}} </b> <b v-else-if="arg.event.extendedProps.is === 'current'">{{ arg.timeText }} {{ $t('current_selected')}} </b>
<b v-else>{{ arg.timeText }} - {{ $t('current_selected')}} </b> <b v-else>{{ arg.timeText }} {{ $t('current_selected')}} </b>
</span> </span>
</template> </template>
</FullCalendar> </FullCalendar>
@ -121,6 +121,7 @@ import FullCalendar from '@fullcalendar/vue3';
import dayGridPlugin from '@fullcalendar/daygrid'; import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction'; import interactionPlugin from '@fullcalendar/interaction';
import timeGridPlugin from '@fullcalendar/timegrid'; import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
import CalendarActive from './Components/CalendarActive'; import CalendarActive from './Components/CalendarActive';
import PickEntity from 'ChillMainAssets/vuejs/PickEntity/PickEntity.vue'; import PickEntity from 'ChillMainAssets/vuejs/PickEntity/PickEntity.vue';
import {mapGetters, mapState} from "vuex"; import {mapGetters, mapState} from "vuex";
@ -153,7 +154,7 @@ export default {
calendarOptions() { calendarOptions() {
return { return {
locale: frLocale, locale: frLocale,
plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, dayGridPlugin], plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, dayGridPlugin, listPlugin],
initialView: 'timeGridWeek', initialView: 'timeGridWeek',
initialDate: this.$store.getters.getInitialDate, initialDate: this.$store.getters.getInitialDate,
eventSources: this.events, eventSources: this.events,
@ -171,18 +172,12 @@ export default {
headerToolbar: { headerToolbar: {
left: 'prev,next today', left: 'prev,next today',
center: 'title', center: 'title',
right: 'timeGridWeek,dayGridThreeDays,timeGridDay', right: 'timeGridWeek,timeGridDay,listWeek',
}, },
views: { views: {
timeGrid: { timeGrid: {
slotEventOverlap: false, slotEventOverlap: false,
slotDuration: this.slotDuration, slotDuration: this.slotDuration,
//scrollTime: '10:00:00',
},
dayGridThreeDays: {
type: 'dayGridWeek',
duration: { days: 3},
buttonText: this.$t('list_three_days'),
}, },
}, },
}; };