As Full Calendar 3.5.0 recently came out, I wanted to try it on JSFiddle.
I linked all the necessary external links from CDNJS.
However, the
<div id='calendar'>
in the HTML of which in my JSFiddle does not work.
I am a beginner. I thought that CALENDAR ID was in the JS.
Has anyone tried the full calendar 3.5.0?
The calendar is not shown!
This is the link to the JSFiddle: Link
Thank you for your support in advance!!
When running your fiddle, check the browser console for errors. It'll tell you jQuery is not defined when fullCalendar is trying to use it. This is because fullCalendar relies on jQuery, but you loaded the fullCalendar library before the jQuery library, so fullCalendar can't find jQuery when it loads, because it doesn't exist yet.
You added the JS files in the wrong order, and you forgot to include momentJS at all. https://fullcalendar.io/docs/usage/ tells you what to include and what order to put them in.
jQuery and Moment must be loaded before FullCalendar's JavaScript.
To fix:
1) Add a reference to momentJS
2) Re-order the references as per the fullCalendar docs. In JSFiddle you simply
click the External Resources zone and then drag them into the correct order.
3) You included fullCalendar twice. You only need to include the fullCalendar.min.js. The only reason to use the full-fat fullCalendar.js is if you want to debug it, otherwise it just wastes bandwidth, and certainly should never include them both together (or include the same one twice), or else you risk conflicts.
Check the same thing with CSS as well - you also included fullCalendar.css and fullCalendar.min.css, which makes no sense for the same reasons as I outlined above with the JS files.
Related
I'm adapting one angular 1 project to use the webpack module bundle system. Almost everything is working as expected, but one material component doesnt get applied well. It is the md-input-container.
What I think it is the cause of the problem: I'm using ng-cache-loader to load the html templates. So, I think, in someway the tags are not processed or so. Because I put the md-input-container in the main index.html (which is not loaded by ng-cache-loader) and it works.
Also, I'm using lazy loading of modules and states with ocLazyLoad and ui-router-extras future state, maybe this has something to do with the problem...
At first I thought it was only css problems, but I have confirmed its not.
(Posted on behalf of the OP).
This weird fix solved the problem.
I am trying to use highcharts with angular. now I wanted to use ready made directive highcharts-ng but nothing is showing up. I am suspecting that I need to download/use external library although I see nothing mentioning that. so my question is Do i need to to download an external file/library to use the highcharts-ng directive?
regards,
In the readme of the github everything is explained, including how to add the script from a cdn but you can also download the file that is inside the src folder
https://github.com/pablojim/highcharts-ng
It works fine when the page is opened normally but does not when its open as a modal. The expressions show up as literal text. Do I have to use the Angular Bootstrap UI? Does anyone have an example of how this is done? My modals are stored as partials
You need to use
http://angular-ui.github.io/bootstrap/
its simple to use, just include the javascript, a little CCS and angular.module('myModule', ['ui.bootstrap']);
Once added you have todo some things a different way, plenty of examples on the angular site. One of the main issue it solves is problems when href # is used.
This may not be the fix for you, but you should be using it. Do you have a plunk?
You need to add the Boostrap as a dependency to the angular Application,
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js" type="text/javascript"></script>
and App,
angular.module('modalTest',['ui.bootstrap','dialogs'])
Here is an existing CodePen
As others have said, libraries exist to bring bootstrap into the angular world. Keep in mind, a lot of things are done differently when using them in how you set up your DOM. Bootstrap uses a lot of things in location.hash for controls, which conflicts with angular routing.
The issue is that when Bootstrap pops up a modal, angular has no idea that happened, and that it has a new part of the DOM to compile. If you don't want to pull in the angular bootstrap library (which is pretty good, and should be used if your starting a new page from scratch with the two), you can use $compile linked with a callback into angular (probably via a factory you make) to manually compile what you need.
i am new to angular js .
Please help me.
i readed some blogs on angular views and route and i implemented the code for view and route .
the code was not working. As I include angularoute.js to code then it works fine for me .
But in all the blogs they are not including the angularoute.js to code.
So my question is that is route logic was removed from angular.js or i am doing something wrong.
In angular 1.0, routing was part of the core angular.js module. Since 1.2, they've made it an external module, in an external file. What you're doing is thus fine, and the blogs you read have probably been written before angular 1.2, or neglected to precise that this additional file had to be added.
The official documentation is quite clear about it, though:
First include angular-route.js in your HTML:
<script src="angular.js">
<script src="angular-route.js">
...
I strongly suggest you to use aungular-ui-router. Basically it's the same as angular-route but it has much much more features. There are the nested views option, also you can pass parameters over different states. You can easily assert in which state you are and based on that change the view or do something else. Another aswe feature is that you can have multiple named view on a single page which means you can load different templates on this page. The documentation is pretty awesome with this one as well. You might want to take a look. Also when you have some issues you better paste some code so people could see where could something possibly be wrong.
The Angular UI - 3rd party lib.
I'm fairly new to Angular but I've been using it the past few weeks and have managed to work out most of the problems I've come across. This one however has me stumped.
I have an app that pulls in tweets from Twitter then - using an angular filter - pulls out all the urls and styles them as links. This part works fine but the client decided that links from Twitter were't safe so they wanted a disclaimer to fire every time a link was clicked. Simple enough - I hijacked the link and swapped the href for an ng-click="openLink('url')". This is where the problem occurred - the ng-click doesn't work.
I'm pretty sure the problem has something to do with $compile() - I've had similar issues before - but I have no idea when or where to call it.
I've created a Plunkr that is a lite version of what I'm after. The link at the top isn't loaded in dynamically and fires the alertUrl() function fine, but all the links generated by the filter fail.
I'm probably missing something really simple but it's been bugging me a while now so any help will be massively appreciated.
Thanks,
Sam
Well you are correct that the html\content that you emit needs to be compiled for angularjs to resolve the alert function.
I have changed your plunker, and inject a compile directive (from here)
See it in action here
The basic idea here is to compile the content produced from twitter feed dynamically.
<p compile="tweet.text | convertLinks"></p>