Develop Reference

How to add icon to fullcalendar custom button

I am using Fullcalendar V5 with an Asp.net app.
I would like to add a refresh button to the fullcalendar toolbar. But instead of using text in the button, I would like to show an icon.
Is this possible?
Can an icon be used here?
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'dayGridMonth custom1',
center: 'title',
right: 'prevYear,prev,next,nextYear'
},
customButtons: {
custom1: {
text: 'custom 1',
icon: 'fa fa-recycle' //PUT ICON HERE? this is not working
click: function() {
alert('clicked custom button 1!');
}
},

fancybox not reopening after closing it

We're using fancybox 2 to launch a donation process in our app. Upon completion, the modal closes and opens up another "thank you" modal. We're seeing some odd behavior if you close that "thank you" modal and click on the "Donate" button again. The modal background overlay briefly appears and then disappears, and the modal doesn't show up. But, if you click it again, it works just fine.
I haven't been able to find any references to this happening to anyone else. We have a live demo where you can see the behavior here: https://demo.donordrive.com/index.cfm?fuseaction=donorDrive.participant&participantID=8558#donate
(The donation modal should open automatically, but if not, click "Support Me") Make a donation using a test credit card number (e.g., 4111111111111111) -- obviously, this won't actually charge you anything.
The relevant javascript code starts at line 162 if you view source. (I'll also include it at the end of this post).
I thought maybe it was because I wasn't explicitly closing any fancybox modals prior to opening the new ones, but that didn't change anything. So, I'm open to suggestions on what may be causing this. It's very weird.
Thanks!
Relevant JS:
<script type="text/javascript">
jQuery(function($) {
openExpressDonate = function() {
$.fancybox({
closeBtn: false,
closeEffect: 'none',
helpers : {
overlay : {
closeClick: false,
css: {'background-color': 'rgba(0, 0, 0, 0.60'},
locked: true
}
},
href: 'https://demo.donordrive.com/index.cfm?fuseaction=expressDonate.modalparticipant&ParticipantID=8558',
margin: 0,
maxWidth: 400,
height: 'auto',
openEffect: 'none',
padding: 1,
scrolling: 'no',
type: 'iframe'
});
}
$('.js-express-donate').on('click', function(e) {
e.preventDefault();
if (window.ga) {
ga('send', {
hitType: 'event',
eventCategory: 'Express Donate - Participant',
eventAction: 'Donation Started',
eventLabel: 'Event 1183'
});
}
openExpressDonate();
});
if (location.hash && location.hash == '#donate') {
$('.js-express-donate').click();
}
resizeExpressDonateModal = function() {
$.fancybox.update();
}
showExpressDonateThankYou = function(target, data) {
$.fancybox({
afterShow: function () {
fancyParent = $('.fancybox-wrap').parents(); // normally html and body
fancyParent.on('click.modalThanks', function () {
$.fancybox.close();
fancyParent.off('click.modalThanks');
});
$('.fancybox-wrap').on('click', function (event) {
// prevents closing when clicking inside the fancybox wrap
event.stopPropagation();
});
},
helpers : {
overlay : {
closeClick: false,
css: {'background-color': 'rgba(0, 0, 0, 0.60'},
locked: true
}
},
href: 'https://demo.donordrive.com/index.cfm?fuseaction=donorDrive.modal' + target + 'ExpressDonateThanks&donorID=' + data.values.donorID + '&CSRFToken=' + data.values.CSRFToken + '&n=' + data.values.isNewConstituent,
margin: 0,
maxWidth: 400,
minHeight: 300,
modal: 1,
openEffect: 'none',
padding: 1,
scrolling: 'no',
type: 'iframe'
});
}
});
</script>

We've solved this. A fresh set of eyes found that we had an explicit fancybox.close() call that was firing when clicking on the "thank you" modal's parent (a holdover from another feature where we have such a modal, but the user can't re-open it from that same page). We removed that and it appears to be fixed.

TinyMCE 4 custom file picker return value from popup

I would like to implement custom file picker to TinyMCE 4, but i dont know how to return value from second popup window.
Here is my code:
textTiny.settings.file_picker_callback = function(callback, value, meta) {
imageFilePicker(callback, value, meta);
};
var imageFilePicker = function (callback, value, meta) {
tinymce.activeEditor.windowManager.open({
title: 'Photo picker',
url: "files-list.html",
width: $(window).width() * 0.8,
height: $(window).height() * 0.8,
buttons: [{
text: 'Insert',
onclick: function () {
var file_src = $(".photo.selected").attr("href");
callback(file_src);
tinymce.activeEditor.windowManager.close();
}
},
{
text: 'Close',
onclick: 'close'
}],
});
};
I will appreciate any advice.
Thank you.

I think you could start by going to TinyMce website. They have a demo tab where you can find a code snippet for implement basic local file picker here

How to change the text dynamically from a customButton on FullCalendar?

I cannot figure out how to change the text of a customButton after it has been initialized. From the sample code below, the text is set to "custom!". But I want to change it dynamically? Is there a jQuery method call that I can achieve this?
$('#calendar').fullCalendar({
customButtons: {
myCustomButton: {
text: 'custom!',
click: function() {
alert('clicked the custom button!');
}
}
},
header: {
left: 'prev,next today myCustomButton',
center: 'title',
right: 'month,agendaWeek,agendaDay'
}
});

You're almost there already. The docs say that when defining custom buttons, the click parameter is:
a callback function that is called when the button is clicked. Accepts a single argument, a jqueryEvent.
So just use it, for example:
customButtons: {
myCustomButton: {
text: 'custom!',
click: function() {
$(this).text('Updated text!');
}
}
},
You'll probably want to pass in some dynamic data, maybe about the currently displayed month or week or whatever. For example (this is just an example, maybe you don't need anything like this):
customButtons: {
myCustomButton: {
text: 'custom!',
click: function() {
var view = $('#calendar').fullCalendar('getView');
$(this).text('First visible day is ' + view.start.format('YYYY-MM-DD'));
}
}
},

In vanilla JS :
customButtons: {
showMore: {
text: moreHoursTranslation,
click: function (e) {
if (this.classList.contains("more-hours")) {
this.classList.remove("more-hours");
this.innerText = moreHoursTranslation;
this.closest(".fc").querySelector(".fc-view").style.height =
"200px";
this.closest(".fc").querySelector(".fc-view").style.overflow =
"auto";
return;
}
this.classList.add("more-hours");
this.innerText = lessHoursTranslation;
this.closest(".fc").querySelector(".fc-view").style.height = "auto";
this.closest(".fc").querySelector(".fc-view").style.overflow = "auto";
},
},
},

You can use following code to add button with event binding.
$('.fc-toolbar .fc-left').prepend(
$('<button type="button" class="fc-button fc-state-default fc-corner-left fc-corner-right">+ room</button>')
.on('click', function() {
var title = prompt('Room name');
if (title) {
$('#calendar').fullCalendar(
'addResource',
{ title: title },
true // scroll to the new resource?
);
}
})
);
Reference From Bellow Link.
Link

Get element that called qTip?

I would like to get the element that called the qtip popup. In the documentation here it lets you set the position. I want to set the position using a jquery selector like $(this).find('.icon'). The problem is that this isn't the element that called the qtip (I think it's window).
Does anyone know how I can get the handle that called it (like it would if I set target to false)?
Thanks.
In the qtip source code I found this:
if(config.position.target === false) config.position.target = $(this);

Here's the solution I came up with and it seems to work. There probably is a better way to do it if I modified the qtip script but I want to leave that alone.
$(".report-error").qtip(
{
content: 'test content',
position:
{
adjust:
{
screen: true
},
target: false, //it is changed in the 'beforeRender' part in api section. by leaving it as false here in the qtip it will set it as the position I need using $(this)
corner:
{
target: 'bottomMiddle',
tooltip: 'topRight'
}
},
show:
{
when:
{
event: 'click'
}
},
style:
{
name: 'cream',
tip:
{
corner: 'topRight'
},
padding: 0,
width: 400,
border:
{
radius: 5,
width: 0
}
},
hide:
{
when:
{
event: 'unfocus'
}
},
api:
{
beforeRender: function() { //get the position that qtip found with $(this) in it's script and change it using that as the start position
this.options.position.target = $(this.elements.target).find('.icon');
this.elements.target = this.options.position.target; //update this as well. I don't actually know what it's use is
}
}
});
It's working on the site now at http://wncba.co.uk/results/