Skip to content

updated calendar demo #65

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

Closed
wants to merge 1 commit into from
Closed

updated calendar demo #65

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
26 changes: 26 additions & 0 deletions css/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,4 +217,30 @@ span[ui-currency] {
}
.ui-currency-zero {
color: #000;
}
/*** Calendar ***/
.calBtn{
float: left; margin-left: 5px;
}

.calAlert{
width: 680px; float: right; margin-bottom: 5px;
}

.calXBtn{
float: right; margin-top: -5px; margin-right: -5px;
}

.calWell{
float: left; margin-bottom: 40px;
}

.fc-event.openSesame .fc-event-skin{
background-color: rgb(229, 229, 11);
color: black;
}

.fc-event.customFeed .fc-event-skin{
background-color: rgb(132, 222, 175);
color: black;
}
75 changes: 63 additions & 12 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -351,33 +351,40 @@ <h4>Click to add an Event!</h4>
<button style="margin-bottom: 3px;" class="btn btn-primary" ng-click="addEvent()">Add Event</button>
<ul>
<li ng-repeat="e in events">
<p class="alert alert-info">
<p class="label label-important">
{{e.title}}
<a style="float: right; margin-top: -5px;" class="btn btn-danger" ng-click="remove($index)">x</a>
<a class="btn btn-important calXBtn" ng-click="remove($index)">x</a>
</p>
</li>
</ul>

</div>
<div ui-calendar="{height: 450,editable: true}" class="span8 calendar" ng-model="eventSources"></div>
<div class="alert-success calAlert"><h4>{{alertMessage}}</h4></div>
<div class="well">
<button class="btn btn-danger calBtn" ng-click="addRemoveEventSource(eventSources,eventSource)">Add/Remove Source</button>
<button class="btn btn-info calBtn" ng-click="changeView('month')">Month</button>
<button class="btn btn-warning calBtn" ng-click="changeView('agendaWeek')">Agenda Week</button>
<button class="btn btn-success calBtn" ng-click="changeView('agendaDay')">Day</button>
</div>
<div ui-calendar="uiConfig.calendar" class="span8 calendar" ng-model="eventSources"></div>
</div>
</div>
<h3>How?</h3>
<pre class="prettyprint linenums">
&lt;div ui-calendar="{height: 450,editable: true}" class="span8 calendar" ng-model="eventSources"&gt;&lt;/div&gt;
&lt;div ui-calendar="uiConfig.calendar" class="span8 calendar" ng-model="eventSources"&gt;&lt;/div&gt;

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

/* event source that pulls from google.com */
$scope.eventSource = {
url: "http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic",
className: 'gcal-event', // an option!
currentTimezone: 'America/Chicago' // an option!
};

};
/* event source that contains custom events on the scope */
$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)},
Expand All @@ -386,20 +393,64 @@ <h3>How?</h3>
{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.eventSources = [$scope.events, $scope.eventSource];

/* event source that calls a function on every view switch */
$scope.eventsF = function (start, end, callback) {
var s = new Date(start).getTime() / 1000;
var e = new Date(end).getTime() / 1000;
var m = new Date(start).getMonth()
var events = [{title: 'Feed Me ' + m,start: s + (50000),end: s + (100000),allDay: false, className: ['customFeed']}];
callback(events);
};
/* alert on eventClick */
$scope.alertEventOnClick = function( date, allDay, jsEvent, view ){
$scope.$apply(function(){
$scope.alertMessage = ('Day Clicked ' + date);
});
};
/* change view from scope
*
* a calendar object is attached to the scope,
* so that functions can be called at any time to control the calendar.
*/
$scope.changeView = function(view){
$scope.calendar.fullCalendar('changeView',view);
};
/* add and removes an event source of choice */
$scope.addRemoveEventSource = function(sources,source) {
var canAdd = 0;
angular.forEach(sources,function(value, key){
if(sources[key] === source){
sources.splice(key,1)
canAdd = 1;
}
})
if(canAdd === 0){
sources.push(source);
}
};
/* add custom event*/
$scope.addEvent = function() {
$scope.events.push({
title: 'Open Sesame',
start: new Date(y, m, 28),
end: new Date(y, m, 29)
end: new Date(y, m, 29),
className: ['openSesame']
});
}

/* remove event */
$scope.remove = function(index) {
$scope.events.splice(index,1);
}
/* config object */
$scope.uiConfig = {
calendar:{
height: 450,
editiable: true,
dayClick: $scope.alertEventOnClick
}
};
/* event sources array*/
$scope.eventSources = [$scope.events, $scope.eventSource, $scope.eventsF];
}
</pre>
</section>
Expand Down
59 changes: 51 additions & 8 deletions js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,13 +192,13 @@ function CalendarCtrl($scope) {
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();

/* event source that pulls from google.com */
$scope.eventSource = {
url: "http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic",
className: 'gcal-event', // an option!
currentTimezone: 'America/Chicago' // an option!
};

};
/* event source that contains custom events on the scope */
$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)},
Expand All @@ -207,19 +207,62 @@ function CalendarCtrl($scope) {
{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.eventSources = [$scope.events, $scope.eventSource];

/* event source that calls a function on every view switch */
$scope.eventsF = function (start, end, callback) {
var s = new Date(start).getTime() / 1000;
var e = new Date(end).getTime() / 1000;
var m = new Date(start).getMonth()
var events = [{title: 'Feed Me ' + m,start: s + (50000),end: s + (100000),allDay: false, className: ['customFeed']}];
callback(events);
};
/* alert on eventClick */
$scope.alertEventOnClick = function( date, allDay, jsEvent, view ){
$scope.$apply(function(){
$scope.alertMessage = ('Day Clicked ' + date);
});
};
/* change view from scope
*
* a calendar object is attached to the scope that the calendar is called from, so that functions can be called at any time to control the calendar.
*/
$scope.changeView = function(view){
$scope.calendar.fullCalendar('changeView',view);
};
/* add and removes an event source of choice */
$scope.addRemoveEventSource = function(sources,source) {
var canAdd = 0;
angular.forEach(sources,function(value, key){
if(sources[key] === source){
sources.splice(key,1)
canAdd = 1;
}
})
if(canAdd === 0){
sources.push(source);
}
};
/* add custom event*/
$scope.addEvent = function() {
$scope.events.push({
title: 'Open Sesame',
start: new Date(y, m, 28),
end: new Date(y, m, 29)
end: new Date(y, m, 29),
className: ['openSesame']
});
}

/* remove event */
$scope.remove = function(index) {
$scope.events.splice(index,1);
}
/* config object */
$scope.uiConfig = {
calendar:{
height: 450,
editable: true,
dayClick: $scope.alertEventOnClick
}
};
/* event sources array*/
$scope.eventSources = [$scope.events, $scope.eventSource, $scope.eventsF];
}
/* EOF */