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.
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.
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/
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.
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;
}
},
Just wondering if anyone had a better way of setting the background of a whole day in fullcalendar js? The problem with my approach is that if you go to another page in the calendar, the table cell background remains altered. I could reset all backgrounds on the fullCalendar('prev') event I guess but that seems messy. Anyone know of a way to render the actual event so that it expands to fill the whole day?
var trainingDiary = $("#training_diary").fullCalendar({
dayClick: function(date, allDay, jsEvent, view) {
var title = prompt('Event Title:');
var dayObj = $(this);
//console.log($(this));
if (title) {
$.ajax({
url: "/app_dev.php/addtrainingday",
global: false,
type: "POST",
data: "dayNo=" + date.getDate(), //returns day of month. getDay() returns day of week
async:true,
success: function(msg) {
trainingDiary.fullCalendar('renderEvent',
{
title: title,
start: date,
allDay: allDay,
backgroundColor:'#cccccc'
},
true // make the event "stick" across calendar pages
)
dayObj.css({'background-color':'#339933','background-image':'url()'})
console.log(msg.valueOf());
} //end ajax success
})
} else {
trainingDiary.fullCalendar('unselect');
}
},
//selectable:true,
//selectHelper:true,
theme: true,
header: {left:'title',
center: '',
right: 'today prev next'},
firstDay:1
});
looks like this can be done with the eventRender() callback.
http://arshaw.com/fullcalendar/docs/event_rendering/eventRender/