FullCalendar: remove events on button click - javascript

I am trying to remove a dynamically selected event from FullCalendar.
when this event is rendered it will be also displayed in the table with a delete button at the end of every row.
what i want to do is when I click the delete button, it will also delete the event on the calendar.
I can remove the row from the table but not in the calendar.
here is my code for selecting the event
var eventID = 0;
$('.calendar').fullCalendar({
select: function(start, end, event, view, resource) {
if(start.isBefore(moment())) {
$('.calendar').fullCalendar('unselect');
swal('Ooops!','You cannot select past date/time!','error')
}else{
$('#reserved_date').val(moment(start).format("YYYY-MM-DD"))
$('#end_time').val(moment(end).format("hh:mm A"));
$('#start_time').val(moment(start).format("hh:mm A"));
$('#newScheduleModal').modal({
show : true,
backdrop: 'static',
keyboard: false
});
eventData = {
id: eventID +1,
title: 'Lesson Schedule',
start: start,
end: end,
};
}
$(".fc-highlight").css("background", "red");
},
events: obj,
eventRender:function( ev, element ) {
eventID++;
$('#sched_data').append('<tr class="tb-row">'+
'<td>'+moment(ev.start).format('MMM. DD, YYYY')+'</td>'+
'<td>'+moment(ev.start).format('hh:mm A')+'</td>'+
'<td>'+moment(ev.end).format('hh:mm A')+'</td>'+
'<td><button class="btn btn-danger btn-del btn-xs" data-id"'+ev._id+'"><i class="fa fa-times"></i></button></td></tr>'
)
},
})
here's the code for rendering the event to calendar
$('#btn-reserve').click(function(){
$('.calendar').fullCalendar('renderEvent', eventData, true);
})
and here's my code for deleting an event
$('body').on('click','.btn-del',function(){
$(this).closest('.tb-row').remove();
$('.calendar').fullCalendar('removeEvents', $(this).data('id'));
})

If you to delete an event with the eventClick you can try like this :
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, /*OPTIONS*/);
calendar.on('eventClick', function (info) {
calendar.getEventById(info.event.id).remove();
});
});

I already did it,
My code:
$('body').on('click','.btn-del',function(){
$(this).closest('.tb-row').remove();
$('.calendar').fullCalendar('removeEvents', $(this).data('id'));
})
What it should be
$('body').on('click','.btn-del',function(){
var del_btn = $(this);
del_btn.closest('.tb-row').remove();
$(".calendar").fullCalendar('removeEvents', function(event) {
return event.id == del_btn.data('id');
});
})
the second parameter should be a function and not just the plain id.

Related

Bootstrap table buttons firing onlick multiple times

Global.Js file
function operativeEvents() {
$('.tableButton').off().click(function (e) {
var $this = $(this),
tableId = $this.parents('table').attr('id'),
$table = $('#' + tableId),
index = $this.closest('tr').index(),
data = $table.bootstrapTable('getData');
//global variable to retrieve the data of the current row
window.currentRow = data[index];
buttonActions($this.attr('id'), $this.data('myid'));
});
The operativeEvents function binds when the bootstrap table body is rendered.
This is done with the onPostBody event. https://bootstrap-table.com/docs/api/events/
Local.cshtml
This contains a switch case to handle the button clicks
function buttonActions(id) {
switch (id) {
case 'bookButton':
bookMatch(currentRow.id);
break;
}
}
function bookMatch(currentRow) {
bootbox.dialog({
message: '<h4 class="text-center">Are you sure?</h4>',
buttons: {
cancel: {
label: 'Cancel',
className: "btn btn-danger"
},
confirm: {
label: 'Ok',
className: 'btn btn-success',
callback: function () {
alert('testing ' + currentRow);
return;
updateCall({
url: "/api/MatchesApi/BookMatch/" + currentRow.id,
tableRefresh: true,
serverSideMessaging: true,
});
}
}
},
});
}
For some reason when I click the button it opens the Bootbox.dialog multiple times.
I have tried using the off() method and also played around with event bubbling. Can someone please give me some advice? Thanks :)

how to change the parameter names "title", "start" and "end" in the fullcalendar jquery

In jquery's fullcalendar script I'd like to change the keywords "title" "start" and "end" by the column names that are in my database table.
the fullcalendar work when i change in the database table the name of the colums :
i changed "name" by "title" , "date_start" by "start and "date_end" by "end", ok it's work ,but I would like to do the opposite.
$(document).ready(function() {
var calendar = $('#calendar').fullCalendar({
editable: false,
events: "{{ route('products') }}",
displayEventTime: false,
eventRender: function(event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
eventClick: function(event) {
$.getJSON("{{ route('products') }}", function(user) {
var convertToTableau = Array.from(Object.values(user));
console.log(convertToTableau);
var us = $.grep(convertToTableau, function(v) {
return v.id == event.id;
console.log(event.id);
});
$("#firstname").text(us[0].title);
$("#idpilote").text(" Id : " + us[0].id);
$("#firstname").text(" Name : " + us[0].title);
$("#metier").text(" Job : " + us[0].profession);
});
}
});
});
</script> ```
You can't change what fullCalendar expects as the default property names for the important fields in your events (well, you could, if you modified the fullCalendar source code, but you don't want to do that).
However, if for some reason you don't want to change your server/database code to match (but why not, exactly??) you can create a simple mapping between the two via the eventDataTransform callback in fullCalendar. This function runs once for every event which is loaded into fullCalendar, and allows you to update the properties of the event object before fullCalendar starts processing it. In here you can copy data from the server-generated property names to the ones which fullCalendar recognises.
Here's an example:
eventDataTransform: function(event) {
event.title = event.name;
event.start = event.date_start;
event.end = event.date_end;
return event;
}

eventRender callback renders all events, how to render only a single event

So I am simply adding an event (created a json for it with id, start, etc.)
I tried the following:
$('#calendar').fullCalendar('renderEvent', my_event);
$('#calendar').fullCalendar('updateEvent', my_event);
These make a callback as following:
eventRender: function(event, element) {
console.log('in event Render callback');
console.log(event);
}
eventRender renders all the events in the calendar when adding a single event. So I can see my added event on the calendar immediately, and the 2 console log statements are printed for all events including the new one.
How can I add only this new event (with a new id) on the calendar such that only this new event is rendered (eventRender callback for only new event) and not all the events?
I'm afraid it is not possible by default. You can try to do something like this:
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#button_id').click(function() {
var newEvent = {
title: 'NEW EVENT',
start: new Date(y, m, d),
render: true
};
$('#calendar').fullCalendar('renderEvent', newEvent, 'stick');
});
$('#calendar').fullCalendar({
editable: true,
eventRender: function(event, element) {
if (event.render) {
element.addClass('test');
}
event.render = false;
}
});
});
Code above will add "test" css class to the last added event only. Maybe this will help you somehow.
Fiddle

renderEvent that doesn't work in fullcalendar

I am trying to add an event in FullCalendar.io through a function javascript.
I have tried in two ways.
Recalling to end page a function or with a click.
I don't receive error but in my calendar the event is not added.
<div id='calendar'></div>
<script language="javascript">
id='13-17-1'
title='TextOK'
start= '2016-04-07T08:30:00'
end= '2016-04-07T09:30:00'
test=addCalanderEvent(id, start, end, title)
function addCalanderEvent(id, start, end, title)
{
var eventObject = {
title: title,
start: start,
end: end,
id: id
};
$('#calendar').fullCalendar('renderEvent', eventObject, true);
alert("OKOK")
}
</script>
<input type="button" onClick="addCalanderEvent('13-17-1','TITLE','2014-09-19T10:30:00','2016-04-19T10:30:00')">
Here is a sample based off your code to add an event on button click
https://jsfiddle.net/Lra2535n/
/* fullcalendar 2.6.1, moment.js 2.12.0, jQuery 2.2.1, on DOM ready */
$('#calendar').fullCalendar({});
$('#addEvent').on('click', function() {
// Random event id for demo...
var id = Math.random().toString(26).substring(2, 7);
addCalendarEvent(id, '2016-04-08', '2016-04-11', 'An added event ' + id);
});
function addCalendarEvent(id, start, end, title) {
var eventObject = {
id: id,
start: start,
end: end,
title: title
};
$('#calendar').fullCalendar('renderEvent', eventObject, true);
}

Fullcalendar js eventClick on dynamically added events

I have the following js:
!function ($) {
$(function(){
// fullcalendar
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var addDragEvent = function($this){
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($this.text()), // use the element's text as the event title
className: $this.attr('class').replace('label','')
};
// store the Event Object in the DOM element so we can get to it later
$this.data('eventObject', eventObject);
// make the event draggable using jQuery UI
$this.draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
};
$('.calendar').each(function() {
$(this).fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: 'today,month,agendaWeek,agendaDay'
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar !!!
drop: function(date, allDay) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
}
,
events: [
],
eventClick: function(event) {
alert('win');
}
});
});
getEvents();
});
}(window.jQuery);
function getEvents()
{
$.ajax({
type: 'POST',
url: '/Calendar/findEvents',
dataType: 'json',
data: {
request: 'ajax'
},
success: function (data)
{
if(data.length > 0)
{
for (index = 0; index < data.length; ++index)
{
var d = new Date(data[index]['end']);
if(data[index]['is_online'] === 1)
{
var myevent = {title: 'Forløb: '+data[index]['academy_name'].toUpperCase()+' \n Modul: '+data[index]['module_name']+ '\n Type: E-learning',start: new Date(d.getFullYear(), d.getMonth(), d.getDate())};
}
else
{
var myevent = {title: 'Forløb: '+data[index]['academy_name'].toUpperCase()+' \n Modul: '+data[index]['module_name']+ '\n Type: Kursus'+ '\n Lokation: '+data[index]['location']+'\n Underviser: '+data[index]['mentor'],start: new Date(d.getFullYear(), d.getMonth(), d.getDate())};
}
$('.calendar').fullCalendar( 'renderEvent', myevent, true);
}
}
}
});
}
As you can see when the calendar is loaded i am starting to load events (through ajax) into the calendar.
Now what i want to do is simply add an eventListner on each of the elements.
In the documentation it sates the following:
eventClick: function(event) {
if (event.url) {
window.open(event.url);
return false;
}
}
Which i attempted with just a simple alert (as you can see in the code:
eventClick: function(event) {
alert('win');
}
However when i click my items nothing happens.
Can anyone tell me what i am missing?
I know you are loading events through AJAX, but have you tried returning an array of objects (the events) to the events array in your instantiation of the calender? Right now you are passing an empty array, so the plugin is not assigning any elements as 'events', and thus isn't assigning any click handlers.
events: [ getEvents()
],
eventClick: function(event) {
alert('win');
}
});
And then inside your getEvents() function call, rather than render the events, you should just return the event objects.
The suggested way to load events with an ajax call + some manipulation on the data you receive is to use your function as an event source (link to the doc) :
$(this).fullCalendar({ ...
events: function(start, end, tz, callback) {
$.ajax({
type: 'POST',
url: '/Calendar/findEvents',
dataType: 'json',
data: {
request: 'ajax'
},
success: function (data) {
// build an array of event objects with the data
var events = ...
// use the "callback" argument to load them in the grid :
callback(events);
}
});
},
...
});
note : the signature of the function depends on the version of fullcalendar you are using. Versions prior to version 2.0 do not have the tz argument (again, check the doc).
FullCalendar is processing your listeners with no events. Your ajax is loaded after the initialization of your calendar. You could keep your current code and add the listener on eventRender.
$('#calendar').fullCalendar({
eventRender: function(event, element, view){
element.click(function(){
alert('test');
})
}
});
I would probably suggest loading the events as suggested in the other answers though, but this should work.
$('#calendar').fullCalendar({
eventRender: function(event, element, view){
element.click(function(){
alert('test');
});
$("#calendar .fc-helper-container").find("a").remove();
}
});

Categories