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>

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.

Meteorjs and bootstrap3 modal rare behavior

Im a newbee on Meteorjs and Im testing an implementation of FullCalendar and meteor, and I got a strange problem with this modal in particular. is a modal for edit, It is supposed to trigger when you click on a list of links of events wich I successfuly test on other apps in the pass, I already have another modal for create events on this view and works fine. but in this case, it seems to not attach the js behavior correcly. the modal is displayed, but no effects and not working the close nor the submit buttons.
I wonder if in this particular case, Im losing something or some code tag or the FullCalendar is in conflict?, and for any help Thank you.
here is the demo deply on meteor.com gbelot.todo3.meteor.com
here is the code on gitHub: https://github.com/gbelot2003/meteor-todo-bt3/blob/todo3-icalendar/client/home
and here the controller and Templates code:
Meteor.subscribe("events");
Template.body.rendered = function () {
var fc = this.$('.fc');
this.autorun(function () {
Events.find();
fc.fullCalendar('refetchEvents');
});
};
Template.calendarEdit.helpers({
events: function(){
var fc = $('.fc');
return function (start, end, tz, callback) {
//subscribe only to specified date range
Meteor.subscribe('events', start, end, function () {
//trigger event rendering when collection is downloaded
fc.fullCalendar('refetchEvents');
});
var events = Events.find().map(function (it) {
return {
title: it.date,
start: it.date,
allDay: false
};
});
callback(events);
};
},
options: function() {
return {
id: 'myid2',
class: 'myCalendars',
lang: 'es',
allDaySlot: false,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
axisFormat: 'h:mm a',
timeFormat: {
agenda: 'h:mm a',
month: 'h:mm a',
agendaWeek: 'h:mm a'
},
firstHour: 7,
editable: true,
eventLimit: false,
events: function (start, end, timezone, callback) {
callback(Events.find({}).fetch());
},
defaultView: 'month'
};
}
});
Template.HomeTemplate.onRendered(function(){
var fc = this.$('.fc');
this.autorun(function () {
Events.find();
fc.fullCalendar('refetchEvents');
});
this.$('.datetimepicker').datetimepicker({
format: 'YYYY-MM-DD H:mm:ss'
});
});
Template.HomeTemplate.events({
'submit #new-event': function(event){
event.preventDefault();
var title = event.target.title.value;
var start = event.target.start.value;
var end = event.target.end.value;
var description = event.target.description.value;
Meteor.call("addEvent", title, start, end, description);
event.target.title.value = "";
event.target.start.value = "";
event.target.end.value = "";
event.target.description.value = "";
$("#createEvent").modal("hide");
},
/** this modal works well **/
/***************************/
'click .create': function(e){
e.preventDefault();
$("#createEvent").modal("show");
}
});
Template.HomeTemplate.helpers({
event: function(){
return Events.find();
}
});
Template.eventList.events({
'click .delete': function(event){
event.preventDefault();
id = this._id;
Meteor.call('deleteEvent', id);
},
/**** here is the call for the modal *****/
/** with problems. Did I miss something? */
/******************************************/
'click .update': function(e){
e.preventDefault();
$(".updateModal").show();
}
});
the homeTemplate here
<template name="HomeTemplate" id="home">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2>Todos & FullCalendar Test</h2>
<hr/>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12">
<h3>Full Calendar</h3>
<!--<button class="refresh">Refresh</button>-->
{{> calendarEdit }}
</div>
<div class="col-md-6 col-sm-12">
<h3>Events todo App <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span></h3>
<ul class="list-group">
{{#transition in="zoomIn" out="bounceOut"}}
{{#each event}}
{{> eventList}}
{{/each}}
{{/transition}}
</ul>
</div>
</div>
</div>
{{> createEvent}}
{{> updateModal}}
</template>
This is the Template where you click on link
<template name="eventList">
<li class="list-group-item">
<h4 class="list-group-item-heading">
<div class="row">
<div class="col-sm-10">
<a type="button" href="#" class="update">{{title}}</a>
</div>
<div class="col-sm-2">
<span class=" glyphicon glyphicon-trash text-danger" aria-hidden="true"></span>
</div>
</div>
</h4>
<p>{{start}} | {{end}}</p>
<p class="list-group-item-text">{{description}}</p>
</li>
</template>

this has been solve by using peppelg:bootstrap-3-modal, that package did the job!!!

Rails fullcalendar

So this is the thing when i add event click in my fullCalendar script in events.js.cofee it crashes with turbolink
SyntaxError: [stdin]:7:24: reserved word 'function'
<%=javascript_include_tag 'application', 'data-turbolinks-track' => true %>
Now this is my orginal events.js.coffee without adding eventClick
Note: with this it doesnt crash and works perfectly but my eventClick
doesnt do what i want obviously.
$(document).ready ->
$("#calendar").fullCalendar(
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,agendaDay'
},
events: '/events.json'
)
This is my Javascript with eventClick:
$(document).ready ->
$("#calendar").fullCalendar(
eventClick: function(event) {
var modal = $("#modal");
modal.find(".modal-title").html(event.title);
modal.modal();
},
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,agendaDay'
},
events: '/events.json'
)
With this code it does not work. Why is that?
Note: In case you need to know what modal is.
<div class="modal" role="dialog" id="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">title</h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer"></div>
</div>
</div>

Issue is of function keyword change your js as :
$(document).ready ->
$("#calendar").fullCalendar
header:
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,agendaDay'
events: '/events.json'
eventClick: (event, jsEvent) ->
var modal = $("#modal");
modal.find(".modal-title").html(event.title);
modal.modal();
return
Hope this will help you.