We Keep Coding

FullCalendar: remove events on button click

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.

How can I set up rule for selectable FullCalendar

I am trying to set up a rule for selectable attribute. The rule should be like this:
selectable attribute is true for future weeks, otherwise false
However, I could not find how can I check dates in calendar option. I tried some ways but javascript does not accept these ways. Here is my current option. Any helps ?
$(document).ready(function () {
$('#calendar').fullCalendar({
//some options
//some options
selectable: true,
selectHelper: true,
select: function (start, end) {
var title = loadRequired("ff8081815c776701015c7788151d06b4",
"activity",
"#Session["token"].ToString()");
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
},
});
});

I could be mistaken but because selectable is just a bool and doesn't accept a callback I don't think there is a nice way of doing this. I would probably set it to true and then catch it in the select callback.
In the select callback you could check if the selected date is in the future and if it is just call unselect and return from the function.

You can do either/both of these:
1) In the "select" callback, check the start/end dates. If they're before the date that you want to allow, then don't continue to process the code, just return false.
2) You could also set the validRange property so that events can't even be dragged onto the areas you choose to exclude: https://fullcalendar.io/docs/current_date/validRange/

I checked situation on select atrr.
select: function (start, end) {
var check = end.unix()*1000;
var today = #weekdays[6]*1;
if(today > check)
{
$('#calendar').fullCalendar('unselect');
}else
{
$('#calendar').fullCalendar('select');
var title = loadRequired("ff8081815c776701015c7788151d06b4",
"activity",
"#Session["token"].ToString()");
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
}
},
now I can do what I want on functionality. However, I can still select the area on calendar, the area's color changed to blue, then it goes my check point, and if situation is false: unselect atrr is activated.
Is there any way to do this ? Actually selectable attribute should not be true when the area is in the past and should be true on future weeks

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

fullcalendar add events dynamically

I'm trying to create events in my full calendar dynamically.
I have:
$('#calendar').fullCalendar({
viewRender: function (view) {
var h;
if (view.name == "month") {
h = NaN;
}
else {
h = 2500; // high enough to avoid scrollbars
}
$('#calendar').fullCalendar('option', 'contentHeight', h);
},
lang: 'fr',
events: [
{
title: '8 présents',
start: data[0]
},
{
title: '8 excusés',
start: data[1]
},
{
title: '8 excusés',
start: '2015-01-08'
},
{
title: '8 présents',
start: '2015-01-08'
},
],
dayClick: function (date, jsEvent, view) {
window.location.replace(Routing.generate('dateChoisie', {date: date.format()}));
}
})
I have a var data, which is an array that contains all the dates of the events. I want to insert this in the events in the same way I inserted data[0], data[1], etc, but dynamically for all the dates.
I have tried to do a for:
events: [
for (var i = 0, max = data.Lenght; i < max; i++) {
{
title: '8 présents',
start: data[i]
},
}
{
title: '8 excusés',
start: data[1]
},
{
title: '8 excusés',
start: '2015-01-08'
},
{
title: '8 présents',
start: '2015-01-08'
},
],
But it doesn't work inside the list.
Anybody know how I can do this?

after rendering the full calendar you can add events dynamically.
var event={id:1 , title: 'New event', start: new Date()};
$('#calendar').fullCalendar( 'renderEvent', event, true);

I was searching for a while and I have found an possibility.
It was very easy at the end...
I let this here, maybe anybody is interested in.
for (var i in data)
var monthSource = new Object();
monthSource.title = data[i]+' présents';
monthSource.start = i; // this should be date object
monthSource.end = new Date(y, m, d); //to now
month[a] = monthSource;
a++;
}
$('#calendar').fullCalendar({
viewRender: function (view) {
$('#calendar').fullCalendar( 'removeEvents');
$('#calendar').fullCalendar('addEventSource', month);
}

Source: http://fullcalendar.io/docs/event_data/addEventSource/
You can dynamically add an event source. An Event Source is an url which can for example return json data.
Maybe it might be sufficient for you to fire the refetch event after you changed the event data.
.fullCalendar( 'refetchEvents' )
Source: http://fullcalendar.io/docs/event_data/refetchEvents/

(The accepted solution will lose the event if you do anything complicated; the event added is ephemeral and will spontaneously disappear if you blink too hard. This solution is robust and will work if you do more complicated things.)
Support for persistent events is a bit inelegant. You may have to dump, reload, AND render the entire calendar state...:
var CAL, EVENTS;
$(document).ready(function() {
// set up calendar with an EventSource (in this case an array)
EVENTS = [...];
$('#calendar').fullCalendar({...});
// calendar object
CAL = $('#calendar').fullCalendar('getCalendar');
// extend object (could be its own function, etc.)
CAL.refresh = function() {
CAL.removeEvents();
CAL.addEventSource(EVENTS);
}
// finish setting up calendar
CAL.refresh();
});
Demo:
EVENTS.pop(); // remove last event
refresh(); // refresh calendar; last event no longer there
see https://stackoverflow.com/a/18498338

How about doing as it says on the website example:
https://fullcalendar.io/docs/renderEvent-demo
So add the event, and then use whatever you want to add that to the backend.
Or you can add the event to backend, then return the database's new id and then add it to the timeline, so you'll have the ids right.
Or update the id with return message, whatever rocks your boat.

although it is not specified on the fullcalender site, it is necessary to assign a value to the "allday" parameter to be able to add new events dynamically. If you set this value to "false", it will not add the event to the AllDay row. If you do "true" it will add to the AllDay row.
var event = {
title: 'New Event',
start: Date(Date.now()),
backgroundColor: App.getLayoutColorCode('purple'),
allDay: false
}
jQuery('#calendar').fullCalendar('renderEvent',event,true);
or
var originalEventObject = jQuery(this).data('eventObject');
var copiedEventObject = jQuery.extend({}, originalEventObject);
copiedEventObject.title = "New Event";
copiedEventObject.start = date;
copiedEventObject.className = jQuery(this).attr("data-class");
copiedEventObject.backgroundColor = App.getLayoutColorCode('purple');
copiedEventObject.allDay = false;
jQuery('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

Simple examples of adding events can be found in the example-projects repo. There's currently examples for angular, vue, react, and bootstrap.
Wanted to mention this for anyone not using jquery who stumbles upon this

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();
}
});