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

dynamically add calendar object to parent scope #10 #12

Closed
wants to merge 1 commit into from
Closed

dynamically add calendar object to parent scope #10 #12

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
7 changes: 6 additions & 1 deletion demo/calendarDemo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
angular.module('calendarDemoApp', ['ui.calendar']);

function CalendarCtrl($scope) {
$scope.myCalendar = '';
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
Expand Down Expand Up @@ -32,7 +33,7 @@ function CalendarCtrl($scope) {
callback(events);
};
/* alert on eventClick */
$scope.addEventOnClick = function( date, allDay, jsEvent, view ){
$scope.alertEventOnClick = function( date, allDay, jsEvent, view ){
$scope.$apply(function(){
$scope.alertMessage = ('Day Clicked ' + date);
});
Expand Down Expand Up @@ -75,6 +76,10 @@ function CalendarCtrl($scope) {
$scope.remove = function(index) {
$scope.events.splice(index,1);
};
/* Change View */
$scope.changeView = function(view) {
$scope.myCalendar.fullCalendar('changeView',view);
};
/* config object */
$scope.uiConfig = {
calendar:{
Expand Down
14 changes: 11 additions & 3 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,12 +77,14 @@ <h3>Why?</h3>
<div class="span8">
<div class="alert-success calAlert"><h4>{{alertMessage}}</h4></div>
<div class="btn-toolbar">
<p class="pull-right lead">You can drag events below</p>
<div class="btn-group">
<button class="btn btn-info" ng-click="addRemoveEventSource(eventSources,eventSource)">Toggle an event source</button>
<button class="btn btn-success" ng-click="changeView('agendaDay')">AgendaDay</button>
<button class="btn btn-success" ng-click="changeView('agendaWeek')">AgendaWeek</button>
<button class="btn btn-success" ng-click="changeView('month')">Month</button>
</div>
</div>
<div class="calendar" ng-model="eventSources" ui-calendar="uiConfig.calendar"></div>
<div class="calendar" ng-model="eventSources" ui-calendar="uiConfig.calendar" calendar="myCalendar"></div>
</div>
</div>
</div>
Expand All @@ -93,6 +95,7 @@ <h3>How?</h3>
angular.module('calendarDemoApp', ['ui.calendar']);

function CalendarCtrl($scope) {
$scope.myCalendar = '';
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
Expand Down Expand Up @@ -121,7 +124,7 @@ <h3>How?</h3>
callback(events);
};
/* alert on eventClick */
$scope.addEventOnClick = function( date, allDay, jsEvent, view ){
$scope.alertEventOnClick = function( date, allDay, jsEvent, view ){
$scope.$apply(function(){
$scope.alertMessage = ('Day Clicked ' + date);
});
Expand Down Expand Up @@ -164,6 +167,10 @@ <h3>How?</h3>
$scope.remove = function(index) {
$scope.events.splice(index,1);
};
/* Change View */
$scope.changeView = function(view) {
$scope.myCalendar.fullCalendar('changeView',view);
};
/* config object */
$scope.uiConfig = {
calendar:{
Expand All @@ -182,6 +189,7 @@ <h3>How?</h3>
/* event sources array*/
$scope.eventSources = [$scope.events, $scope.eventSource, $scope.eventsF];
}
}
</pre>
</section>
</div>
Expand Down
12 changes: 9 additions & 3 deletions src/calendar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,15 @@ angular.module('ui.calendar', [])
require: 'ngModel',
scope: true,
restrict: 'A',
link: function(scope, elm, attrs) {
link: function(scope, elm, attrs, parent) {
var sources = scope.$eval(attrs.ngModel);
var calendar = elm.html('');
var calendar;
if(!attrs.calendar){
calendar = elm.html('');
}
else{
calendar = angular.element(elm.parent()).scope()[attrs.calendar] = elm.html('');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

elm.parent() already returns jqlite/jquery element that has .scope() on it

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

gotcha... I think we should just close this PR because #13 is more robust and gives the calendar more isolation without rendering functionality which is always good.

}
var eventsFingerprint = function() {
var fpn = "";
angular.forEach(sources, function(events) {
Expand Down Expand Up @@ -112,4 +118,4 @@ angular.module('ui.calendar', [])
});
}
};
}]);
}]);
14 changes: 3 additions & 11 deletions test/calendar.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ describe('uiCalendar', function () {
{title: 'Long Event 2',start: new Date(y, m, d - 5),end: new Date(y, m, d - 2)},
{id: 998,title: 'Repeating Event 2',start: new Date(y, m, d - 3, 16, 0),allDay: false},
{id: 998,title: 'Repeating Event 2',start: new Date(y, m, d + 4, 16, 0),allDay: true}];
//array to test equalsTracker with
//array to test equals case with
scope.events3 = [
{title: 'All Day Event 3',start: new Date(y, m, 1),url: 'http://www.atlantacarlocksmith.com'},
{title: 'Long Event 3',start: new Date(y, m, d - 5),end: new Date(y, m, d - 2)},
Expand All @@ -39,11 +39,6 @@ describe('uiCalendar', function () {
// create an array of events, to pass into the directive.
scope.events4 = [{title: 'All Day Event 3',start: new Date(y, m, 1),url: 'http://www.yoyoyo.com'}];

//equalsTracker to force the calendar to update on rare occasions
//ie... an event source is replacing another and has the same length as the prior eventSource
//or... replacing an eventSource that is an object with another eventSource
scope.equalsTracker = 0;

//event Sources array
scope.eventSources = [scope.events,scope.events2]; //End of Events Array

Expand Down Expand Up @@ -186,17 +181,14 @@ describe('uiCalendar', function () {
/* Test to see if calendar is updating when an eventSource replaces another with an equal length. */
it('should update the calendar if an eventSource has same length as prior eventSource', function () {
spyOn($.fn, 'fullCalendar');
$compile('<div ui-calendar="uiConfig.calendar" ng-model="eventSources" equals-tracker="equalsTracker"></div>')(scope);
$compile('<div ui-calendar="uiConfig.calendar" ng-model="eventSources"></div>')(scope);
var clientEventSources = $.fn.fullCalendar.mostRecentCall.args[0].eventSources;
var clientEventsLength = $.fn.fullCalendar.mostRecentCall.args[0].eventSources[0].length;
expect(clientEventsLength).toEqual(4);
expect(clientEventSources.length).toEqual(2);
expect(clientEventSources[1][0].title).toEqual('All Day Event 2');
//replace source with one that has the same length
scope.eventSources.splice(1,1,scope.events3);
//must update the equalsTracker as we would detect that the length is equal from controller
scope.equalsTracker++;
//eventSources should update inside the calendar since we incremented the equalsTracker
clientEventSources = $.fn.fullCalendar.mostRecentCall.args[0].eventSources;
expect(clientEventSources.length).toEqual(2);
expect(clientEventSources[1][0].title).toEqual('All Day Event 3');
Expand All @@ -205,7 +197,7 @@ describe('uiCalendar', function () {
clientEventsLength = $.fn.fullCalendar.mostRecentCall.args[0].eventSources[0].length;
expect(clientEventsLength).toEqual(3);

});
});

});

Expand Down