We Keep Coding

Only allow editable = true on specific events in FullCalendar

I'm trying to get a FullCalendar to only allow event Resize if two specific ids match, but I can't get it to work.
Essentially, I'm loading FullCalendar within a component. This component has a unique ID represented as an event on the calendar. Once the calendar loads to the page, how can I make sure to only set editable: true to that specific event? See below in eventRender for my pseudo code of what I wish to achieve
loadDataToCalendar: function(component, salesAppointments, resExceptions) {
let myEventid;
var ele = component.find('calendar').getElement();
$(ele).fullCalendar({
eventResize: function(event) {
component.set("v.startTime", event.start._d);
component.set("v.endTime", event.end._d);
component.set("v.showSaveButton", true)
},
eventRender: function(event) {
if (event.id === myUniqueIdHere) {
event.editable = true // this is what I'm trying to achieve
}
},
header: {
left: 'prev, next, today',
center: 'title',
right: 'month,agendaWeek,agendaDay',
},
eventOverlap: false,
defaultView: 'agendaWeek',
editable: false,
eventLimit: true,
eventSources: [salesAppointments, resExceptions],
timezone: 'local',
});
},
So by default, I want editable to be false. When the calendar renders and has a matching ID, I need to set that specific event to editable: true. How would I achieve this? I've tried using eventRender without
success.

You should do the compare on the server side of where you are generating the event.
Fullcalendar (and most all such programs) can't change things 'on the fly' as you are trying to do - you often will have to set things on the server first and these programs can render, etc. as per the settings you give.
So, in your event, you should set editable = true for the one(s) you want. https://fullcalendar.io/docs/event-object
You can't (well, not easily - there might be a very round-about way but I don't think it worthy of trying) do this in the 'render' but is simple if you do the check on the server side.
When I say 'server side', I mean 'the data coming into fullcalendar'. As you have these in "salesAppointments" and "resExceptions", you may be able to manipulate this a bit in javascript - but, again, not in the fullcalendar section - something like:
loadDataToCalendar: function(component, salesAppointments, resExceptions) {
let myEventid;
$(salesAppointments).each(function(event)){
if (event.id === myUniqueIdHere) {
event.editable = true;
}
}
$(resExceptions).each(function(event)){
if (event.id === myUniqueIdHere) {
event.editable = true;
}
}
var ele = component.find('calendar').getElement();
$(ele).fullCalendar({
eventResize: function(event) {
component.set("v.startTime", event.start._d);
component.set("v.endTime", event.end._d);
component.set("v.showSaveButton", true)
},
header: {
left: 'prev, next, today',
center: 'title',
right: 'month,agendaWeek,agendaDay',
},
eventOverlap: false,
defaultView: 'agendaWeek',
editable: false,
eventLimit: true,
eventSources: [salesAppointments, resExceptions],
timezone: 'local',
});
},

FullCalendarJS: changing select event color

I'm working on FullcalendarJS and I want a darker color when I am selecting a date/time on a week view
as you can see from the image above, when I am selecting a date range, the highlight is not that visible I want it to be visible like the blue one highlighted dated today.
I tried to change the css on the select event property but it only changes when after the selection.
here's my code:
$('.calendar').fullCalendar({
header : {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
timezone: 'local',
defaultView : 'agendaWeek',
allDaySlot : false,
eventOverlap: false,
select: function(start, end, event, view, resource) {
$(".fc-highlight").css("background", "#00004c");
}
})

Instead of changing the color of the fc-highlight CSS class during the select event, just declare the following in your CSS in order to override it:
.fc-highlight {
background-color: #00004c;
}
Also, make sure to set selectable: true in your fullCalendar config. since it defaults to false - according to the API documentation - and must be true if you want to select by clicking or dragging (I am pointing this out since I can't see it in the provided code snippet).
Example:
$('.calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
timezone: 'local',
defaultView: 'agendaWeek',
allDaySlot: false,
eventOverlap: false,
selectable: true
});
As you can see, the select event function is not needed anymore unless you want to perform any action at that point.
Live Demo: http://jsfiddle.net/4nb4gpnL/

Can I style an eventClickLimit popover in FullCalendar

I'm using fullcalendar v2.3.1 and I have eventLimits set to 1, so more then 1 event will show up as a link. I click on the link and a popover shows displaying the events in it. Can I style this popover? or do I have to create my own popover and style it myself? I would like to change it's position from center of day to bottom and maybe change a few other things.
$('#fullcalendar').fullCalendar({
header: {
left: 'prev,next', //today',
center: 'title',
//right: 'month,agendaWeek,agendaDay'
right: ''
},
defaultView: 'month',
editable: true,
allDaySlot: false,
selectable: true,
slotMinutes: 15,
eventLimit: 1,
//eventLimit: true, // for all non-agenda views
//views: {
// agenda: {
// eventLimit: 2 // adjust to 6 only for agendaWeek/agendaDay
// }
//},
events: '/ManageSpaces/GetDiaryEvents/',
//eventLimitClick: function (cellInfo, jsEvent) {
// var s = cellInfo.segs;
//},
eventClick: function (calEvent, jsEvent, view) { //function (data, event, view) {
//var s = cellInfo.segs;
$("#eventDetails.collapse").collapse('toggle');
},
dayClick: function (data, event, view) {
$(this).popover({
html: true,
placement: 'bottom',
container: 'body',
title: function () {
return $("#day-popover-head").html();
},
content: function () {
return $("#day-popover-content").html();
}
});
$(this).popover('toggle');
if ($calPopOver)
$calPopOver.popover('destroy');
$calPopOver = $(this).popover('show');
}
});

Usually and that doesn't sound like it would be difficult. Unfortunately the js above doesn't tell us much as they obviously hook into the fullcalendar plugin which takes care of the html generation. You'll need to see what html it creates.
To figure this stuff out I usually use ie or firefoxe's dev tools or firebug (hit f12 when viewing the results on the site). They have element inspectors which will let you click on the generated html elements and see what css hooks are created and the styles that apply to the element from which style sheets or inline styles. Some basic familiarity with these get me through most of these kind of issues.
If you are able to extract the generated html at least for the section you're interested in or provide a link then that would help heaps.

disable eventClick to google events

Reading through the documentation on FullCalendar, I thought I could find a way to disable clicking an event, leading the browser to the original Google Calendar. But for unknown reasons the script I use does not disable the browser to open a new window.
I am quite new to script, so I may have easily made a mistake.
This is what I tried to use but does not function, yet...
<script>$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
weekNumbers: 'true',
header: {
left: 'title',
center: '',
right: 'today,prev,next,',
},
editable: 'true',
eventSources: [
{url: 'https://www.google.com/ca...',
className: 'tehuur',
},
{url: 'https://www.google.com/cale...',
className: 'verhuurd',
},
],
eventClick: function(event) {
if (event.url) {
window.open(event.url);
return false;
}
}
})
});
Can anybody point me in the right direction to disable the eventClick. Thanks for your help.
Ben

eventClick: function(event) {
if (event.url) {
if (event.url.includes('google.com')){
return false;
}
console.log(event.url.includes('google.com'));
}
}

Just remove the eventClick function. Fiddle here
This line was opening a new window to google calendar: window.open(event.url);
$(document).ready(function() {
$('#calendar').fullCalendar({
weekNumbers: 'true',
header: {
left: 'title',
center: '',
right: 'today,prev,next,',
},
editable: true,
events: 'http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic',
eventClick: function() {
return false;
}
});
});
Edit:
If you want to redirect instead of opening a new window you should use:
window.location.href = event.url;
instead of window.open(event.url).

Remove elements from fullCalendar using qtip2

I am currently trying to add a qtip2 to my fullCalendar window so I could display the qtip and have a link/button to remove the selected event on the calendar, unfortunately I am having trouble with that. Here is what my fullCalendar looks like:
$('#calendar_main').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView:'agendaWeek',
minTime:8,
height:600,
maxTime:20,
editable: true,
allDaySlot:false,
theme: true,
firstDay: 1,
selectable: true,
selectHelper: true,
eventRender: function(event, element) {
element.qtip({
content: "<a onlick='alert('Remove')> Remove me</a>",
title: {
text: 'RDV',
button: false
}
},
position: {
at: 'right-bottom'
},
show: {
solo: true
},
hide: false,
style: 'ui-tooltip-light ui-tooltip-rounded'
});
}
});
I believe the issue sits within the content attribute of qtip, but not sure why this does not work. In this case I am just trying to display an alert, but it is not working (The Qtip displays, but when I click on "remove me", nothing happen. Once I get that working, I will be able to replace the Alert with my own JS function that will remove the selected event in my DB.
ps: I am working with Adobe Air, not sure if this could be an issue.

Well for one, you need to escape the single quotations to form the string in the alert.
And second, you forgot to close the alert with a single quote in the tag. Hope it helps...
'<a onlick="alert(\'Remove\');"> Remove me</a>'
This is how it should look.

probably couse you are using call procedure for qTip but in real you are using qTip2. Use in real (source script) old version qTip 1.00xxx and all will be ok - I did do it.

I am actually doing the same thing and I can remove it fine. The only issue I run into is when the event is destroyed the qtip sticks around so running into an issue where eventDestroy never gets called.
Anyway I call calendarEventRender:
$('#calendar').fullCalendar({
firstDay: 1,
header: {
left: '',
center: '',
right: ''
},
defaultView: 'agendaWeek',
allDaySlot: false,
columnFormat: {
week: 'ddd'
},
selectable: true,
selectHelper: true,
editable: true,
droppable: true,
eventRender: function(event, element) {
calendarEventRender(event, element);
}
});
Here are my functions:
function calendarEventRender(event, element)
{
element.qtip({
content: {
title: { text: event.title },
text: '<button type="button" onclick="removeEvent(' + event.id + ')">Delete</button>'
},
show: {
event: 'click',
solo: true
},
hide: {
event: 'unfocus click'
}
});
}
function removeEvent(eventId, userId)
{
//Delete the event
$('#calendar').fullCalendar('removeEvents', eventId);
}
And it all seems to work. I don't have time to go through and grab your code, but hopefully this helps. Also in the future if you can get a http://jsfiddle.net/ of it up not working people can test and fix it a lot easier.
Hmm so I created a jsfiddleto test it all: http://jsfiddle.net/MusicMonkey5555/pZdyt/1/
and it seems to not work in there. My guess is that it is jquery or qtip or fullcalendar version. That is the one issue with jsfiddle is getting the correct version of everything. The one I have working on my site are the following:
//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js
//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css
//cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.min.js
//cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.css
//cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.print.css
//cdnjs.cloudflare.com/ajax/libs/qtip2/2.1.1/jquery.qtip.min.js
//cdnjs.cloudflare.com/ajax/libs/qtip2/2.1.1/jquery.qtip.min.css
So I would suggestion trying to use those versions and see if it works. Most often it is because jquery has a bug and you need a different version.