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',
});
},

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.

JQuery - JNotify - Click-function issue

I'm using JNotify-plugin to display notifications on my site. I works well, but I need to use a click-function to trigger some events.
Basiclly what happens is:
When I get a new chat-message my JNotify-function triggers and a notification-div shows up. Then when I click that div, I want to trigger my other fuction(the #showNewMsg-click-function). But it won't work. If I use any other div to trigger the #showNewMsg-click-function everything works fine. But not when clicking the JNotify rendered div. So how can a make this work?
Here is my try...
JNotify-fuction:
var newMessage;
$(function () {
newMessage = function () {
jSuccess(
"<div id='showNewMsg'><i class='glyphicon glyphicon-envelope'></i>" + ' New chat msg! Click to read!' + '</div>',
{
autoHide: false,
HideTimeEffect: 500,
LongTrip: 20,
ColorOverlay: '#000',
HorizontalPosition: "center",
VerticalPosition: "bottom",
ShowOverlay: false,
OpacityOverlay: 0.5,
MinWidth: 350
});
}
newMessage();
});
Click-funtion to trigger some other click events:
$("#showNewMsg").click(function () {
$("#chat-toggle").click();
$('a[href="#room1"]').click();
});
JNotify GitHub

Answers my own question, in case somone else is wondering.
Found the answer, by reading the JNotify-documentation a little bit closer.
By adding the onClosed-part, instead of trying to do a separate function with click-events, everything works perfect now.
onClosed fires of when the notification div is closed.
var newMessage;
$(function () {
newMessage = function () {
jSuccess(
"<div id='showNewMsg'><i class='glyphicon glyphicon-envelope'></i>" + ' New chat msg! Click to read!' + '</div>',
{
autoHide: false,
HideTimeEffect: 500,
LongTrip: 20,
ColorOverlay: '#000',
HorizontalPosition: "center",
VerticalPosition: "bottom",
ShowOverlay: false,
OpacityOverlay: 0.5,
MinWidth: 350,
//THIS PART BELOW
onClosed: function () {
$("#chat-toggle").click();
$('a[href="#room1"]').click();
},
});
}
newMessage();
});

Since the notification DIV is being inserted into the DOM dynamically, it never gets bound to that click you set up. Try binding the click in the onCompleted function of jNotify. This function fires after the element is inserted, so you should be able to operate on it.
jSuccess(
"<div id='showNewMsg'><i class='glyphicon glyphicon-envelope'></i>" + ' New chat msg! Click to read!' + '</div>',
{
autoHide: false,
HideTimeEffect: 500,
LongTrip: 20,
ColorOverlay: '#000',
HorizontalPosition: "center",
VerticalPosition: "bottom",
ShowOverlay: false,
OpacityOverlay: 0.5,
MinWidth: 350,
onCompleted : function() {
$("#showNewMsg").click(function () {
alert('You clicked on the notification!');
});
}
}
);
jsFiddle here.

Need to display & as it is in jQuery dialog title, but it is getting converted to &

I need to display & as it is in Jquery dialog box's title bar but it is getting converted to &. So, the idea is to display the value as it is in dialog box title. it is working fine for everything but when I am using & or ' then it is getting converted to & or ' respectively. Below is my code:
var name = '&'
$('#testdialog')
.dialog(
{
title: name,
autoOpen: false,
width: 900,
height: 400,
scrollable: true,
draggable: true,
modal: true,
resizable: false,
open: function (event, ui) {
jQuery.ajaxSetup({ cache: false });
callTest();
},
close: function (event, ui) {
jQuery.ajaxSetup({ cache: false });
$('#testdialog').html('');
},
buttons: {
Ok: function () {
$(this).dialog('close');
}
}
});$('#testdialog').dialog('open');
I want to display the value of name variable as it is. I tried keeping the value in a div and used $("#divID").html() in title attribute but it did not work. Could you please help me on this?

Update your variable to the following and you should be good to go:
var name = '&'
For ' use:
var name = '''

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.