%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div>
<!-- <b-button id="show-btn" @click="$bvModal.show('bv-modal-example')">Add Site Visit</b-button> -->
<b-modal id="bv-modal-example" hide-footer>
<template #modal-title>
Hall Booking
</template>
<div class="d-block">
<form action="" method="POST" @submit.prevent="addevent()" class="">
<div class="form-group">
<label for="">Hall Name</label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="eventdetail.title">
</div>
<div class="form-group">
<label for="">Organization</label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="eventdetail.org">
</div>
<div class="form-group">
<label for="">Contact Name</label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="eventdetail.contact_name">
</div>
<div class="form-group">
<label for="">Contact Mobile</label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="eventdetail.contact_no">
</div>
<div class="form-group">
<label for="">Remarks</label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="eventdetail.note">
</div>
<div class="form-group">
<label for="">GST</label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="eventdetail.gst">
</div>
<div class="form-group">
<label for="">Date</label>
<input type="date" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="eventdetail.date">
</div>
<div class="form-group">
<label for="">Time Slot</label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="eventdetail.time_slot">
</div>
<div class="form-group">
<label for="">Note</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="5" v-model="eventdetail.note"></textarea>
</div>
<button type="submit" value="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<b-button class="mt-3" block @click="$bvModal.hide('bv-modal-example')">Close Me</b-button>
</b-modal>
<b-modal id="update" hide-footer>
<template #modal-title>
Hall Booking Update
</template>
<div class="d-block">
<form action="" method="POST" @submit.prevent="updateEvent()" >
<div class="form-group">
<label for="">Hall Name</label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="eventdetail.title">
</div>
<div class="form-group">
<label for="">Organization</label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="eventdetail.org">
</div>
<div class="form-group">
<label for="">Contact Name</label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="eventdetail.contact_name">
</div>
<div class="form-group">
<label for="">Contact Mobile</label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="eventdetail.contact_no">
</div>
<div class="form-group">
<label for="">Remarks</label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="eventdetail.contactmobile">
</div>
<div class="form-group">
<label for="">Date</label>
<input type="date" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="eventdetail.date">
</div>
<div class="form-group">
<label for="">Time Slot</label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="eventdetail.time_slot">
</div>
<button @click="deleteEvent()" class="btn btn-danger">delete</button>
<button type="submit" value="submit" class="btn btn-primary">Update</button>
</form>
</div>
<b-button class="mt-3" block @click="$bvModal.hide('bv-modal-example')">Close Me</b-button>
</b-modal>
<FullCalendar :options='calendarOptions'>
<template v-slot:eventContent='arg'>
<b>{{ arg.event.extendedProps.org }}-</b>
<i>{{ arg.event.title }}</i>
</template>
</FullCalendar>
</div>
</template>
<script>
import '@fullcalendar/core/vdom' // solves problem with Vite
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
export default {
components: {
FullCalendar // make the <FullCalendar> tag available
},
data() {
return {
calendarOptions: {
plugins: [ dayGridPlugin, interactionPlugin ],
initialView: 'dayGridMonth',
views: {
dayGridTwoWeek: {
type: 'dayGrid',
duration: { weeks: 2 }
}
},
headerToolbar: {
left: 'prev,next',
center: 'title',
right: 'dayGridWeek,dayGridDay,dayGridMonth,dayGridTwoWeek' // user can switch between the two
},
dateClick: this.handleDateClick,
eventClick:this.eventClick,
selectable:true,
sitevisits:[],
events: [
]
},
test:22,
eventdetail:{
eventDate:"",
title:'',
org:'',
contact_name:'',
contact_no:'',
date:'',
gst:'',
color:'',
note:''
},
id:''
}
},
methods: {
handleDateClick: function(arg) {
this.$bvModal.show('bv-modal-example'),
this.eventdetail.date=arg.dateStr
},
addevent(){
axios
.post('/hallbookings', {
title:this.eventdetail.title,
org:this.eventdetail.org,
date: this.eventdetail.date,
note: this.eventdetail.note,
contact_name: this.eventdetail.contact_name,
contact_no: this.eventdetail.contact_no,
gst: this.eventdetail.gst,
}) .then(response => {
this.$toaster.success('Event Added'),
this.loadevents(),
this.$bvModal.hide('bv-modal-example')
})
},
loadevents(){
axios.get('/hallbookings') .then(response => {
this.calendarOptions.events = response.data
this.calendarOptions.sitevisits=response
})
},
handleEventClick(e) {
alert(e.event);
},
updateEvent() {
axios.patch('/hallbookings/'+this.id,this.eventdetail
) .then(response => {
this.$toaster.success('Event Added'),
this.loadevents(),
this.$bvModal.hide('update')
})
},
deleteEvent() {
axios.delete('/hallbookings/'+this.id
) .then(response => {
this.$toaster.success('Event Deleted'),
this.loadevents(),
this.$bvModal.hide('update')
})
},
eventClick: function(info) {
this.$bvModal.show('update');
this.eventdetail.title=info.event.title;
this.eventdetail.location=info.event.location;
this.eventdetail.date=info.event.date;
this.eventdetail.contact_name=info.event.extendedProps.contact_name;
this.eventdetail.org=info.event.extendedProps.org;
this.eventdetail.contact_no=info.event.extendedProps.contact_no;
this.eventdetail.gst=info.event.extendedProps.gst;
this.eventdetail.note=info.event.extendedProps.note;
this.id=info.event.id;
}
},
created: function(){
this.loadevents()
},
}
</script>
<style>
.fc-content {
color: white;
}
</style>
Zerion Mini Shell 1.0