Develop Reference

FullCalendar v4 add onclick eventListener to events displayed on eventLimitClick popover

I have a custom development with FullCalendar v4 js and I'm encountering a problem with eventLimitClick method.
When I click on it I want all events displayed inside popover to have a custom onclick eventListener for me to display aditional information of this current event in another custom popup.
This is my method so far:
eventLimitClick : function(info){
info.segs.forEach(function(seg){
seg.el.querySelector('div.fc-content').addEventListener('click', function(event){
console.log('event definition', event);
});
});
return "popover";
}
But this is adding the listener to the elements I already see in my calendar. I also tried with hiddenSegs instead of segs but it's not working.
So is there any way to achieve this without having to create a custom popup with all the events?
** EDIT ** [included code]
calendar object
{
locale : 'en',
plugins : ['dayGrid','timeGrid','list','interaction'],
header : {
left : 'prev,next today',
center : 'title',
right : 'dayGridWeek, dayGridMonth, dayGridDay'
},
allDaySlot : false,
aspectRatio : 1.8,
displayEventTime : false,
editable : false,
navLinks : true,
eventLimit : true,
views : {
dayGridMonth : {
eventLimit : 2
}
},
events : this.eventLIST,
datesRender : this.calendarviewRender,
eventClick : this.calendareventClick,
eventRender : this.calendareventRender
}
datesRender, eventClick and eventRender functions:
calendarviewRender = (info) => {
//set current and end dates
this.endDate = info.view.activeEnd;
this.currentDate = info.view.activeStart;
//retrieve fresh event/task info
this.refreshCalendar();
}
calendareventClick = (info) => {
this.info = {id : info.event.id,
tipo : info.event.extendedProps.tipo,
tipoObj : info.event.extendedProps.tipoObj,
isClosed : info.event.extendedProps.isClosed && info.event.extendedProps.isClosed !== null ? (info.event.extendedProps.isClosed === 'false' ? false : true) : false,
campos : info.event.extendedProps.lCamposInfo};
//allow second button
this.info.displaysecondbutton = !this.info.isClosed && this.info.tipoObj === 'Task';
//allow popup display
this.allowpopup = true;
info.jsEvent.preventDefault();
}
calendareventRender = (info) => {
let html = "<i class='fa fa-" + info.event.extendedProps.icon + " fa-lg'></i>";
info.el.querySelector('div.fc-content').style.cssText = 'height: 100%;';
//if month view apply padding
if(info.view.type.includes('dayGrid')) info.el.querySelector('div.fc-content').classList.add('slds-p-around_x-small');
//center elements
info.el.querySelector('div.fc-content').classList.add('slds-align_absolute-center');
//append icon
info.el.querySelector('div.fc-content').innerHTML = html;
}
I also removed eventLimitClick.

Based on your comments i see you were working with lightning-web-components.
I was facing same issue as you when working with LWC on salesforce.
I was able to solve this by editing main.js in daygrid package and add delay when Popover was getting hidden.
Here is snippet of code
function Popover(options) {
var _this = this;
this.isHidden = true;
this.margin = 10; // the space required between the popover and the edges of the scroll container
// Triggered when the user clicks *anywhere* in the document, for the autoHide feature
this.documentMousedown = function (ev) {
if (_this.el && !_this.el.contains(ev.target)) {
setTimeout(function () {
_this.hide();
}, 1000);
}
};
this.options = options;
}
functions starts in line 100 of main.js.
I was using Fullcalendar v4

Dynamically add UI Elements in CKEditor Dialog

I'm trying to trigger a callback to dynamically populate a CKEditor dialog with checkboxes when the dialog is opened. I've read other solutions that use iframes, but this won't work for me because the dialog needs to be populated based on other elements on the same page.
Here is what I have so far. There are no errors, but the dialog is just empty when it opens. I expect the addContents function to fill in the dialog. I've confirmed that dialog.definition.contents does include the contents and elements that I want, but it's just not filling in the actual dialog. What am I missing?
(function() {
CKEDITOR.plugins.add( 'embeds', {
icons: 'embed',
init: function(editor) {
var self = this,
elements = [];
CKEDITOR.dialog.add('EmbedsDialog', function (instance) {
return {
title : 'Embeds',
minWidth : 550,
minHeight : 200,
contents: [],
onShow: function() {
var dialog = this,
elements = [];
$('#embeds-fields tr').each(function() {
var title = $(this).find('input[type=text]').val(),
url = $(this).find('input[type=url]').val();
if(url != "") {
elements.push({
label : "embed",
title : url,
type : 'checkbox'
});
}
});
dialog.definition.removeContents('embeds');
dialog.definition.addContents({
id : 'embeds',
expand : true,
elements : elements
});
},
}; // return
});
editor.addCommand('Embeds',
new CKEDITOR.dialogCommand('EmbedsDialog', {
allowedContent: 'a[*](*)'
})
);
editor.ui.addButton('Embeds', {
label : 'Embeds',
command : 'Embeds',
toolbar : 'embeds'
});
} // init
}); // add
})(); // closure

Based off of this example, I ended up with this solution, where "main" is the ID of the original content.
CKEDITOR.on('dialogDefinition', function(ev) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName == 'EmbedsDialog') {
var main = dialogDefinition.getContents('main');
$('#embeds-fields tr').each(function() {
var title = $(this).find('input[type=text]').val(),
url = $(this).find('input[type=url]').val();
if(url != "") {
main.add({
type : 'checkbox',
label : title,
});
}
});
}
});

Insert iframe in div from onOk of CKEDITOR.dialog

I use CKEditor and I have got problem for insert iframe in div element in my editor when the user click on the OK button in my Dialog. This does not work. When the user clicks on the button does nothing happen (I have no error message). So he should shut my popup and insert a div containing my iframe inside my editor
Can you help me ?
this is my code
:
CKEDITOR.dialog.add( 'postVideoDialog', function( editor ) {
return {
title : 'Add Video',
minWidth : 400,
minHeight : 80,
contents :
[
{
id : 'video',
label : 'Add Video',
elements :
[
{
type : 'text',
id : 'url',
label : 'Enter a URL from Vimeo :',
validate : function()
{
var url = this.getValue();
var regex1=/^(http:\/\/)vimeo.com\/[0-9]{3,}$/g;
var regex2=/^(http:\/\/)player.vimeo.com\/video\/[0-9]{3,}$/g;
if(regex1.test(url) || regex2.test(url)){
return true
}else{
alert("Url incorrect");
return false;
}
},
required : true,
commit : function( data )
{
data.url = this.getValue();
}
},
]
}
],
onOk : function()
{
var dialog = this,
data = {},
iframe = editor.document.createElement( 'iframe' ),
div = editor.document.createElement('div');
this.commitContent( data );
var regex=/^(http:\/\/)vimeo.com\/[0-9]{3,}$/g; //http://vimeo.com/25329849
if(regex.test(data.url)){
var idVideo = data.url.match(/[0-9]{3,}$/g);
data.url = "http://player.vimeo.com/video/" + idVideo;
}
div.setAttribute('class', 'video');
iframe.setAttribute( 'src', data.url + "?byline=0&portrait=0&color=ffffff");
iframe.setAttribute( 'width', '620' );
iframe.setAttribute( 'width', '349' );
iframe.setAttribute( 'frameborder', '0');
div.insertElement(iframe); //problem is here !
editor.insertElement(div);
}
}; });

Found it..
Read the documentation please: docs.ckeditor.com/#!/api/CKEDITOR.dom.element
Elements don't have a insertElement method. This is a method of the editor try this:
iframe.appendTo(div); //problem is solved here!
editor.insertElement(div);
Instead of your previous code:
div.insertElement(iframe); //problem is here !
editor.insertElement(div);

Setting AJAX = "false" in this code

I have this code for the previous and next buttons but when I use them they do not return any data unless I refresh the page. Is it as simple as adding some code to this to turn ajax to false or is there a better solution? And how should this be handled? Thanks.
$links.each(function)
{
var reverse = $(this).closest("." + prevLIClass).length;
$(this).buttonMarkup(
{
"role" : "button",
"theme" : "d",
"iconpos" : "notext",
"icon" : "arrow-" + (reverse ? "1" : "r")
})
.bind("vclick", function()
{
$.mobile.changePage($(this).attr("href"),{reverse : reverse});
return false;
});
});

How to remove MenuItemTitle from TinyMCE?

I have enabled the 'fontsizeselect' plugin in tinyMCE. My question is how do I remove the header (title) of the drop-down menu?
Edit:
I've tried removing it using JQuery .remove(), but after that the height of whole list is calculated wrong.
The second option I tried was:
http://www.tinymce.com/wiki.php/API3:method.tinymce.ui.DropMenu.remove
But that just went wrong and "fontsizeselect.remove(title)" (analogically to .add) makes error to whole tinyMCE - "missing : after property id". Problably it is completly bad method to do this.
The third option was editing tiny_mce\themes\advanced\editor_template_src.js line 467:
c = ed.controlManager.createListBox('fontsizeselect', {title : 'advanced.font_size', onselect : function(v) {...}
but seems, that TinyMCE developers thought, that every drop-down must have title/header

SOLVED:
before initialization of MCE we have to override the menu rendering function
(function(tinymce) {
var DOM = tinymce.DOM, Event = tinymce.dom.Event, each = tinymce.each, Dispatcher = tinymce.util.Dispatcher, undef;
tinymce.create('tinymce.ui.ListBoxNoTitle:tinymce.ui.ListBox', {
renderMenu : function() {
var t = this, m;
m = t.settings.control_manager.createDropMenu(t.id + '_menu', {
menu_line : 1,
'class' : t.classPrefix + 'Menu mceNoIcons',
max_width : 250,
max_height : 150
});
m.onHideMenu.add(function() {
t.hideMenu();
t.focus();
});
/* m.add({
title : t.settings.title,
'class' : 'mceMenuItemTitle',
onclick : function() {
if (t.settings.onselect('') !== false)
t.select(''); // Must be runned after
}
});
*/
each(t.items, function(o) {
// No value then treat it as a title
if (o.value === undef) {
m.add({
title : o.title,
role : "option",
'class' : 'mceMenuItemTitle',
onclick : function() {
if (t.settings.onselect('') !== false)
t.select(''); // Must be runned after
}
});
} else {
o.id = DOM.uniqueId();
o.role= "option";
o.onclick = function() {
if (t.settings.onselect(o.value) !== false)
t.select(o.value); // Must be runned after
};
m.add(o);
}
});
t.onRenderMenu.dispatch(t, m);
t.menu = m;
}
});
})(tinymce);
And with this comment on "m.add" You just have to add
tinyMCE.init({
setup : function(ed) {
ed.onBeforeRenderUI.add(function(ed){
ed.controlManager.setControlType('listbox', tinymce.ui.ListBoxNoTitle);
});
}
});
this setup to standard initialization of tinyMCE. So, it can be done without editing source files.