Skip to content

Added the Calendar Demo #29

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 11, 2013
Merged

Added the Calendar Demo #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion angular-ui
Open in desktop
Submodule angular-ui updated from 0eac4d to e67bbc
69 changes: 67 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

<script src="lib/bootstrap/docs/assets/js/bootstrap.min.js"></script>
<script src="http://code.angularjs.org/1.0.1/angular-1.0.1.min.js"></script>
<script src="http://code.angularjs.org/1.0.3/angular.js"></script>
<script src="angular-ui/build/angular-ui.js"></script>
<script src="js/prettify.js"></script>
<script src="lib/maskedinput/jquery.maskedinput.js"></script>
Expand All @@ -16,6 +16,7 @@
<script src="http://fiddle.tinymce.com/tinymce/3.5.4.1/jquery.tinymce.js"></script>
<script src="http://fiddle.tinymce.com/tinymce/3.5.4.1/tiny_mce_jquery_src.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="lib/calendar/fullcalendar.js"></script>
<script src="js/app.js"></script>

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
Expand All @@ -25,14 +26,15 @@
<link rel="stylesheet" href="lib/select2/select2.css" >
<link rel="stylesheet" href="lib/CodeMirror/lib/codemirror.css" >
<link rel="stylesheet" href="lib/CodeMirror/theme/monokai.css" >
<link rel="stylesheet" href="lib/calendar/fullcalendar.css" >
<link rel="stylesheet" href="css/app.css" >
</head>
<body data-spy="scroll">
<header class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<div class="dropdown">
<a class="brand dropdown-toggle" role="button" data-toggle="dropdown">
<a class="brand dropdown-toggle" role="button" data-toggle="dropdown">
AngularUI
<b class="caret"></b>
</a>
Expand Down Expand Up @@ -60,6 +62,7 @@
<li><a scrollto href="#directives-codemirror">CodeMirror IDE</a></li>
<li><a scrollto href="#directives-event">Event Binder</a></li>
<li><a scrollto href="#directives-map">Google Maps</a></li>
<li><a scrollto href="#directives-calendar">Calendar</a></li>
<li><a scrollto href="#directives-date">Date</a></li>
<li><a scrollto href="#directives-keypress">Keypress</a></li>
<li><a scrollto href="#directives-mask">Mask</a></li>
Expand Down Expand Up @@ -263,6 +266,68 @@ <h3>How?</h3>
</div>
</section>

<section id="directives-calendar" ng-controller="CalendarCtrl">
<div class="page-header">
<h1>Calendar</h1>
</div>
<div class="well">
<div class="row">
<div class="span3">
<h3>What?</h3>
<p>Attach Angular objects to a calendar.</p>
<h3>Why?</h3>
<p>For easy integration with scope objects.</p>
<h4>Click to add an Event!</h4>
</b>
<button style="margin-bottom: 3px;" class="btn btn-primary" ng-click="addChild()">Add Child</button>
<ul>
<li ng-repeat="e in events">
<p class="alert alert-info">
{{e.title}}
<a style="float: right; margin-top: -5px;" class="btn btn-danger" ng-click="remove($index)">x</a>
</p>
</li>
</ul>

</div>

<div ui-calendar="{height: 450,editable: true}" class="span8 calendar" ng-model="events"></div>
</div>
</div>
<h3>How?</h3>
<pre class="prettyprint linenums">
&lt;div ui-calendar="{height: 450,editable: true}" class="span8 calendar" ng-model="events"&gt;&lt;/div&gt;

function CalendarCtrl($scope) {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();

$scope.events = [
{title: 'All Day Event',start: new Date(y, m, 1)},
{title: 'Long Event',start: new Date(y, m, d - 5),end: new Date(y, m, d - 2)},
{id: 999,title: 'Repeating Event',start: new Date(y, m, d - 3, 16, 0),allDay: false},
{id: 999,title: 'Repeating Event',start: new Date(y, m, d + 4, 16, 0),allDay: false},
{title: 'Birthday Party',start: new Date(y, m, d + 1, 19, 0),end: new Date(y, m, d + 1, 22, 30),allDay: false},
{title: 'Click for Google',start: new Date(y, m, 28),end: new Date(y, m, 29),url: 'http://google.com/'}
]

$scope.addChild = function() {
$scope.events.push({
title: 'Open Sesame',
start: new Date(y, m, 28),
end: new Date(y, m, 29)
});
}

$scope.remove = function(index) {
$scope.events.splice(index,1);
}
}
</pre>
</section>

<section id="directives-map" ng-controller="MapCtrl">
<div class="page-header">
<h1>Google Maps</h1>
Expand Down
28 changes: 28 additions & 0 deletions js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,4 +142,32 @@ function FormatCtrl($scope) {
}
};
}

function CalendarCtrl($scope) {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();

$scope.events = [
{title: 'All Day Event',start: new Date(y, m, 1)},
{title: 'Long Event',start: new Date(y, m, d - 5),end: new Date(y, m, d - 2)},
{id: 999,title: 'Repeating Event',start: new Date(y, m, d - 3, 16, 0),allDay: false},
{id: 999,title: 'Repeating Event',start: new Date(y, m, d + 4, 16, 0),allDay: false},
{title: 'Birthday Party',start: new Date(y, m, d + 1, 19, 0),end: new Date(y, m, d + 1, 22, 30),allDay: false},
{title: 'Click for Google',start: new Date(y, m, 28),end: new Date(y, m, 29),url: 'http://google.com/'}
]

$scope.addChild = function() {
$scope.events.push({
title: 'Open Sesame',
start: new Date(y, m, 28),
end: new Date(y, m, 29)
});
}

$scope.remove = function(index) {
$scope.events.splice(index,1);
}
}
/* EOF */
Loading