Might be really simple, but when i drop the droppable event, i want to automatically click on it
$('#calendar').fullCalendar({ droppable: true, drop: function(date) { //the command go here! this.click or something like that } });
Try this:
eventDrop: function(event, delta, revertFunc) {
$(this).trigger('click');
},
eventClick: function(calEvent, jsEvent, view) {
console.log('event clicked');
}
https://jsfiddle.net/ewojadd3/
Related
Receiving a warning for "Attempting to call a FullCalendar method on an element with no calendar."
It happens when calling $('#calendar_' + calendarId).fullCalendar('clientEvents');
I do have multiple "FullCalendar" implementations on the same page. Would this effect anything?
EDIT
Here is how I am creating the FullCalendar. The above line is just referencing the events from the calendar with nothing special going on.
$('#calendar_' + id).fullCalendar({
dayClick: function(date, jsEvent, view) {
$('#calendar_' + id).fullCalendar('gotoDate', date);
$('#calendar_' + id).fullCalendar('changeView', 'agendaDay');
},
eventClick: function(calEvent, jsEvent, view) {
var newUrl = calEvent.url.replace("%26", "&");
window.location = newUrl;
return false;
},
header: {
left: 'month,agendaWeek,agendaDay',
center: 'title',
right: 'today prev,next'
},
select: function(start, end, allDay) {
var view = $('#calendar_' + id).fullCalendar('getView');
if (view.name == 'agendaDay') {
window.location.replace('/Create?start=' + start._d.toJSON() + '&end=' + end._d.toJSON() + '&isUTC=true&redirectToCalendar=true');
}
},
selectable: true,
selectHelper: true,
timezone: 'local',
viewRender: getEvents
});
EDIT 2
See the screen capture to show it working on this line that I have already discussed. I have 3 calendars on the page. The first works as expected with no warning. The second and third show a warning, but the events are retrieved.
I'm trying to write a simple app based on FullCalendar package. When I run the code, none of the events is rendered, however right after clicking a day, an event gets shown on that day. If I click another day right after, it will erase the last one, and show the most recent one.
CalEvents = new Mongo.Collection("calevents");
// to be used later to handle editing
if (Meteor.isClient) {
Session.setDefault("event2edit", null);
Session.setDefault("showEditWindow", false);
Session.setDefault("lastMod", null);
Router.route('/', function () {
this.render('home');
});
Router.route('/calendar', function () {
this.render('calendar');
});
// runs when page has been rendered
Template.calendar.rendered = function () {
$('#calendar').fullCalendar({
events: function (start, end, timezone, callback) {
var events = [];
calEvents = CalEvents.find();
calEvents.forEach(function (evt) {
events.push({
id: evt._id,
title: evt.title,
start: evt.start,
end: evt.end
});
});
//alert(events.length);
callback(events);
},
dayClick: function(date, jsEvent, view){
CalEvents.insert({title:'NEW', start:date, end:date});
Session.set('lastMod', new Date());
updateCalendar();
},
eventClick: function (calEvent, jsEvent, view) {
}
});
}
Template.calendar.lastMod = function () {
return Session.get('lastMod');
}
}
var updateCalendar = function(){
$('#calendar').fullCalendar( 'refetchEvents' );
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
}
Is it a bug? Or is my code missing something? Thank you.
Try to pack your
$('#calendar').fullCalendar({
into a variable, like
calendar = $('#calendar').fullCalendar({
and add the following closing of your calendar function:
}).data().fullCalendar
and insert the Tracker.autorun function at the end of your Template.calendar.rendered block:
Template.calendar.rendered = function () {
calendar = $('#calendar').fullCalendar({
events: function (start, end, timezone, callback) {
var events = [];
calEvents = CalEvents.find();
calEvents.forEach(function (evt) {
events.push({
id: evt._id,
title: evt.title,
start: evt.start,
end: evt.end
});
});
//alert(events.length);
callback(events);
},
dayClick: function(date, jsEvent, view){
CalEvents.insert({title:'NEW', start:date, end:date});
Session.set('lastMod', new Date());
updateCalendar();
},
eventClick: function (calEvent, jsEvent, view) {
}
}).data().fullCalendar
Tracker.autorun(function(){
allReqsCursor = CalEvents.find().fetch();
if(calendar) calendar.refetchEvents();
});
};
Additionally, for increase in Performance:
For-Loop vs forEach Loop
You might consider using the for-loop instead of forEach-loop as former is 10 to 40 times faster, especially with pre-cached parameters i and len:
forEach Loop: (Originally)
calEvents = CalEvents.find();
calEvents.forEach(function(evt) {
events.push({
id: evt._id,
title: evt.t,
start: evt.s,
end: evt.e,
});
});
callback(events);
For loop: (10 to 40 times faster with pre-cached parameters i and len)
calEvents = CalEvents.find().fetch();
var len = calEvents.length, i = 0; //pre-cache the i and len
for(i; i < len; i++){
events.push({
id: calEvents[i]._id,
title: calEvents[i].t,
start: calEvents[i].s,
end: calEvents[i].e,
});
};
callback(events);
Hope this helps.
I'm trying to make the selected day in FullCalender.io highlighted (similarly to how the current day is).
Following FullCalendar - Highlight a particular day in week view I've tried the following, which basically re-renders the calendar on a click, and highlights the cell who's date matches the clicked date .
dayRender: function(date, cell)
{
var moment = $('#calendar').fullCalendar('getDate');
if (moment.get('date') == date.get('date'))
{
$(cell).addClass('fc-state-highlight');
}
else
{
$(cell).removeClass('fc-state-highlight');
}
},
dayClick: function (date, allDay, jsEvent, view) {
$('#calendar').fullCalendar('render');
},
But it's not doing anything. :-(
you can use this piece of code in v1.x
$('#calendar').fullCalendar({
dayClick: function (date, allDay, jsEvent, view) {
$(".fc-state-highlight").removeClass("fc-state-highlight");
$(jsEvent.target).addClass("fc-state-highlight");
}
});
v2.X
$('#calendar').fullCalendar({
dayClick: function (date, jsEvent, view) {
$(".fc-state-highlight").removeClass("fc-state-highlight");
$(jsEvent.target).addClass("fc-state-highlight");
}
});
CSS .fc-state-highlight {background:red;}
Note: this can be achived by other ways also by making use of data-date attribute of cell and date parameter of function dayClick
$('#calendar').fullCalendar({
dayClick: function (date, jsEvent, view) {
$(".fc-state-highlight").removeClass("fc-state-highlight");
$("td[data-date="+date.format('YYYY-MM-DD')+"]").addClass("fc-state-highlight");
}
});
Building on from the other answer, this will do what you need:
dayClick: function (date, jsEvent, view) {
$('.fc-day').each(function () {
$(this).removeClass("fc-state-highlight");
});
$("td[data-date=" + date.format() + "]").addClass("fc-state-highlight");
},
v2.X
$('#calendar').fullCalendar({
dayClick: function (date, jsEvent, view) {
$(".fc-state-highlight").removeClass("fc-state-highlight");
$(this).addClass("fc-state-highlight");
}
});
CSS .fc-state-highlight {background:red;}
One quick workaround is to use selectable:
var calendar = $('#calendar');
calendar.fullCalendar({
selectable: true
})
Even tough this option Allows a user to highlight multiple days or timeslots by clicking and dragging (source: https://fullcalendar.io/docs/selection/selectable/), it has the side effect of highlighting the selected day if you only click on one day.
I'd like to be able to filter events based on adding and removing eventSources. I can't find a good example of this being done.
.fullCalendar( 'addEventSource', source )
.fullCalendar( 'removeEventSource', source )
I'd like to have check boxes that toggle the execution of those functions. I can't seem to get the functionality working though.
$( "#target" ).click(function() {
$('#calendar').fullCalendar( 'removeEventSource', 'Event1' );
});
Here is my full code:
$('#calendar').fullCalendar({
header: {
left: 'title',
center: 'prev,next',
right: 'month,agendaWeek,agendaDay,today'
},
eventLimit: {
'agenda': 4, // adjust to 6 only for agendaWeek/agendaDay
'default': true // give the default value to other views
},
eventSources: [
{
title: 'Event1',
url: "http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic"
},
{
url: 'https://www.google.com/calendar/feeds/vineyardcincinnati.com_o6jncckm5ka55fpragnbp4mk9c%40group.calendar.google.com/public/basic'
},
{
url: "https://www.google.com/calendar/feeds/ht3jlfaac5lfd6263ulfh4tql8%40group.calendar.google.com/public/basic"
}
],
eventClick: function(event) {
// opens events in a popup window
window.open(event.url, 'gcalevent', 'width=700,height=600');
return false;
},
loading: function(bool) {
if (bool) {
$('#loading').show();
}else{
$('#loading').hide();
}
}
});
Here is the full code I used to get this functionality:
HTML:
<form id="#calendar_list">
<input class="checkbox" type="checkbox" checked>Event Group 1<br>
<input class="checkbox1" type="checkbox" checked>Event Group 2<br>
<input class="checkbox2" type="checkbox" checked>Event Group 3<br>
</form>
Javascript:
$(".checkbox").change(function() {
if(this.checked) {
$('#calendar').fullCalendar( 'addEventSource', 'https://www.google.com/calendar/feeds/vineyardcincinnati.com_o6jncckm5ka55fpragnbp4mk9c%40group.calendar.google.com/public/basic' );
}
else{
$('#calendar').fullCalendar( 'removeEventSource', 'https://www.google.com/calendar/feeds/vineyardcincinnati.com_o6jncckm5ka55fpragnbp4mk9c%40group.calendar.google.com/public/basic' );
}
});
Load FullCalendar : Use following given code to load FullCalendar. create a jquery function like LoadCalendar and put below code in this function and call this function on document.ready function in jquery.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
locale: '#companyCulture',
defaultDate: Date.now(),
defaultView: 'month',
navLinks: true, // can click day/week names to navigate views
editable: false,
eventLimit: true, // allow "more" link when too many events
dayClick: function (date, allDay, jsEvent, view) {
//$("#lblDate").html('' + moment(date).format("MMMM DD,YYYY hh:mm") + '');
$("#lblDate").html('' + moment(date).format("MMMM DD,YYYY hh:mm A") + '');
$("#hdRDate").val(moment(date).format());
emptyEventDetails(date);
// $("#AddEventModel").modal();
},
eventClick: function (calEvent, jsEvent, view) {
$.ajax({
type: "GET",
async: false,
cache: false,
url: "#Url.Action("GetEventById", "Events")",
data: {
Eventid: calEvent.id
},
success: function (data) {
emptyEventDetails();
//$.each(data.data, function () {
// alert(this["Title"]);
// var color = 'orange';
// var Title = this["Title"];
// //addCalanderEvent(this["EventID"], this["EventDate"], Title, color);
//});
}
});
//$("#lblDate").html('' + calEvent.EventDate + '');
//$("#hdRDate").val(calEvent.EventDate);
//$("#AddEventModel").modal();
}
});
Add a Event: Use the below code to add a event in FullCalendar
var eventObject = {
title: title,
start: moment(start).format("MMMM DD,YYYY hh:mm A"),
end: moment(end).format("MMMM DD,YYYY hh:mm A"),
id: id,
color: colour
};
$('#calendar').fullCalendar('renderEvent', eventObject, true);
OR
$('#calendar').fullCalendar( 'addEventSource', newSource); //Add a new source
Remove all Events: I'm trying to remove all the event sources in the fullcalendar plugin. I'm currently using a combination of
$('#calendar').fullCalendar('removeEvents') //Hide all events
$('#calendar').fullCalendar('removeEventSource', $('.Source').val()) //remove eventSource from stored hidden input
OR
$('#Calendar').fullCalendar( 'removeEvents').fullCalendar('removeEventSources'); //Removes all event sources
Is it possible to make only events which are allday selectable in fullcalendar?
I added
eventDrop: function (event, dayDelta, minuteDelta, allDay, revertFunc) {
if (event.allDay==false)
revertFunc();
},
which causes the event to snap back in place if it is not an allDay event. But is it possible to not make non-allday events not selectable at all?
You can use eventRender to disable the event if it not an allDay event. http://arshaw.com/fullcalendar/docs/event_rendering/eventRender/
eventRender: function(event, element) {
if(event.allDay == false) {
event.editable = false;
}
},