I am working on fullcalendar-angular component where in I have a custom button called filter, on click of it the modal/dialog/menu-items should open just like dropdown. So how do we implement this under customButton click function? is there a way to add HTML and how? as shown in image.
calendarOptions:CalendarOptions = {
initialView:'dayGridMonth',
themeSystem:'bootstrap',
nowIndicator:true,
//showNonCurrentDates:false,
fixedWeekCount:false,
customButtons:{
myCustomBtton: {
bootstrapFontAwesome:'fas fa-sliders-h',
click: function(click,element){
//how do i add the code here`enter code here`
},
},
},
headerToolbar:{
left:'prev,next today',
center:'title',
right:'dayGridMonth,dayGridWeek,dayGridDay,listMonth myCustomBtton'
},
fullcalendar-angualr custombutton image
I'm a novice at Angular, but I was able to create a dropdown by just injecting some HTML for a dropdown via a function called after the eventDidMount hook.
https://fullcalendar.io/docs/event-render-hooks
I'm happy to give you some sample CSS/JS to show hide the dropdown, too if it's useful to you.
Related
I have angular project in which I have included custom js in index.html . I have following code in custom.js file for navigation menu open and close for mobile devices. active class not getting applied in mobile view. I searched but did not found reason/solution of it.
$(document).ready(function () {
// Navigation Toggle
$("#nav-icon").click(function () {
$(this).toggleClass("active");
$(".close_overlay").toggleClass("active");
$(".navigation").toggleClass("active");
});
$(".close_overlay").click(function () {
$("#nav-icon").removeClass("active");
$(".close_overlay").removeClass("active");
$(".navigation").removeClass("active");
});
$("header .singleMenu").click(function () {
$("#nav-icon").removeClass("active");
$(".close_overlay").removeClass("active");
$(".navigation").removeClass("active");
});
});
If above code is included in header component ts file. It works. But that's not correct way of doing this.
How can add active class in mobile view when click events as above?
please guide and help. thanks.
I'm new to html and Angular2. Any help with this problem would be much appreciated.
I am placing a form component inside a ng2-modal and I would like the modal to close when the form returns a boolean from an event.
The form is for adding a new class to a database. Its first usage is on another page where it is not inside a modal.
There, upon clicking cancel/submit in the component, I have it return true and then redirect to another url.
For the new implementation I want the modal to close when the form returns true. The problem is that the save/cancel buttons are in the component containing the form. So I can't just use the modal's click event to close it.
Here is my current code:
<modal #addNewClassModal>
<modal-header>
<h4 class="modal-title"><i class="fa fa-cube"></i> Add a new class</h4>
</modal-header>
<modal-content>
<div>
<add-new-class (closeModal)="finishAddingNewClass($event)">
</add-new-class>
</div>
</modal-content>
</modal>
My problem is that I can't figure out how to get the modals close() method to rely on the boolean.
I've tried putting closeModal="addNewClassModal.close()" in different places and switching around the syntax but its not working and I can't find anything online.
You can pass a reference to addNewClassModal to your AddNewClass component:
<add-new-class [modal]="addNewClassModal">
</add-new-class>
And in your AddNewClass component add Input() for modal:
import { Input } from '#angular/core';
import { ModalDirective } from 'ng2-bootstrap/components/modal';
#Input()
modal: ModalDirective; // you can also set type to any instead of ModalDirective
Then in your component you can close modal with hide() function:
this.modal.hide();
I have a custom directive placed on a Kendo UI treeview widget.
It seems to be working fine side-by-side, except that I'm trying to simply display the custom icons next to the tree node which is clicked on (see sample image below).
So my directive is data-toggle-me, placed next to the Kendo k-template directive as follows :
<div class="reports-tree" kendo-tree-view="nav.treeview"
k-options="nav.treeOptions"
k-data-source="nav.reportsTreeDataSource"
k-on-change="nav.onTreeSelect(dataItem)" >
<span class="tree-node" k-template data-toggle-tree-icons>{{dataItem.text}}</span>
</div>
and the directive code here inserts some custom icons next to the tree node when a user clicks on that tree node :
.directive('toggleMe', function ($compile) {
// Kendo treeview, use the k-template directive to embed a span.
// Icons appear on Click event.
return {
restrict: 'AE',
transclude: true,
template: '<span ng-show="nav.displayIcons" id="myIcons" class="reptIcons" style="display:none;width:50px;align:right;">' +
' <a title="add new folder" ng-click="nav.addAfter(nav.selectedItem)"><i class="fa fa-folder-open"></i></a> ' +
'<a title="add report here" ng-click="nav.addBelow(nav.selectedItem)"><i class="fa fa-plus"></i></a> ' +
'<a title="remove" ng-click="nav.remove(nav.selectedItem)"><i class="fa fa-remove"></i></a> ' +
'<a title="rename" onclick="showRename(this);"><i class="fa fa-pencil"></i></a>' +
'</span>',
link: function (scope, elem, attrs) {
var icons = elem.find("#myIcons");
elem.on('click', function (e) {
$('.reptIcons').css('display', 'none');
icons.css("display", "inline");
icons.css("margin-left", "5px");
});
}
}
})
My biggest problem at this point is getting the icons to appear on the treenode which is clicked on. Then once the user clicks on a different node, the icons will only render again on the newly-clicked node.
This fiddle represents a partially-working example but the icons are appearing on every single treenode - click tree item to show icons
**** UPDATED TREE IMAGE - All child nodes now show icons (not what I want) ****
I'm not sure to understand your issue, you should try to reduce the code to the minimum and have a snippet/jsfiddle that works.
If all you want is not trigger click events when $scope.disableParentClick is set to true, simply add
elem.on('click', function (e) {
// Do not execute click event if disabled
if (!$scope.disableParentClick) { return; }
...
});
Now that seems all not very angular friendly to me. You should externalize your HTML in either the template or templateUrl of your directive, potentially adding to it a ng-if="displayTemplate" which would only display the node when a click would set $scope.displayTemplate = true;
Also, instead of listening for click events this way, you should use the ng-click directive. Everything is doable with directives. I can give more information when you better understand your problem: I suspect you are not approaching it the right way.
UPDATE: if all you want is display the icons list of the clicked element, you could do it way easier. You actually don't need the toggle-me directive, but even if you keep it you can solve all your troubles the angular-way, which is by using ng-click, ng-repeat, etc. Please have a look at the following jsFiffle to see one way of doing that. There are many other ways, but really try using ng-click to avoid troubles:
http://jsfiddle.net/kau9jnoe/
Events in the DOM are always bubbling up. That is a click on a link would trigger an onclick handler on every element up the hierarchy, e.g. also the body element. After all the click happened within body.
The same is true for your directive. Any click within your element triggers its event handler. To circumvent this either attach the event handler somewhere else or ignore clicks from the links.
The event object has a target property that tells you what element initiated the event. So you could do something like this:
elem.on('click', function (e) {
if (e.target.nodeName.toLowerCase() == 'a') return; //ignore click on links
I am using jquery ui Dialog box. It works fine but I have a requirement that with one button I should be able to create a dialog box with each click.
So Eg: On first click a dialog box is opened. On second click, a new dialog must be created with the first one intact at it's place. I am implementing sticky notes using this.
How can this be achieved??
You can create Modal Dialog Dynamically
$("button").click(function () {
var dynamicDialog = $('<div id="MyDialog">cotent </div>');
dynamicDialog.dialog({
title: "Success Message",
modal: false,
buttons: [{
text: "Yes",
click: function () {}
}]
});
});
Demo
Note: since all come on same location just move and see the new dialog in the demo
Hi I've added a button to the toolbar of my KendoUI Grid, but I have a couple of issues, I'm hoping someone can assist with.
I've tried to add one of the kendo web icons next to the button but it doesn't render.
When I click the button in the toolbar I see the following error in the console:
Uncaught ReferenceError: sendEmail is not defined.
I don't understand why it isn't seeing my function. Just for testing purposes I'm displaying an alert until it sees it.
toolbar: [
{ name: "create", text: "Add" },
{ template: "<input type='button' class='k-button' value='Email Users' onclick='sendEmail()' />",
imageclass: "k-icon k-i-pencil" }
]
function sendEmail() {
debugger;
alert('Send Emails');
}
Can someone please help?
You can Use as below:
toolbar: [
{
name: "Add",
text: "Send Email",
click: function(e){alert('Send Emails'); return false;}
}
],
According to the documentation you would need to return the function that you want to occur on click. Like this:
template: '<a class="k-button" href="\\#" onclick="return toolbar_click()">Command</a>'
The documentation
I hope that helps.
this works for me:
you must define your grid in variable
initializing grid and add your button in toolbar option
toolbar: [{ name: "myButton", text: "this is your button text" }]
after initializing write this code to find button and add function:
grid.find(".k-grid-toolbar").on("click", ".k-grid-myButton", function (e) {
alert("it's work") ;});
Is your function sendEmail() initialized in document.ready or $(()=>{}); if not you will have to initialize it or else you could use this way
add a id for the button and write this in your document.ready (remove the onlcick from the button tag).
$("#examplebuttonid").click(()=>{
//write your code in here
});