How to create, update, and delete calendar events with on @click methods using Fullcalendar, Laravel, and Vue3
I have created a working install from the https://fullcaledar.io for Vue3 and TypeScript that functions just like the demo here: https://fullcalendar.io/demos
Further, I've connected the Vue calendar component to my CRUD for creating events and have those events showing up on the Fullcalendar view.
I'm having difficulty formulating the code based on the handleDateSelect and handleEventClick methods that will create or modify the calendar events I created through CRUD in the database.
Straight from the demo at https://github.com/fullcalendar/fullcalendar-example-projects/blob/master/vue/src/DemoApp.vue
/* you can update a remote database when these fire:
eventAdd:
eventChange:
eventRemove:
*/
How do I get the handleDateSelect and handleEventClick methods to trigger these eventsAdd, eventChange, eventRemove events and contribute data to the database?
here's my resources/js/calendar/Index.vue:
<template>
<head title="Dashboard" />
<BreezeAuthenticatedLayout>
<template #header>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Resource Calendar Timeline
</h2>
</template>
<div class="py-12">
<div class="max-w-10xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-12 bg-white border-b border-gray-200">
<!--start calendar-->
<div class='demo-app'>
<div class='demo-app-sidebar'>
<div class='demo-app-sidebar-section'>
<h2>Instructions</h2>
<ul>
<li>Select dates and you will be prompted to create a new event</li>
<li>Drag, drop, and resize events</li>
<li>Click an event to delete it</li>
</ul>
</div>
<div class='demo-app-sidebar-section'>
<label>
<input
type='checkbox'
:checked='calendarOptions.weekends'
@change='handleWeekendsToggle'
/>
toggle weekends
</label>
</div>
<div class='demo-app-sidebar-section'>
<h2>All Events ()</h2>
<ul>
<li v-for='event in currentEvents' :key='event.id'>
<b></b>
<i></i>
</li>
</ul>
</div>
</div>
<div class='demo-app-main'>
<FullCalendar
class='demo-app-calendar'
:options='calendarOptions'>
<template v-slot:eventContent='arg'>
<b></b>
<i></i>
</template>
</FullCalendar>
</div>
</div>
</div>
</div>
</div>
</div>
</BreezeAuthenticatedLayout>
</template>
<script setup lang='ts'>
import BreezeAuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import { head, Link } from '@inertiajs/inertia-vue3';
import '@fullcalendar/core/vdom'; // solves problem with Vite
import FullCalendar from '@fullcalendar/vue3';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
import resourceTimelinePlugin from '@fullcalendar/resource-timeline';
import interactionPlugin from '@fullcalendar/interaction';
import axios from 'axios';
// import { INITIAL_EVENTS, createEventId } from '@/components/event-utils.ts';
// import { INITIAL_RESOURCES, createResourceId } from '@/components/resource-utils.ts';
</script>
<script lang='ts'>
export default {
components: {FullCalendar},
data() {
return {
calendarOptions: {
plugins: [
dayGridPlugin,
timeGridPlugin,
resourceTimelinePlugin,
listPlugin,
interactionPlugin // needed for dateClick
],
events: [],
headerToolbar: {
left: 'promptResource prev,next today',
center: 'title',
right: 'resourceMonth,dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
views: {
resourceMonth: {
type: 'resourceTimelineMonth',
buttonText: 'personnel'
}
},
customButtons: {
promptResource: {
text: "+ personnel",
click: function() {
var title = prompt("Name");
if (title) {
calendar.addResource({
title: title
});
fetch("add_resources.php", {
method: "POST",
headers: {
Accept: "application/json"
},
body: encodeFormData({ title: title })
})
.then(response => console.log(response))
.catch(error => console.log(error));
}
}
}
},
initialView: 'resourceTimelineMonth',
editable: true,
selectable: true,
selectMirror: true,
dayMaxEvents: true,
weekends: true,
select: this.handleDateSelect,
eventClick: this.handleEventClick,
eventsSet: this.handleEvents,
/* you can update a remote database when these fire:
eventAdd:
eventChange:
eventRemove:
*/
resourceAreaHeaderContent: 'Personnel',
filterResourcesWithEvents: false,
resourceGroupField: 'building',
resources: [],
// initialEvents: INITIAL_EVENTS,
} as CalendarOptions,
currentEvents: [] as EventApi[],
}
},
created() {
this.getEvents();
this.getResources();
},
methods: {
getEvents() {
axios.get('show-events')
.then(response => {
this.calendarOptions.events = response.data.events;
});
},
getResources() {
axios.get('show-resources')
.then(response => {
this.calendarOptions.resources = response.data.resources;
});
},
handleWeekendsToggle() {
this.calendarOptions.weekends = !this.calendarOptions.weekends // update a property
},
handleDateSelect(selectInfo: DateSelectArg) {
let title = prompt('Please enter a new title for your event')
let calendarApi = selectInfo.view.calendar
calendarApi.unselect() // clear date selection
if (title) {
calendarApi.addEvent({
id: createEventId(),
title,
start: selectInfo.startStr,
end: selectInfo.endStr,
allDay: selectInfo.allDay
})
}
},
handleEventClick(clickInfo: EventClickArg) {
if (confirm(`Are you sure you want to delete the event '${clickInfo.event.title}'`)) {
clickInfo.event.remove()
}
},
handleEvents(events: EventApi[]) {
this.currentEvents = events
},
}
}
</script>
<style lang='css'>
h2 {
margin: 0;
font-size: 16px;
}
ul {
margin: 0;
padding: 0 0 0 1.5em;
}
li {
margin: 1.5em 0;
padding: 0;
}
b { /* used for event dates/times */
margin-right: 3px;
}
.demo-app {
display: flex;
min-height: 100%;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
.demo-app-sidebar {
width: 300px;
line-height: 1.5;
background: #eaf9ff;
border-right: 1px solid #d3e2e8;
}
.demo-app-sidebar-section {
padding: 2em;
}
.demo-app-main {
flex-grow: 1;
padding: 3em;
}
.fc { /* the calendar root */
max-width: 1200px;
margin: 0 auto;
}
.fc-day-today
{
background-color: var(--fc-today-bg-color, rgba(255, 220, 40, 0.15));
}
.fc-day-sat, .fc-day-sun
{
background-color: var(--fc-today-bg-color, rgba(255, 100, 40, 0.15));
}
</style>
Comments
Post a Comment