We Keep Coding

FullCalendar event ID - how to get it for deletion of events in with Laravel?

So, I'm working on a calendar app and I'm using Laravel and FullCalendar for this.
I want to be able to delete an event - once I click on the event in the calendar, a modal popup show up with a delete button. In order to delete the event, I must know its ID, but I can't get.
I can get it via JS selectors and display it as a text, but I can't figure out how to get it as a PHP variable so that I could use it in the action parameter of the form.
The reason why I'm doing this in the way I did it is: If I get all the events and "foreach" them into the "events" array of FullCalendar, my source code when the calendar renders would be a mess, full of events and their details. By using this approach, I find that events are not displayed in the source and the page renders more quickly (but I might be mistaken).
The way I display events from the database is as follows:
EventsController
public function getEvents()
{
return Event::where('event_date', '>', '2022-01-01')
->join('hospitals', 'events.hospital_id', '=', 'hospitals.hospital_id')
->select('hospitals.hospital_color', 'hospitals.hospital_max_people', 'event_id', 'event_content', 'event_date', 'user_id')
->get()
->map(fn ($events) => [
'id' => $events->event_id,
'title' => $events->event_content,
'start' => $events->event_date,
'allDay' => true,
'editable' => false,
'backgroundColor' => $events->hospital_color,
'borderColor' => $events->hospital_color,
'hospital_max_people' => $events->hospital_max_people,
'volunteer' => User::find($events->user_id)->first_name .' '. User::find($events->user_id)->last_name
]);
}
Events blade template - FullCalendar settings:
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
editable: false,
droppable: true,
selectable: true,
initialView: 'dayGridWeek',
views: {
dayGridWeek: {
type: 'dayGridWeek',
duration: { weeks: 2 },
buttonText: '4 day'
}
},
header: {
left: 'prev,next today',
center: 'title',
right: 'month,listMonth'
},
themeSystem: 'bootstrap5',
locale: 'en',
firstDay: '1',
contentHeight: 500,
height: 700,
expandRows: true,
events: 'getEvents',
eventClick: function(calendar, jsEvent, view) {
$('#eventDetail').modal("show");
$('#id').html(calendar.event.id);
$('#title').html(calendar.event.title);
$('#start').html(moment(calendar.event.start).format('DD.MM.YYYY'));
$('#volunteer').html(calendar.event.extendedProps.volunteer);
}
});
calendar.render();
});
</script>
Events blade template for showing modal:
<div class="modal fade" id="eventDetail" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="bar" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Event details</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Start: <p id="start"></p>
Volunteer: <p id="volunteer"></p>
Title: <p id="title"></p>
</div>
<div class="modal-footer">
<form method="POST" action="{{ route('calendar.destroy') }}" class="needs-validation" novalidate=""></p>
#csrf
#method('DELETE')
<div class="form-group">
<x-button tabindex="3">
{{ __('Delete event') }}
</x-button>
</div>
</form>
</div>
</div>
</div>
</div>

So, I did it in anoter way; just wanted to post the answer - I added a hidden input field: <input type="hidden" name="id" id="id" value=""> and the value is filled out when a modal opens with addition of this to the original id selector: $('#id').html(calendar.event.id).attr('value', calendar.event.id);
I also had to alter my delete route: Route::DELETE('calendar/destroy/{event_id}'
And that's it. Thank you anyway for your help

How can I add bootstrap 'modal' in fullCalander

Hi I'm making fullCalendar page for giving information of some events.
When I click any date or event, my goal is give specific information.
So I want to add bootstrap's component 'modal' in fullCalendar.
I searched much time.. but I couldn't get solution for my problem.
How can I add modal on my fullCalendar page well.. Please help me.
My codes
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
timeZone: 'UTC',
initialView: 'dayGridMonth',
height: '800px',
events:[
{
title: "'event1",
color : "yellow",
textColor : "black",
start: '2022-06-01 00:00:00',
end: '2022-08-31 24:00:00'
},
{
title: 'event2',
start: '2022-08-17',
end: '2022-08-21'
},
{
title: 'event3',
start: '2022-08-17',
end: '2022-08-21'
},
{
title: 'event4',
start: '2022-08-31',
end: '2022-09-05'
},
{
title: 'event5',
start: '2022-08-26',
color : "lightblue",
textColor : "black",
end: '2022-09-03'
}
],
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
editable: false,
displayEventTime: false
});
calendar.render();
});
</script>
<body>
<div id="calendarBox">
<div id="calendar"></div>
</div>
</body>
</html>
Thank you all for reading my long question.

You can user eventClick option for click event of any of the event.
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
timeZone: 'UTC',
initialView: 'dayGridMonth',
height: '800px',
eventClick: function(info) {
var eventObj = info.event;
console.log(eventObj);
if (eventObj.start) {
//alert('Clicked on ' + eventObj.start);
$('#calender_event').modal('show');
$('.modal-title').html(eventObj.title);
}
},
events:[
{
title: "'event1",
color : "yellow",
textColor : "black",
start: '2022-06-01 00:00:00',
end: '2022-08-31 24:00:00'
},
{
title: 'event2',
start: '2022-08-17',
end: '2022-08-21'
},
{
title: 'event3',
start: '2022-08-17',
end: '2022-08-21'
},
{
title: 'event4',
start: '2022-08-31',
end: '2022-09-05'
},
{
title: 'event5',
start: '2022-08-26',
color : "lightblue",
textColor : "black",
end: '2022-09-03'
}
],
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
editable: false,
displayEventTime: false
});
calendar.render();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar#5.3.1/main.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar#5.3.1/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.bundle.min.js" ></script>
<div id="calendarBox">
<div id="calendar"></div>
</div>
<!-- Modal -->
<div class="modal fade" id="calender_event" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Here will be the body of popup (You can populate it dynamically as well)...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Adding an Event in jQuery Full Calendar with Bootstrap Modal with PHP

I want to enter a Calendar Event details using Bootstrap modal... But that modal is not invoking, when I click on date of a Calendar....
I google for it, it shows me the following code... But it won't work for me...
select: function(start, end, allDay)
{
$('#myModal').modal('show');
},
I followed the following URL Fullcalendar (Arshaw) - Adding an event with modal window
CalendarView
Calling Modal from Calendar
<head>
var calendar = $('#calendar').fullCalendar({
editable:true,
header:{
left:'prev,next today',
center:'title',
right:'month,agendaWeek,agendaDay'
},
events:'load',
selectable:true,
select: function(start, end, allDay)
{
$('#myModal').modal('show');
},
</head>
Modal to call
<div id="calendar">
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×
</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>

You should enclose your scripts on a <script> tag:
<head>
<script>
var calendar = $('#calendar').fullCalendar({
editable:true,
header:{
left:'prev,next today',
center:'title',
right:'month,agendaWeek,agendaDay'
},
events:'load',
selectable:true,
select: function(start, end, allDay)
{
$('#myModal').modal('show');
},
</script>
</head>

Instead of 'select', try using 'dateClick' event when you click on an empty date cell, or 'eventClick' when you click on an event -perhaps you'd like to edit it.

FullCalendar Json string quotes properties

Solved (see N69S's comment)
(Using Laravel)
I want to show my events in an event calendar, but when I try to parse my json it returns this line of code:
"start":"2018-10-01 10:00:00","end":"2018-10-01 13:00:00","title":"Beamer"
I know that FullCalendar requires objects instead of a string, but I can not find a clear answer.
Here is my controller:
public function calendar()
{
$columns = [
'start_time AS start',
'end_time AS end',
'title AS title',
'name AS name'
];
$allBookings = Bookings::get($columns);
$bookings = $allBookings->toJson();
return view('booking.calendar', compact('bookings'));
}
And here is my view:
<script src='{{asset('js/moment.js')}}'></script>
<script src='{{asset('js/jquery.js')}}'></script>
<script src='{{asset('js/jqueryui.js')}}'></script>
<script src='{{asset('js/calendar.js')}}'></script>
<div class="container">
<div class="row">
<div class="col-md-12 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Book Asset</div>
<div class="panel-body">
<div id='calendar' class="calendar"></div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek'
},
editable: true,
selectable: true,
selectHelper: true,
events: [
JSON.parse({!! $bookings !!})
});
</script>
It would be a huge help if you can help me. Thanks in advance!

Use the toJson() method to convert your Collection to string.
you dont need to parse the Json, you can define it directly.
<script type="text/javascript">
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek'
},
editable: true,
selectable: true,
selectHelper: true,
events: {!! $bookings !!}
});
if you want to parse it, pass it as string:
[
JSON.parse('{!! $bookings !!}')
]

Full Calendar with Modal and Multiple event details - Meteor

I'm using the FullCalendar package as well as the below code which is working perfectly:
HTML:
<body>
{{>calendar}}
</body>
</template>
<template name="calendar">
{{#if showEditEvent}}
{{>editEvent}}
{{/if}}
<div class="container">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
<div id="calendar">
</div>
</div>
<div class="col-md-2">
</div>
</div>
</div>
</template>
<template name="editEvent">
<!--Modal Dialog-->
<div class="modal" id="EditEventModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria- hidden="true">x</button>
<h4 class="modal-title">Agenda Item</h4>
</div>
<div class="modal-body">
<label for="title">Item: </label><input type="text" class="title" name="title" value="{{evt.title}}" id="title">
</div>
<div class="modal-footer">
Delete
Save
Cancel
</div>
</div>
</div>
</div>
JS:
// Set session defaults
Session.setDefault('editing_calevent', null);
Session.setDefault('showEditEvent', false);
Template.calendar.showEditEvent = function(){
return Session.get('showEditEvent');
}
Template.editEvent.evt = function(){
// run a query to the database
var calEvent = CalEvents.findOne({_id:Session.get('editing_calevent')});
return calEvent;
}
var updateCalendar = function(){
$('#calendar').fullCalendar( 'refetchEvents' );
}
Template.editEvent.events({
'click .save':function(evt,tmpl)
{updateCalEvent(Session.get('editing_calevent'),tmpl.find('.title').value);
Session.set('editing_calevent',null);
Session.set('showEditEvent',false);
},
'click .close':function(evt,tmpl){
Session.set('editing_calevent',null);
Session.set('showEditEvent',false);
$('#EditEventModal').modal("hide");
} ,
'click .remove':function(evt,tmpl){
removeCalEvent(Session.get('editing_calevent'));
Session.set('editing_calevent',null);
Session.set('showEditEvent',false);
$('#EditEventModal').modal("hide");
}
})
Template.calendar.rendered = function(){
$('#calendar').fullCalendar({
header:{
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
// Event triggered when someone clicks on a day in the calendar
dayClick:function( date, allDay, jsEvent, view) {
// Insert the day someone's clicked on
CalEvents.insert({title:'New Item',start:date,end:date});
// Refreshes the calendar
updateCalendar();
},
eventClick:function(calEvent,jsEvent,view){
// Set the editing_calevent variable to equal the calEvent.id
Session.set('editing_calevent',calEvent.id);
// Set the showEditEvent variable to true
Session.set('showEditEvent', true);
$('#EditEventModal').modal("show");
},
eventDrop:function(calEvent){
CalEvents.update(calEvent.id,
{$set: {start:calEvent.start,end:calEvent.end}});
updateCalendar();
},
events: function(start, end, callback) {
// Create an empty array to store the events
var events = [];
// Variable to pass events to the calendar
// Gets us all of the calendar events and puts them in the array
calEvents = CalEvents.find();
// Do a for each loop and add what you find to events array
calEvents.forEach(function(evt){
events.push(
{ id:evt._id,title:evt.title,start:evt.start,end:evt.end});
})
// Callback to pass events back to the calendar
callback(events);
},
editable:true
});
}
var removeCalEvent = function(id,title){
CalEvents.remove({_id:id});
updateCalendar();
}
var updateCalEvent = function(id,title){
CalEvents.update(id, {$set: {title:title}});
updateCalendar();
}
My two part question is:
A) how do i integrate something like the below in order to have more than one custom fields in the JSON feed?
B) how do I store the resultant data in a new Mongo Collection?
$(document).ready(function() {
$('#bootstrapModalFullCalendar').fullCalendar({
events: '/hackyjson/cal/',
header: {
left: '',
center: 'prev title next',
right: ''
},
eventClick: function(event, jsEvent, view) {
$('#modalTitle').html(event.title);
$('#modalBody').html(event.description);
$('#eventUrl').attr('href',event.url);
$('#fullCalModal').modal();
}
});
});
Thank you.