Skip to content
This repository was archived by the owner on Sep 8, 2020. It is now read-only.

Commit 6397ee6

Browse files
jkurzjkurz
committed
fix(demo): updating demo to work with fullcalendar 2.0 branch
Signed-off-by: Josh Kurz <josh.kurz@turner.com>
1 parent af8cf03 commit 6397ee6

File tree

2 files changed

+75
-50
lines changed

2 files changed

+75
-50
lines changed

‎demo/calendarDemo.js

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
/**
2-
* calendarDemoApp - 0.1.3
2+
* calendarDemoApp - 0.9.0
33
*/
44
angular.module('calendarDemoApp', ['ui.calendar', 'ui.bootstrap']);
55

6-
function CalendarCtrl($scope) {
6+
function CalendarCtrl($scope,$compile,uiCalendarConfig) {
77
var date = new Date();
88
var d = date.getDate();
99
var m = date.getMonth();
@@ -44,16 +44,16 @@ function CalendarCtrl($scope) {
4444
]
4545
};
4646
/* alert on eventClick */
47-
$scope.alertOnEventClick = function( event, allDay, jsEvent, view ){
48-
$scope.alertMessage = (event.title + ' was clicked ');
47+
$scope.alertOnEventClick = function( date, jsEvent, view){
48+
$scope.alertMessage = (date.title + ' was clicked ');
4949
};
5050
/* alert on Drop */
51-
$scope.alertOnDrop = function( event, revertFunc, jsEvent, ui, view){
52-
$scope.alertMessage = ('Event Droped on ' + event.start.format());
51+
$scope.alertOnDrop = function(event, delta, revertFunc, jsEvent, ui, view){
52+
$scope.alertMessage = ('Event Droped to make dayDelta ' + delta);
5353
};
5454
/* alert on Resize */
55-
$scope.alertOnResize = function( event, jsEvent, ui, view){
56-
$scope.alertMessage = ('Event end date was moved to ' + event.end.format());
55+
$scope.alertOnResize = function(event, delta, revertFunc, jsEvent, ui, view ){
56+
$scope.alertMessage = ('Event Resized to make dayDelta ' + delta);
5757
};
5858
/* add and removes an event source of choice */
5959
$scope.addRemoveEventSource = function(sources,source) {
@@ -83,13 +83,19 @@ function CalendarCtrl($scope) {
8383
};
8484
/* Change View */
8585
$scope.changeView = function(view,calendar) {
86-
calendar.fullCalendar('changeView',view);
86+
uiCalendarConfig.calendars[calendar].fullCalendar('changeView',view);
8787
};
8888
/* Change View */
8989
$scope.renderCalender = function(calendar) {
90-
if(calendar){
91-
calendar.fullCalendar('render');
90+
if(uiCalendarConfig.calendars[calendar]){
91+
uiCalendarConfig.calendars[calendar].fullCalendar('render');
9292
}
93+
};
94+
/* Render Tooltip */
95+
$scope.eventRender = function( event, element, view ) {
96+
element.attr({'tooltip': event.title,
97+
'tooltip-append-to-body': true});
98+
$compile(element)($scope);
9399
};
94100
/* config object */
95101
$scope.uiConfig = {
@@ -103,7 +109,8 @@ function CalendarCtrl($scope) {
103109
},
104110
eventClick: $scope.alertOnEventClick,
105111
eventDrop: $scope.alertOnDrop,
106-
eventResize: $scope.alertOnResize
112+
eventResize: $scope.alertOnResize,
113+
eventRender: $scope.eventRender
107114
}
108115
};
109116

‎demo/index.html

Lines changed: 56 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,10 @@
88
<link rel="stylesheet" href="calendarDemo.css" />
99

1010
<script src="../bower_components/jquery/dist/jquery.js"></script>
11-
<script src="../bower_components/jquery-ui/ui/jquery-ui.js"></script>
12-
<script src="../bower_components/moment/moment.js"></script>
1311

1412
<script src="../bower_components/angular/angular.js"></script>
15-
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.9.0.js"></script>
13+
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.9.0.js"></script>
14+
<script src="../bower_components/moment/moment.js"></script>
1615
<script src="../bower_components/fullcalendar/dist/fullcalendar.js"></script>
1716
<script src="../bower_components/fullcalendar/dist/gcal.js"></script>
1817
<script src="../src/calendar.js"></script>
@@ -47,8 +46,8 @@
4746
<h1>UI Calendar</h1>
4847
<p>A complete AngularJS directive for the <a href="http://arshaw.com/fullcalendar/">Arshaw FullCalendar</a>.</p>
4948
<p class="btn-group">
50-
<a href="https://github.com/angular-ui/ui-calendar" class='btn'>Code on Github</a>
51-
<a href="https://github.com/angular-ui/ui-calendar/archive/master.zip" class='btn btn-primary'><i class="icon-download-alt icon-white"></i> Download <small>(0.1.3)</small></a>
49+
<a href="https://github.com/angular-ui/ui-calendar" class='btn'><i class='icon-github'></i> Code on Github</a>
50+
<a href="https://github.com/angular-ui/ui-calendar/archive/master.zip" class='btn btn-primary'><i class="icon-download-alt icon-white"></i> Download <small>(0.8.1)</small></a>
5251
</p>
5352
</div>
5453
<div class="bs-docs-social">
@@ -122,7 +121,7 @@ <h3>Why?</h3>
122121

123122
<div class="span8">
124123
<tabset>
125-
<tab select="renderCalender(myCalendar1);">
124+
<tab select="renderCalender('myCalendar1');">
126125
<tab-heading>
127126
<i class="glyphicon glyphicon-bell"></i> Calendar One
128127
</tab-heading>
@@ -132,14 +131,14 @@ <h4>{{alertMessage}}</h4>
132131
<div class="btn-toolbar">
133132
<p class="pull-right lead">Calendar One View Options</p>
134133
<div class="btn-group">
135-
<button class="btn btn-success" ng-click="changeView('agendaDay', myCalendar1)">AgendaDay</button>
136-
<button class="btn btn-success" ng-click="changeView('agendaWeek', myCalendar1)">AgendaWeek</button>
137-
<button class="btn btn-success" ng-click="changeView('month', myCalendar1)">Month</button>
134+
<button class="btn btn-success" ng-click="changeView('agendaDay', 'myCalendar1')">AgendaDay</button>
135+
<button class="btn btn-success" ng-click="changeView('agendaWeek', 'myCalendar1')">AgendaWeek</button>
136+
<button class="btn btn-success" ng-click="changeView('month', 'myCalendar1')">Month</button>
138137
</div>
139138
</div>
140-
<div class="calendar" ng-model="eventSources" calendar="myCalendar1" config="uiConfig.calendar" ui-calendar="uiConfig.calendar"></div>
139+
<div class="calendar" ng-model="eventSources" calendar="myCalendar1" ui-calendar="uiConfig.calendar"></div>
141140
</tab>
142-
<tab select="renderCalender(myCalendar2);">
141+
<tab select="renderCalender('myCalendar2');">
143142
<tab-heading>
144143
<i class="glyphicon glyphicon-bell"></i> Calendar Two
145144
</tab-heading>
@@ -149,14 +148,14 @@ <h4>{{alertMessage}}</h4>
149148
<div class="btn-toolbar">
150149
<p class="pull-right lead">Calendar Two View Options</p>
151150
<div class="btn-group">
152-
<button class="btn btn-success" ng-click="changeView('agendaDay', myCalendar2)">AgendaDay</button>
153-
<button class="btn btn-success" ng-click="changeView('agendaWeek', myCalendar2)">AgendaWeek</button>
154-
<button class="btn btn-success" ng-click="changeView('month', myCalendar2)">Month</button>
151+
<button class="btn btn-success" ng-click="changeView('agendaDay', 'myCalendar2')">AgendaDay</button>
152+
<button class="btn btn-success" ng-click="changeView('agendaWeek', 'myCalendar2')">AgendaWeek</button>
153+
<button class="btn btn-success" ng-click="changeView('month', 'myCalendar2')">Month</button>
155154
</div>
156155
</div>
157-
<div class="calendar" ng-model="eventSources" calendar="myCalendar2" config="uiConfig.calendar" ui-calendar="uiConfig.calendar"></div>
156+
<div class="calendar" ng-model="eventSources" calendar="myCalendar2" ui-calendar="uiConfig.calendar"></div>
158157
</tab>
159-
<tab select="renderCalender(myCalendar3);">
158+
<tab select="renderCalender('myCalendar3');">
160159
<tab-heading>
161160
<i class="glyphicon glyphicon-bell"></i> Calendar Three
162161
</tab-heading>
@@ -166,32 +165,33 @@ <h4>This calendar uses the extended form</h4>
166165
<div class="btn-toolbar">
167166
<p class="pull-right lead">Calendar Three View Options</p>
168167
<div class="btn-group">
169-
<button class="btn btn-success" ng-click="changeView('agendaDay', myCalendar3)">AgendaDay</button>
170-
<button class="btn btn-success" ng-click="changeView('agendaWeek', myCalendar3)">AgendaWeek</button>
171-
<button class="btn btn-success" ng-click="changeView('month', myCalendar3)">Month</button>
168+
<button class="btn btn-success" ng-click="changeView('agendaDay', 'myCalendar3')">AgendaDay</button>
169+
<button class="btn btn-success" ng-click="changeView('agendaWeek', 'myCalendar3')">AgendaWeek</button>
170+
<button class="btn btn-success" ng-click="changeView('month', 'myCalendar3')">Month</button>
172171
</div>
173172
</div>
174-
<div class="calendar" ng-model="eventSources2" calendar="myCalendar3" config="uiConfig.calendar" ui-calendar="uiConfig.calendar"></div>
173+
<div class="calendar" ng-model="eventSources2" calendar="myCalendar3" ui-calendar="uiConfig.calendar"></div>
175174
</tab>
176175
</tabset>
177176
</div>
178177
</div>
179178
</div>
180179
<h3>How?</h3>
181-
<div>* The jQuery UI files are only necessary if you plan to do drag & drop / resizing</div>
182-
<pre class="prettyprint linenums">
180+
<pre class="prettyprint linenums">
183181
&lt;div ui-calendar="uiConfig.calendar" class="span8 calendar" ng-model="eventSources"&gt;&lt;/div&gt;
184182

185183
/**
186-
* calendarDemoApp - 0.1.3
184+
* calendarDemoApp - 0.9.0
187185
*/
188186
angular.module('calendarDemoApp', ['ui.calendar', 'ui.bootstrap']);
189187

190-
function CalendarCtrl($scope) {
188+
function CalendarCtrl($scope,$compile,uiCalendarConfig) {
191189
var date = new Date();
192190
var d = date.getDate();
193191
var m = date.getMonth();
194192
var y = date.getFullYear();
193+
194+
$scope.changeTo = 'Hungarian';
195195
/* event source that pulls from google.com */
196196
$scope.eventSource = {
197197
url: "http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic",
@@ -208,7 +208,7 @@ <h3>How?</h3>
208208
{title: 'Click for Google',start: new Date(y, m, 28),end: new Date(y, m, 29),url: 'http://google.com/'}
209209
];
210210
/* event source that calls a function on every view switch */
211-
$scope.eventsF = function (start, end, callback) {
211+
$scope.eventsF = function (start, end, timezone, callback) {
212212
var s = new Date(start).getTime() / 1000;
213213
var e = new Date(end).getTime() / 1000;
214214
var m = new Date(start).getMonth();
@@ -226,16 +226,16 @@ <h3>How?</h3>
226226
]
227227
};
228228
/* alert on eventClick */
229-
$scope.alertEventOnClick = function( date, allDay, jsEvent, view ){
230-
$scope.alertMessage = ('Day Clicked ' + date);
229+
$scope.alertOnEventClick = function( date, jsEvent, view){
230+
$scope.alertMessage = (date.title + ' was clicked ');
231231
};
232232
/* alert on Drop */
233-
$scope.alertOnDrop = function(event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view){
234-
$scope.alertMessage = ('Event Droped to make dayDelta ' + dayDelta);
233+
$scope.alertOnDrop = function(event, delta, revertFunc, jsEvent, ui, view){
234+
$scope.alertMessage = ('Event Droped to make dayDelta ' + delta);
235235
};
236236
/* alert on Resize */
237-
$scope.alertOnResize = function(event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view ){
238-
$scope.alertMessage = ('Event Resized to make dayDelta ' + minuteDelta);
237+
$scope.alertOnResize = function(event, delta, revertFunc, jsEvent, ui, view ){
238+
$scope.alertMessage = ('Event Resized to make dayDelta ' + delta);
239239
};
240240
/* add and removes an event source of choice */
241241
$scope.addRemoveEventSource = function(sources,source) {
@@ -265,11 +265,19 @@ <h3>How?</h3>
265265
};
266266
/* Change View */
267267
$scope.changeView = function(view,calendar) {
268-
calendar.fullCalendar('changeView',view);
268+
uiCalendarConfig.calendars[calendar].fullCalendar('changeView',view);
269269
};
270270
/* Change View */
271271
$scope.renderCalender = function(calendar) {
272-
calendar.fullCalendar('render');
272+
if(uiCalendarConfig.calendars[calendar]){
273+
uiCalendarConfig.calendars[calendar].fullCalendar('render');
274+
}
275+
};
276+
/* Render Tooltip */
277+
$scope.eventRender = function( event, element, view ) {
278+
element.attr({'tooltip': event.title,
279+
'tooltip-append-to-body': true});
280+
$compile(element)($scope);
273281
};
274282
/* config object */
275283
$scope.uiConfig = {
@@ -281,9 +289,22 @@ <h3>How?</h3>
281289
center: '',
282290
right: 'today prev,next'
283291
},
284-
dayClick: $scope.alertEventOnClick,
292+
eventClick: $scope.alertOnEventClick,
285293
eventDrop: $scope.alertOnDrop,
286-
eventResize: $scope.alertOnResize
294+
eventResize: $scope.alertOnResize,
295+
eventRender: $scope.eventRender
296+
}
297+
};
298+
299+
$scope.changeLang = function() {
300+
if($scope.changeTo === 'Hungarian'){
301+
$scope.uiConfig.calendar.dayNames = ["Vasárnap", "Hétfő", "Kedd", "Szerda", "Csütörtök", "Péntek", "Szombat"];
302+
$scope.uiConfig.calendar.dayNamesShort = ["Vas", "Hét", "Kedd", "Sze", "Csüt", "Pén", "Szo"];
303+
$scope.changeTo= 'English';
304+
} else {
305+
$scope.uiConfig.calendar.dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
306+
$scope.uiConfig.calendar.dayNamesShort = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
307+
$scope.changeTo = 'Hungarian';
287308
}
288309
};
289310
/* event sources array*/
@@ -297,11 +318,9 @@ <h3>How?</h3>
297318
</div>
298319
</div>
299320
<script type="text/javascript">
300-
301321
var _gaq = _gaq || [];
302322
_gaq.push(['_setAccount', 'UA-17352735-3']);
303323
_gaq.push(['_trackPageview']);
304-
305324
(function () {
306325
var ga = document.createElement('script');
307326
ga.type = 'text/javascript';
@@ -310,7 +329,6 @@ <h3>How?</h3>
310329
var s = document.getElementsByTagName('script')[0];
311330
s.parentNode.insertBefore(ga, s);
312331
})();
313-
314332
</script>
315333
</body>
316334
</html>

0 commit comments

Comments
 (0)