I have added a custom button to my fullcalendar:
ngOnInit() {
this.calendarOptions = {
customButtons: {
custom1: {
text: 'Add event',
click() {
this.openModal();
}
}
},
height: 600,
editable: true,
eventLimit: false,
locale: 'lt',
header: {
left: 'prev,next today, custom1,custom2',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
events: ''
};}
and on the button click I want to call function:
openModal() {
console.log('opened');
// '<app-add-event></app-add-event>';}
however, I get error zone.js:199 Uncaught TypeError: this.openModal is not a function
at HTMLButtonElement.click (events-calendar.component.ts:20)
I do not know what's wrong. How do you call custom function?
I also tried:
this.calendarOptions = {
customButtons: {
custom1: {
text: 'Pridėti įvykį',
click:
this.openModal
}
}, ... };
In this case console.log(); work but I still get the following error after that. What is wrong here?
Should I declare this function somewhere here?
<ng-fullcalendar #ucCalendar [options]="calendarOptions" (eventClick)="eventClick($event.detail)" (eventDrop)="updateEvent($event.detail)"
(eventResize)="updateEvent($event.detail)" (clickButton)="clickButton($event.detail)"></ng-fullcalendar>
From the fullcalendar documentation:
customButtons: {
myCustomButton: {
text: 'custom!',
click: function() {
alert('clicked the custom button!');
}
}
}
You can see that there is an issue in your custom button declaration for the click() property.
I'm suprised you still have the error referencing this.openModal.
Since you stated you tried click: this.openModal, I would suggest you to give a shot to click : () => console.log('clicked').
If it works, the problem might come from usage of this.
Use a fat arrow function, like so:
this.calendarOptions = {
customButtons: {
custom1: {
text: 'Add event',
click: () => this.openModal()
}
}
}
Related
I am trying to get the click event of the tinymce custom button while building a plugin.
My code snippet looks like:
const openDialog = () => editor.windowManager.openUrl({
type: 'panel',
title: 'Example plugin',
url : '/vendors/tinymce/plugins/gallery/dash.html',
buttons: [
{
type: 'cancel',
text: 'Close'
},
{
type: 'custom',
text: 'Select',
buttonType: 'primary',
onAction: function(api) {
const data = api.getData();
console.log('Custom button clicked');
/* Insert content when the window form is submitted */
editor.insertContent('Title: ' + data.title);
api.close();
}
}
],
Can Anyone help me with this?
I tried reading the tinymce docs where it clearly states onAction is a way to go but it is still not working
const openDialog = () => editor.windowManager.openUrl({
type: 'panel',
title: 'Example plugin',
url : '/vendors/tinymce/plugins/gallery/dash.html',
buttons: [
{
type: 'cancel',
text: 'Close'
},
{
type: 'custom',
text: 'Select',
buttonType: 'primary',
onAction: function(api) {
const data = api.getData();
console.log('Custom button clicked');
/* Insert content when the window form is submitted */
editor.insertContent('Title: ' + data.title);
api.close();
}
}
],
});
tinymce.PluginManager.add('yourparams', function(editor, url) {
editor.addButton('your_button_name', {
text: 'Open Dialog',
icon: false,
onclick: function() {
openDialog();
}
});
});
TinyMCE plugin defined using tinymce.PluginManager.add(), this method add new button in editor toolbar with respect to editor.addButton() method, onclick open the OpenDialog() function when you clicked on it.
I need to call a function when modal close. My code as follows,
function openModal(divName) {
$("#"+divName+"Modal").modal({
overlayClose: false,
closeHTML: "<a href='#' title='Close' class='modal-close'>X</a>",
onShow: function (dialog) {
$('#simplemodal-container').css({ 'width': 'auto', 'height': 'auto', 'padding-bottom': '1000px' });
var tmpW = $('#simplemodal-container').width() / 2
var tmpH = $('#simplemodal-container').height() / 2
$('#simplemodal-container').css({ 'margin-left': tmpW * -1, 'margin-top': tmpH * -1 });
},
close:onClose,
onClose: ModalClose(),
opacity: 50,
persist: true
});
}
I tried two ways to call a function as follows, but both not working
1st way
function onClose() {
alert('called');
}
2nd way
$('.resetbutton').click(function () {
alert('called');
}
Call another function which you want inside ModalClose(), if it user-defined function
From the bootstrap documentations, you can just call the javascript event on closing the modal Javascript.Bootstrap
$('#myModal').on('hide.bs.modal', function (e) {
// do the closing function...
});
And for Kendo Library you can do the close but without the "()" and this will pass the event "e" in the function
close: onClose,
Events in Kendo UI
dialog.kendoDialog({
width: "400px",
title: "Software Update",
closable: true,
modal: false,
content: "<p>A new version of <strong>Kendo UI</strong> is available. Would you like to download and install it now?<p>",
actions: [
{ text: 'Close', action: onCancel },
{ text: 'OK', primary: true, action: onOK }
],
initOpen: onInitOpen,
open: onOpen,
close: onClose,
show: onShow,
hide: onHide
});
function onClose(e) {
show.fadeIn();
kendoConsole.log("event :: close");
}
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
JSFiddle Link:
The bootbox.alert should show up before the bootbox.dialog. I've preloaded all the libraries into the JSFiddle. I want the bootbox.dialog to show up once the bootbox.alert has been clicked on.
Check it out here
Bootbox defined their functions here, and as you can see they include a callback. For example:
bootbox.alert(message, callback)
The callback gives you the option to only run certain code once this line is completed. This solves your problem.
JS
$(document).ready(function () {
$('.begin-game').click(function () {
bootbox.alert("This should show up first", function () {
bootbox.dialog({
message: "Did you pass Go?",
title: "This should go second / last",
buttons: {
// Passed go
success: {
label: "Yes I Passed GO!",
className: "btn-success",
callback: function () {
}
},
// Did not pass go
danger: {
label: "I did not :(",
className: "btn-danger",
callback: function () {
}
},
}
});
});
});
});
The 2nd parameter to bootbox.alert is a function that will be called after the alert is dismissed. Launch the dialog in that function.
$(document).ready(function() {
$('.begin-game').click(function () {
bootbox.alert("This should show up first", showDialog);
function showDialog() {
bootbox.dialog({
message: "Did you pass Go?",
title: "This should go second / last",
buttons: {
// Passed go
success: {
label: "Yes I Passed GO!",
className: "btn-success",
callback: function() {
}
},
// Did not pass go
danger: {
label: "I did not :(",
className: "btn-danger",
callback: function() {
}
}
}
});
}
});
});
Ok i got this code:
$(document).ready(
function() {
$(".dialogDiv").dialog({
autoOpen: false,
modal: true,
position: [50, 50],
buttons: {
"Print page": function() {
alert("Print");
},
"Cancel": function() {
$(this).dialog("close");
}
}
}
);
$('.ui-dialog-buttonpane button:contains("Print page")').attr("id", "dialog_print-button");
$(".dialogDiv").parent().appendTo($('form'));
}
How do I assign or set a new function to the click event?
$("#dialog_print-button"). ???
Edit, This works:
$("#dialog_print-button").unbind("click").click(
function () {
alert("new function that overide the old ones")
}
)
Tried to find how to do in the jQuery documentation but I think it's hard to find around in the documentation. Especially when new to javaScript and the jQuery libary.
Edit, A fast way to get help is to go to jQuery irc channel :D
I think this would help:
$(".dialogDiv").dialog("option", "buttons", {
"Print page": function() { /* new action */ },
"Cancel": function() { $(this).dialog("close"); }
});
Because buttons property sets all the buttons, you have to include cancel button handler.
$("#Print page").click(function () {
...
});
Or maybe it should be
$("#dialog_print-button").click(function () {
...
});
jQuery UI dialog buttons now supports the "id" attribute natively.
$("#dialog-form").dialog({
autoOpen: false,
height: "auto",
width: 300,
buttons:
[
{
text: "Create Revision",
id: "btnCreateRev",
click: function () {
//code for creating a revision
}
},
{
text: "Cancel",
id: "btnCancel",
click: function () { $(this).dialog("close"); },
}
]
});
You put the code within the button section:
...
buttons: {
"Print page": function() {
//here you execute the code or call external functions as needed
}
Once you click the button on the Dialog, that code is automatically invoked.
Therefore you insert there directly the code that implements your logic.