We Keep Coding

Fullcalendar v5 eventContent not working with angular js

I'm using Fullcalendar v5 in angular js, and i'm trying to make a custom event with:
https://fullcalendar.io/docs/content-injection
eventContent: function(arg) {
return { html: constructEvent(arg) }
},
The thing is that if i add:
"<div ng-repeat='user in arg.event._def.extendedProps.users' class='avatar'>"
"<p>{{ user.name }}</p>"
"</div>"
it won't render. It's like it's outside angular's scope. Can someone tell me if there is a way to construct this with angular js logic? Or i need to use vanilla js to iterate through items. Also ng-click doens't work. I tried even with triggering safeApply digest but no results.
I just want to edit the event inside calendar with the framework i'm using, and use angular events inside it to open sidebars or to make api calls.

Rendering Events
with your line <div ng-repeat it seems that you'd like to iterate through an array of events to display on your screen. If this is the case, you simply need to render the events via the 'events' parameter.
https://fullcalendar.io/docs/event-object
Regarding eventContent (the contents of an event, such as title, subtitle, img, etc)
It looks like at the minute only React JSX Nodes are supported. Vanilla JS is your only way forward.
https://fullcalendar.io/docs/content-injection

Jquery: What is the best way to select the newly added DOM node?

I have an external template file with a structure that is dynamically added to a table when a button is clicked. When the new table line is added this way, I need to call a callback on this newly added piece of code.
I would like to know, what is the best way to select this new code. It has an ID, so it won't be a problem to write some other selector, but I was wondering if there is an easier and fast way how to select it.
Here is the piece of code:
$rightSpot.append(app.renderTemplate('temp/product', tplData ));
EDIT: This works for me, but maybe there is a better way:
$newProduct = $rightSpot.find('tr').last().find('textarea');

I would consider using react.js. The advantage of using react is that it works with a virtual DOM so you will not be reliant of the physical DOM to render before your callback is available.
http://facebook.github.io/react/

I don't know if it is the best way but you could do something like this -
$("#giveitafriend").click(function() {
$("#ab").append($("<span>")
.text("I'm here too!")
.css("color", "red")
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ab">
<span>On My Own</span>
</div>
<button id="giveitafriend">Give it a Friend</button>

Assuming your renderTemplate function returns HTML element, may be you can access the new element as follows
var newElement = app.renderTemplate('temp/product', tplData );
$rightSpot.append(newElement);
console.log($(newElement).attr('id'));

Meteor: what can I use instead of setTimeout to reactive DOM changes?

I use materialbox (jQuery plugin to display Material Design lightbox style) when a new photo was taken from mobile end added to a dynamic list.
When photo is ready and visible in the DOM, a template event starts:
Template.item.events({
'click .materialboxed':function(e,t){
setTimeout(function(){
$('.materialboxed').materialbox();
},0)
}
});
the DOM:
<div class="col s2" style="text-align:left;">
{{#if pictureExist}}
<img src="{{picture}}" alt="" class="responsive-img materialboxed"> <!-- notice the "circle" class -->
{{else}}
<div class="takePicture"><i class="mdi-image-photo-camera small"></i></div>
{{/if}}
</div>
Is there a best Meteor way instead setTimeout to instantiate jQuery code in reactive data?
Thanks

Try removing the timer.
Template.item.events({
'click .materialboxed':function(e,t){
$('.materialboxed').materialbox();
}
});
It should work.

I think what you have is perfectly fine in the Meteor world.
Since you do not want to instantiate anything when the Template is created, and you are not looking to track the state of the Template, then registering an event to call that bit of jQuery code seems like the straightforward way of going about it.
EDIT: Looked at your response to another answer, here is what you need:
Template.item.rendered = function () {
# this.$() will only look for elements inside this template
this.$('.materialboxed').materialbox();
};
To optimize your implementation a bit, we only initiate your jQuery plugin on the element that is clicked on. Instead of initializing it onto every element with a .materialboxed class each time an item template is rendered.
The template.$() function works exactly like jQuery but only finds elements within the template. I am not sure how this function works with jQuery plugins, but you could first return the exact element using this function, save it, and then convert it to a jQuery object manually.
More info on this here:
http://docs.meteor.com/#/basic/Blaze-TemplateInstance-findAll

How to manipulate the DOM with Onsen UI

I'm a total newbie to Onsen UI and I managed to make my first little app (static that is) with a few pages, popovers, lists, etc.
But when I try to add dynamic stuff in there, it does not want to cooperate.
When I click my side menu, it calls menu.setMainPage and in the callback I want to modify the content of the list (lets say iterate a JSON request and add a ons-list-item for each of them). However, they do not look styled with Onsen UI icing.
I guess it's because the menu.setMainPage has already parsed the ons-page and showed it in the browser.
Is there a way to do a load page, update the dom, and then pass it to be displayed?
I have a simila problem with an popover that contains a list. I want to add items in that list, but my jQuery append never work. Same reason I suppose.
Thanks!

Sounds like you're not running ons.compile() on the dynamic elements. The custom elements must be compiled after they've been added to the DOM to get the correct style and behavior.
I made a short example to illustrate it:
ons.bootstrap();
var addItem = function() {
var $myList = $("#my-list"),
$item = $("<ons-list-item>").text(Math.random());
$myList.append($item[0]);
ons.compile($item[0]);
};
If you attach the addItem function to a click handler you can add items dynamically to an <ons-list>.
This is a running example on codepen:
http://codepen.io/argelius/pen/gbxNEg

MVC Add HTML with MvcHtmlString.Create but with JavaScript functionality

I have a big doubt. In a MVC project, I render a HTML template (loaded from .html file) into a View with MvcHtmlString.Create();
This works fine but have a problem. This HTML template need to do javascript functionality, the problem? That this don't work, because the HTML is rendered after the javascript and the js functionality not work.
Something like this:
<script type="text/javascript">
$(document).ready(function(){
$("#SomeID").click(funciton(){
//This don't work because the #SomeID not exists yet
});
});
</script>
<br />
#MvcHtmlString.Create(#Model.HTMLTemplateContent);
Someone can help me about this or tell me something at respect?
Thanks

Use jquery on method.
$(document).ready(function(){
$(document).on("click","#SomeID",function(){
alert("Working");
});
});
on method will work for current and future (Any thing injected to DOM later (Ex : through javascript code, ajax) elements.

Thanks! I not have idea about this.
Is possible to access at elements by the same "method"? How to do to get this? i.e
I'm using jSignature to implement sign en the document.
whit this:
$("#someDivID").jSignature();
I'm using now to access at div element with this:
var signCanvasOn = document.getElementById("someID");
signCanvasOn.jSignature();
signCanvasOn.jSignature("reset");
But this don't work for me, only work if I use:
$("#someID").jSignature();
$("#someID").jSignature("reset");
What is the real problem?

Have you tried adding the jquery at document level?
That's how i usually ensure that jquery continues to work with any stuff i load on the page dynamically.
Something like this:
$(document).on("click","#SomeID",function()
{
//This don't work because the #SomeID not exists yet
});