Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-08-23 16:13:50 +00:00
Code Issues Actions Projects Releases Wiki Activity

improve some layout on create calendar

Browse Source
This commit is contained in:
Julien Fastré
2022-06-30 18:36:02 +02:00
parent 64d7c1fe99
commit d87c6305fd
8 changed files with 70 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
View File

@@ -44,43 +44,77 @@
<calendar-active :user="u" :invite="this.$store.getters.getInviteForUser(u)"></calendar-active>
</template>
</div>
<div class="display-options row justify-content-between">
<div class="col-sm col-xs-12">
<div class="display-options row justify-content-between" style="margin-top: 1rem;">
<div class="col-sm-9 col-xs-12">
<div class="input-group mb-3">
<label class="input-group-text" for="slotDuration">Durée des créneaux</label>
<select v-model="this.slotDuration" id="slotDuration" class="form-select">
<select v-model="slotDuration" id="slotDuration" class="form-select">
<option value="00:05:00">5 minutes</option>
<option value="00:10:00">10 minutes</option>
<option value="00:15:00">15 minutes</option>
<option value="00:30:00">30 minutes</option>
</select>
<label class="input-group-text" for="slotMinTime">De</label>
<select v-model="slotMinTime" id="slotMinTime" class="form-select">
<option value="00:00:00">0h</option>
<option value="01:00:00">1h</option>
<option value="02:00:00">2h</option>
<option value="03:00:00">3h</option>
<option value="04:00:00">4h</option>
<option value="05:00:00">5h</option>
<option value="06:00:00">6h</option>
<option value="07:00:00">7h</option>
<option value="08:00:00">8h</option>
<option value="09:00:00">9h</option>
<option value="10:00:00">10h</option>
<option value="11:00:00">11h</option>
<option value="12:00:00">12h</option>
</select>
<label class="input-group-text" for="slotMaxTime">À</label>
<select v-model="slotMaxTime" id="slotMaxTime" class="form-select">
<option value="12:00:00">12h</option>
<option value="13:00:00">13h</option>
<option value="14:00:00">14h</option>
<option value="15:00:00">15h</option>
<option value="16:00:00">16h</option>
<option value="17:00:00">17h</option>
<option value="18:00:00">18h</option>
<option value="19:00:00">19h</option>
<option value="20:00:00">20h</option>
<option value="21:00:00">21h</option>
<option value="22:00:00">22h</option>
<option value="23:00:00">23h</option>
<option value="23:59:59">24h</option>
</select>
</div>
</div>
<div class="col-sm col-xs-12">
<div class="col-sm-3 col-xs-12">
<div class="float-end">
<div class="input-group mb-3">
<div class="input-group-text">
<input id="showHideWE" class="form-check-input mt-0" type="checkbox" v-model="this.hideWeekEnds">
<label for="showHideWE" class="form-check-label"> Masquer les week-ends</label>
</div>
<div class="form-check input-group">
<span class="input-group-text">
<input id="showHideWE" class="mt-0" type="checkbox" v-model="hideWeekends">
</span>
<label for="showHideWE" class="form-check-label input-group-text">Week-ends</label>
</div>
</div>
</div>
</div>
<FullCalendar ref="fullCalendar" :options="calendarOptions">
<template v-slot:eventContent='arg'>
<b>{{ arg.timeText }}</b>
<i>&nbsp;{{ arg.event.title }}</i>
<span>
<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 === 'current'">{{ arg.timeText }} - {{ $t('current_selected')}} </b>
<b v-else>{{ arg.timeText }} - {{ $t('current_selected')}} </b>
</span>
</template>
</FullCalendar>
</teleport>
</template>
<script>
//import {mapGetters} from 'vuex';
import ConcernedGroups from 'ChillActivityAssets/vuejs/Activity/components/ConcernedGroups.vue';
import Location from 'ChillActivityAssets/vuejs/Activity/components/Location.vue';
import CalendarUserSelector from '../_components/CalendarUserSelector/CalendarUserSelector.vue';
import '@fullcalendar/core/vdom'; // solves problem with Vite
import frLocale from '@fullcalendar/core/locales/fr';
import FullCalendar from '@fullcalendar/vue3';
@@ -104,7 +138,9 @@ export default {
return {
errorMsg: [],
showMyCalendar: false,
slotDuration: '00:10:00',
slotDuration: '00:05:00',
slotMinTime: '09:00:00',
slotMaxTime: '18:00:00',
hideWeekEnds: true,
}
},
@@ -122,6 +158,9 @@ export default {
initialDate: this.$store.getters.getInitialDate,
eventSources: this.events,
selectable: true,
slotMinTime: this.slotMinTime,
slotMaxTime: this.slotMaxTime,
scrollTimeReset: false,
datesSet: this.onDatesSet,
select: this.onDateSelect,
eventChange: this.onEventChange,
@@ -132,7 +171,7 @@ export default {
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,dayGridThreeDays,timeGridDay',
right: 'timeGridWeek,dayGridThreeDays,timeGridDay',
},
views: {
timeGrid: {
@@ -237,4 +276,9 @@ export default {
.display-options {
margin-top: 1rem;
}
/* for events which are range */
.fc-event.isrange {
border-width: 3px;
}
</style>