Closed Abdus-Salam closed 4 years ago
Hi, can you show your code ? or an exemple ?
<template>
<vue-meeting-selector
v-model="meeting"
:date="date"
:loading="loading"
:meetings-days="meetingsDays"
@next-date="nextDate"
@previous-date="previousDate"
/>
</template>
<script>
import VueMeetingSelector from "vue-meeting-selector";
export default {
components: {
VueMeetingSelector
},
data() {
return {
date: new Date(),
meeting: null,
loading: false,
meetingsDays: []
};
},
methods: {
getMeetings(date) {
// methods who return the meetings
},
async nextDate() {
this.loading = true;
const date = new Date(this.date);
date.setDate(date.getDate() + 7);
this.meetingsDays = await this.getMeetings(date);
this.date = date;
this.loading = false;
},
async previousDate() {
this.loading = true;
const date = new Date(this.date);
date.setDate(date.getDate() - 7);
this.meetingsDays = await this.getMeetings(date);
this.date = date;
this.loading = false;
}
},
async created() {
this.loading = true;
this.meetingsDays = await this.getMeetings(this.date);
this.loading = false;
}
};
</script>
Ok this is just an exemple, you need to complete getMeetings(date)
with a function who will generate/get from your backend meetingsSlots
interface MeetingSlot {
date: Date | string;
[key: string]: any;
}
if you want to do it from frontend, you can draw inspiration from the one I did to generate the examples (it's write in ts) https://github.com/iNeoO/vue-meeting-selector/blob/master/src/helpers/slotsGenerator.ts args are
date: Date, // startingDate
nbDays: number, // nB days to generate
startTime: Time, // first meeting starting time
endTime: Time, // last meeting starting time
interval: number, // interval between 2 meetings
randomSlotsToDelete = 0, // randomly delete some meetings, you should let this to 0
I have followed the full process. But in browser shows TypeError: Cannot read property 'length' of undefined. Please help me.