Hell, I'm trying to use the wijmo event calender with the AngularJS liabry, but the appointments binding isn't working correctly.
This is my html:
<html>
<head>
<title>Control Tests</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://cdn.wijmo.com/themes/rocket/jquery-wijmo.css" rel="stylesheet"
title="metro-jqueryui" type="text/css" />
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20131.7.min.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20131.7.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20131.7.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://cdn.wijmo.com/external/globalize.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script src="http://cdn.wijmo.com/external/angular.wijmo.js" type="text/javascript"></script>
<script src="../../Scripts/Controller/MainController.js" type="text/javascript"></script>
</head>
<body>
<script>
$(document).ready(function () {
$(".wijevcal").wijevcal();
});
</script>
<div ng-app ng-controller="MainController">
<div class="wijevcal" appointments="{{calAppointments}}"></div>
</div>
</body>
</html>
And this is the source of the Controller:
function MainController($scope)
{
$scope.calAppointments = [{
start: new Date(2013, 5, 23, 15, 30)
}];
}
Can someone tell me, why the start date isn't applied to the calendar?
Yes, you need to add the Wijmo module in order to use the custom directives provided by Wijmo.
I fixed it on my own.
I had to call
var app = angular.module("MyApp", ["wijmo"]);
at the beginning of the script and now I can use the tag
<wijevcal></wijevcal>
Related
I'm experimenting with Handsontable add and remove column feature. But it is not working.
Here is my code :-
My index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.35.0/handsontable.full.js"></script>
<!--<link rel="stylesheet" type="text/css" href="css/style.css">-->
<script type="text/javascript" src="js/app.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.35.0/handsontable.full.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ngHandsontable/0.13.0/ngHandsontable.js"></script>
<!--<script type="text/javascript" src="data/datafactory.js"></script>-->
</head>
<body MainCtrl as ctrl>
<hot-table col-headers="true" datarows="ctrl.data">
<hot-column ng-repeat="column in ctrl.columns" data="{{column.data}}" title="column.title" read-only="column.readOnly"></hot-column>
</hot-table>
<button ng-click="ctrl.addColumn()">Add column</button>
<button ng-click="ctrl.removeColumn()">Remove column</button>
</body>
</html>
My app.js
function MainCtrl() {
var items = [[]];
this.data = items;
this.columns = [
{
data: 'id',
title: 'ID',
readOnly: true
},
{
data: 'price',
title: 'Price',
readOnly: false
}
];
this.addColumn = function() {
this.columns.push({});
};
this.removeColumn = function() {
this.columns.pop();
};
}
angular
.module('app', ['ngHandsontable'])
.controller('MainCtrl', MainCtrl);
MainCtrl.$inject = [];
When I run the code it doesn't work and doesn't allow to add or remove column. I am new to both angular and front-end design. So seeking help here.
I believe you need to order your <script> tags properly - your code should go at the end (I imagine your code is in js/app.js):
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.35.0/handsontable.full.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.35.0/handsontable.full.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ngHandsontable/0.13.0/ngHandsontable.js"></script>
<script type="text/javascript" src="js/app.js"></script>
Also try using arrow functions where you can instead of function()...
Or set up:
let ctrl = this;
You may get in trouble using this the way you do it. Scope of this can and sometimes will change.
Here's example of your code working in JS fiddle:
https://jsfiddle.net/pegla/b6rj93cg/2/
i am using the following code for datetimepicker but i am unable to understand why it is not working. I mean in the input box nothing is shown. Please help me ?
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/i18n/jquery-ui-timepicker-addon-i18n.js"></script>
<script>
$(document).ready(function() {
$('#datepicker').datetimepicker({
showSecond: true,
timeFormat: 'hh:mm:ss',
stepHour: 2,
stepMinute: 10,
stepSecond: 10
});
});
</script>
</head>
<body>
<form>
<input id="datepicker" />
</form>
</body>
</html>
You must add the following too:
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/jquery-ui-timepicker-addon.css" rel="stylesheet" type="text/css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/jquery-ui-timepicker-addon.js"></script>
^ Here is the plugin js & css.
And here you will find all the scripts/css files that you need: http://cdnjs.com/libraries/jquery-ui-timepicker-addon
I'm fairly new to Angular.js (or to web programming in general). I got a pretty basic problem - I'd like to include a date picker in my application. For this purpose, I try to set up the bootstrap datepicker:
https://bootstrap-datepicker.readthedocs.org/en/latest/#
I have the jQuery and Bootstrap dependencies included:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/blog.css">
<script src="angular-datepicker.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/blogController.js"></script>
I don't really understand, how am I supposed to use it from now on? I can include some input field in my HTML template, but how exactly do I call the script that calls the date picker widget?
Add an id or a class to your input field and use that as a selector once you call the datepicker.
In your HTML:
<input type="text" class="datepicker">
In your JS:
$('.datepicker').datepicker();
full code just test
<!DOCTYPE HTML>
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen"
href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
</head>
<body>
<div class="well">
<div id="datetimepicker4" class="input-append">
<input data-format="yyyy-MM-dd" type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"> </i>
</span>
</div>
</div>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript"
src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
</script>
<script type="text/javascript">
$(function () {
$('#datetimepicker4').datetimepicker({pickTime: false});
});
</script>
</body>
</html>
Hi so I'm trying to like a javascript file to my web page, when it was in the HTML file it worked fine, but I won't to neaten it up a little by putting the JS in a different file
HTML:
<head>
<meta charset="utf-8" />
<title>Digital Canvas Web Designs</title>
<link rel="stylesheet" href="/CSS/Template.css"/>
<link rel="stylesheet" href="/CSS/news.css"/>
<link rel="shortcut icon" href="images/tablogo.ico" > <!-- tab logo generated at http://www.favicongenerator.com/ -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="Javascript/newshide.js" type="text/javascript"></script>
</head>
<body>
and Javascript:
<script type="text/javascript">
$(document).ready(function(){
$("#show").click(function() {
$("#hidden").show();
});
$("#hide").click(function() {
$("#hidden").hide();
});
});
</script>
And the part of HTML where the JS should work.
<span id="show">more>></span>
<p id="hidden" hidden>COOL STORY BRO
<span id="hide">less</span> </p>
wrap all into document.ready
<script type="text/javascript">
$(document).ready(function(){
$("#show").click(function() {
$("#hidden").show();
});
$("#hide").click(function() {
$("#hidden").hide();
});
});
</script>
Also: you have another bug, change the last script for:
<script src="Javascript/newshide.js" type="text/javascript"></script>
Docs
Change this
<script src=".\Javascript\newshide.js" type="text/javascript"></script>
To this
<script src="Javascript/newshide.js" type="text/javascript"></script>
My understanding is that to use the plugin I need to insert this code into the header:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" />
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
<script>
$(document).ready(function(){
var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
$("#example").autocomplete(data);
});
</script>
I did that and then I put the form in the html:
self.response.out.write("""
API Reference: <input id="example" /> (try "C" or "E") """)
but nothing is happenning. What am I missing?
I'd recommend using the newer jQueryUI Autocomplete via the Google CDN.
To include it in your application, use something like this
<!-- in your <head> section -->
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css">
The smoothness string in the URL refers to the jQueryUI theme. You can change this to whatever you want. See http://jqueryui.com/themeroller/#themeGallery
<!-- just before the closing </body> tag -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
var data = [
"Core",
"Selectors",
"Attributes",
"Traversing",
"Manipulation",
"CSS",
"Events",
"Effects",
"Ajax",
"Utilities"
];
$("#example").autocomplete({
source: data
});
});
</script>
The 1 references in these URLs refer to the version number. Just using 1 means use the latest version from the 1 branch