I followed the tuto about fullCalendar of Adam Shaw and I can't retrieve events from google calendar. Here is my code:
<!DOCTYPE html>
<html>
<head>
<link href="<?php echo css_url().'fullcalendar.css'; ?>" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<?php echo js_url().'jquery.js'; ?>"></script>
<script type="text/javascript" src="<?php echo js_url().'fullcalendar.js'; ?>"></script>
<script type='text/javascript' src='fullcalendar/gcal.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
})
});
$(document).ready(function() {
$('#calendar').fullCalendar({
events: $.fullCalendar.gcalFeed(
"http://www.google.com/calendar/feeds/username%40gmail.com/public/basic")
});
});
</script>
</head>
<div id='calendar'></div>
</html
Could you tell me what's wrong please?
You should instantiate the FullCalendar only once. Replace your script tag with this and it should work:
<script type='text/javascript'>
$(document).ready(function() {
$('#calendar').fullCalendar({
events: $.fullCalendar.gcalFeed(
"http://www.google.com/calendar/feeds/username%40gmail.com/public/basic")
});
});
</script>
Let me know if this helps.
EDIT: Fiddle - http://jsfiddle.net/100thGear/JeDFG/. Also, please make sure gcal.js is in the correct path and is included in your HTML
Related
i am trying to use ng-admin for the firs time. i am just following the example in and i am unable to see anything in the browser. my code is minimal, so not sure what i am doing wrong.
any ideas? did i not install correctly? i just downloaded it from a site and unzipped the file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My First Admin</title>
<link rel="stylesheet" href="external/ng-admin/build/ng-admin.min.css">
<script src="external/ng-admin/build/ng-admin.min.js" type="text/javascript"></script>
<script src="admin.js" type="text/javascript"></script>
</head>
<body ng-app="myApp" ng-strict-di>
<div ui-view="ng-admin"></div>
</body>
</html>
// declare a new module called 'myApp', and make it require the `ng-admin` module as a dependency
var myApp = angular.module('myApp', ['ng-admin']);
// declare a function to run when the module bootstraps (during the 'config' phase)
myApp.config(['NgAdminConfigurationProvider', function (nga) {
// create an admin application
var admin = nga.application('My First Admin')
.baseApiUrl("http://vl-esifakis-ice:8000/tracker/");
var foundry = nga.entity('foundry');
foundry.listView().fields([
nga.field('name'),
nga.field('id')
]);
admin.addEntity(foundry);
// more configuration here later
// ...
// attach the admin application to the DOM and execute it
nga.configure(admin);
}]);
Here is a demo which i have made,
<!DOCTYPE html>
<html>
<head>
<link data-require="ng-admin#0.0.1" data-semver="0.0.1" rel="stylesheet" href="https://unpkg.com/ng-admin/build/ng-admin.min.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="ng-admin#0.0.1" data-semver="0.0.1" src="https://unpkg.com/ng-admin/build/ng-admin.min.js"></script>
<script data-require="angular-mocks#*" data-semver="1.3.5" src="https://code.angularjs.org/1.3.7/angular-mocks.js"></script>
<script src="admin.js"></script>
<!-- <script src="backend.js"></script>
-->
</head>
<body ng-app="myApp">
<div ui-view="ng-admin"></div>
</body>
</html>
DEMO
I am trying to learn how to use AngularJS and AngularJS Material using following codes:
<!doctype html>
<html lang="en">
<head>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/angular-aria/angular-aria.min.js"></script>
<script src="bower_components/angular-material/angular-material.js"></script>
<script>
angular.module('F1FeederApp', [ 'ngMaterial' ]).controller('driversController',
function($scope) {
}).config(
function($mdThemingProvider) {
$mdThemingProvider.theme('default').primaryPalette('pink')
.accentPalette('orange');
});
;
</script>
<!-- default themes and core styles -->
<link rel="stylesheet"
href="bower_components/angular-material/angular-material.css">
</head>
<body ng-app="F1FeederApp">
<md-content>
<md-toolbar class="md-tall md-accent">
<h2 class="md-toolbar-tools">
<span>Toolbar: tall (md-accent)</span>
</h2>
</md-toolbar>
<ng-view></ng-view>
</md-content>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
</body>
</html>
However, the Material is not displayed. What could be wrong with my code?
Console in Browser doesn't give me any error.
Just tried your code and it works fine on Chrome, FireFox, and Safari.
By the way, you have an extra ; before your closing script tag
<script>
angular.module('F1FeederApp', [ 'ngMaterial' ]).controller('driversController',
function($scope) {
}).config(
function($mdThemingProvider) {
$mdThemingProvider.theme('default').primaryPalette('pink')
.accentPalette('orange');
});
;
</script>
I recommend you to check your angular and angular material versions,
or check if there is a problem in your .js files.
I'm trying to build up a REST client written in AngularJS that uses $resources for consuming the REST service and ng-grid library for the User Interface.
By using just the $resource module dependency my code works, however if I introduce also the ngGrid dependency it just displays an empty div.
I've little experience with modules but the syntax seems correct....
<link rel="stylesheet" type="text/css" href="ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="ng-grid-2.0.7.min.js"></script>
<script type="text/javascript" src="angular-resource.js"></script>
<script language="javascript">
angular.module('myApp',['ngResource'], ['ngGrid']);
function Ctrl($scope,$resource) {
var restservice = $resource(
'http://host/myapp/json', {
}, {
query: { method: 'GET', isArray: true }
}
);
$scope.gridOptions = restservice.query();
};
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="Ctrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
</div>
</div>
</body>
Do you see any error in the above code ?
Thanks!
You don't need to pass in a separate array for each module, nest them under one array like this.
angular.module('myApp',['ngResource', 'ngGrid']);
So I'm just curious about something... it appears that when doing e2e tests with Protractor and doing things like "expect(element(by.css('.test')).getText()).toBe('Some Text');" this only works for elements in the BODY section of the document and not the HEAD section.
For example I tinkered with the tutorial phonecatApp index.html so that it looks like this:
!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="utf-8">
<title class="appTitle">Google Phone Gallery</title>
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/animations.css">
<script src="../bower_components/jquery/jquery.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-animate/angular-animate.js"></script>
<script src="../bower_components/angular-route/angular-route.js"></script>
<script src="../bower_components/angular-resource/angular-resource.js"></script>
<script src="js/app.js"></script>
<script src="js/animations.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/services.js"></script>
</head>
<body>
<div class="test">Some Text</div>
<div class="view-container">
<div ng-view class="view-frame"></div>
</div>
</body>
</html>
Then I added some simple tests to scenarios.js that look like this:
it('should set the title to "Google Phone Gallery"', function () {
expect(element(by.css('.appTitle')).getText()).toBe('Google Phone Gallery');
});
it('should set the div.test to "Some Text"', function () {
expect(element(by.css('.test')).getText()).toBe('Some Text');
});
The first test to check TITLE always fails with "Expected ' ' to be 'Google Phone Gallery'." But the DIV test works fine.
Is there anything special required to check elements in the HEAD section or is this just something you can't do with Protractor?
I am new to angular.js and have a problem. Please help me resolve it.
I have created a simple screen using a controller and a module in my example.
But it doesnt work. I have presented the example as follows :
My html file is :-
<!doctype html>
<html ng-app="ayan">
<head>
<script type="text/javascript" src="hotel_listing_angular.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
<title>Insert title here</title>
</head>
<body>
<div ng-controller="myController">
<ul>
<li ng-repeat="contact in htlList">
{{ contact.name }}
</li>
</ul>
</div>
</body>
</html>
and my js file is as follows :-
var ayan=angular.module('ayan',[]);
ayan.controller('myController',function ($scope) {
$scope.htlList = [
{name:"Picard", description:"Captain"},
{name:"Santosh", description:"Programmer"},
{name:"Amit", description:"Manager"}
];
});
Please tell me what am I doing wrong.
You need to include
<script type="text/javascript" src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
before
<script type="text/javascript" src="hotel_listing_angular.js"></script>
Try calling
<script type="text/javascript" src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
before calling
<script type="text/javascript" src="hotel_listing_angular.js"></script>