rdv: twig layout + teleport calendar controls

This commit is contained in:
nobohan
2021-08-19 18:45:59 +02:00
parent 7e64ec0a45
commit 1a025ead1b
12 changed files with 62 additions and 45 deletions

View File

@@ -1,18 +1,21 @@
<template>
<concerned-groups></concerned-groups>
<calendar-user-selector
v-bind:users="users"
v-bind:calendarEvents="calendarEvents"
v-bind:updateEventsSource="updateEventsSource"
v-bind:showMyCalendar="showMyCalendar"
v-bind:toggleMyCalendar="toggleMyCalendar" >
</calendar-user-selector>
<h2 class="chill-red">{{ $t('choose_your_date') }}</h2>
<FullCalendar ref="fullCalendar" :options="calendarOptions">
<template v-slot:eventContent='arg'>
<b>{{ arg.timeText }}</b>
</template>
</FullCalendar>
<teleport to="#calendarControls">
<calendar-user-selector
v-bind:users="users"
v-bind:calendarEvents="calendarEvents"
v-bind:updateEventsSource="updateEventsSource"
v-bind:showMyCalendar="showMyCalendar"
v-bind:toggleMyCalendar="toggleMyCalendar" >
</calendar-user-selector>
</teleport>
<teleport to="#fullCalendar">
<FullCalendar ref="fullCalendar" :options="calendarOptions">
<template v-slot:eventContent='arg'>
<b>{{ arg.timeText }}</b>
</template>
</FullCalendar>
</teleport>
</template>
<script>

View File

@@ -1,6 +1,6 @@
<template>
<h2 class="chill-red">{{ $t('choose_your_calendar_user') }}</h2>
<div>
<div class="calendar__controls">
<h2 class="chill-red">{{ $t('choose_your_calendar_user') }}</h2>
<VueMultiselect
name="field"
id="calendarUserSelector"
@@ -196,3 +196,12 @@ export default {
<style src="vue-multiselect/dist/vue-multiselect.css"></style>
<style lang="scss" scoped>
div.calendar__controls {
background-color: 'black';
height: 50%;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
</style>

View File

@@ -2,7 +2,7 @@ const calendarUserSelectorMessages = {
fr: {
choose_your_calendar_user: "Afficher les plages de disponibilités",
select_user: "Sélectionnez des calendriers",
show_my_calendar: "Affichez mon calendrier"
show_my_calendar: "Afficher mon calendrier"
}
};