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

Commit 6355b83

Browse files
jkurzjkurz
committed
update(demo) added bootstrap tabs to the demo to show how to use the calendar in tabs
Signed-off-by: Josh Kurz <josh.kurz@turner.com>
1 parent 877d30c commit 6355b83

File tree

3 files changed

+72
-24
lines changed

3 files changed

+72
-24
lines changed

‎demo/calendarDemo.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ section {
8181
/*** Calendar ***/
8282

8383
.calAlert{
84-
width: 680px; float: right; margin-bottom: 5px;
84+
width: 595px; float: right; margin-bottom: 5px;
8585
}
8686

8787
.calXBtn{

‎demo/calendarDemo.js

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
22
* calendarDemoApp - 0.1.3
33
*/
4-
angular.module('calendarDemoApp', ['ui.calendar']);
4+
angular.module('calendarDemoApp', ['ui.calendar', 'ui.bootstrap']);
55

66
function CalendarCtrl($scope) {
77
var date = new Date();
@@ -31,6 +31,16 @@ function CalendarCtrl($scope) {
3131
var events = [{title: 'Feed Me ' + m,start: s + (50000),end: s + (100000),allDay: false, className: ['customFeed']}];
3232
callback(events);
3333
};
34+
35+
$scope.calEventsExt = {
36+
color: '#f00',
37+
textColor: 'yellow',
38+
events: [
39+
{type:'party',title: 'Lunch',start: new Date(y, m, d, 12, 0),end: new Date(y, m, d, 14, 0),allDay: false},
40+
{type:'party',title: 'Lunch 2',start: new Date(y, m, d, 12, 0),end: new Date(y, m, d, 14, 0),allDay: false},
41+
{type:'party',title: 'Click for Google',start: new Date(y, m, 28),end: new Date(y, m, 29),url: 'http://google.com/'}
42+
]
43+
};
3444
/* alert on eventClick */
3545
$scope.alertEventOnClick = function( date, allDay, jsEvent, view ){
3646
$scope.$apply(function(){
@@ -79,6 +89,10 @@ function CalendarCtrl($scope) {
7989
$scope.changeView = function(view,calendar) {
8090
calendar.fullCalendar('changeView',view);
8191
};
92+
/* Change View */
93+
$scope.renderCalender = function(calendar) {
94+
calendar.fullCalendar('render');
95+
};
8296
/* config object */
8397
$scope.uiConfig = {
8498
calendar:{
@@ -96,5 +110,6 @@ function CalendarCtrl($scope) {
96110
};
97111
/* event sources array*/
98112
$scope.eventSources = [$scope.events, $scope.eventSource, $scope.eventsF];
113+
$scope.eventSources2 = [$scope.calEventsExt, $scope.eventsF, $scope.events];
99114
}
100115
/* EOF */

‎demo/index.html

Lines changed: 55 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
<script src="../bower_components/jquery-ui/ui/jquery.ui.draggable.js"></script>
1616
<script src="../bower_components/jquery-ui/ui/jquery.ui.droppable.js"></script>
1717
<script src="../bower_components/angular/angular.js"></script>
18+
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.9.0.js"></script>
1819
<script src="../bower_components/fullcalendar/fullcalendar.js"></script>
1920
<script src="../bower_components/fullcalendar/gcal.js"></script>
2021
<script src="../src/calendar.js"></script>
@@ -78,35 +79,67 @@ <h3>Why?</h3>
7879
<li ng-repeat="e in events">
7980
<div class="alert alert-info">
8081
<a class="close" ng-click="remove($index)"><i class="icon-remove"></i></a>
81-
<b> {{e.title}}</b> - {{e.start | date:"MMM dd"}}
82+
<b> <input ng-model="e.title"></b> - {{e.start | date:"MMM dd"}}
8283
</div>
8384
</li>
8485
</ul>
8586

8687
</div>
8788

8889
<div class="span8">
89-
<div class="alert-success calAlert" ng-show="alertMessage != undefined && alertMessage != ''">
90-
<h4>{{alertMessage}}</h4>
91-
</div>
92-
<div class="btn-toolbar">
93-
<p class="pull-right lead">Calendar One View Options</p>
94-
<div class="btn-group">
95-
<button class="btn btn-success" ng-click="changeView('agendaDay', myCalendar)">AgendaDay</button>
96-
<button class="btn btn-success" ng-click="changeView('agendaWeek', myCalendar)">AgendaWeek</button>
97-
<button class="btn btn-success" ng-click="changeView('month', myCalendar)">Month</button>
98-
</div>
99-
</div>
100-
<div class="calendar" ng-model="eventSources" calendar="myCalendar" config="uiConfig.calendar" ui-calendar="uiConfig.calendar"></div>
101-
<div class="btn-toolbar">
102-
<p class="pull-right lead">Calendar Two View Options</p>
103-
<div class="btn-group">
104-
<button class="btn btn-success" ng-click="changeView('agendaDay', myCalendar2)">AgendaDay</button>
105-
<button class="btn btn-success" ng-click="changeView('agendaWeek', myCalendar2)">AgendaWeek</button>
106-
<button class="btn btn-success" ng-click="changeView('month', myCalendar2)">Month</button>
107-
</div>
108-
</div>
109-
<div class="calendar" ng-model="eventSources" calendar="myCalendar2" config="uiConfig.calendar" ui-calendar="uiConfig.calendar"></div>
90+
<tabset>
91+
<tab select="renderCalender(myCalendar1);">
92+
<tab-heading>
93+
<i class="glyphicon glyphicon-bell"></i> Calendar One
94+
</tab-heading>
95+
<div class="alert-success calAlert" ng-show="alertMessage != undefined && alertMessage != ''">
96+
<h4>{{alertMessage}}</h4>
97+
</div>
98+
<div class="btn-toolbar">
99+
<p class="pull-right lead">Calendar One View Options</p>
100+
<div class="btn-group">
101+
<button class="btn btn-success" ng-click="changeView('agendaDay', myCalendar1)">AgendaDay</button>
102+
<button class="btn btn-success" ng-click="changeView('agendaWeek', myCalendar1)">AgendaWeek</button>
103+
<button class="btn btn-success" ng-click="changeView('month', myCalendar1)">Month</button>
104+
</div>
105+
</div>
106+
<div class="calendar" ng-model="eventSources" calendar="myCalendar1" config="uiConfig.calendar" ui-calendar="uiConfig.calendar"></div>
107+
</tab>
108+
<tab select="renderCalender(myCalendar2);">
109+
<tab-heading>
110+
<i class="glyphicon glyphicon-bell"></i> Calendar Two
111+
</tab-heading>
112+
<div class="alert-success calAlert" ng-show="alertMessage != undefined && alertMessage != ''">
113+
<h4>{{alertMessage}}</h4>
114+
</div>
115+
<div class="btn-toolbar">
116+
<p class="pull-right lead">Calendar One View Options</p>
117+
<div class="btn-group">
118+
<button class="btn btn-success" ng-click="changeView('agendaDay', myCalendar2)">AgendaDay</button>
119+
<button class="btn btn-success" ng-click="changeView('agendaWeek', myCalendar2)">AgendaWeek</button>
120+
<button class="btn btn-success" ng-click="changeView('month', myCalendar2)">Month</button>
121+
</div>
122+
</div>
123+
<div class="calendar" ng-model="eventSources" calendar="myCalendar2" config="uiConfig.calendar" ui-calendar="uiConfig.calendar"></div>
124+
</tab>
125+
<tab select="renderCalender(myCalendar3);">
126+
<tab-heading>
127+
<i class="glyphicon glyphicon-bell"></i> Calendar Three
128+
</tab-heading>
129+
<div class="alert-success calAlert">
130+
<h4>This calendar uses the extended form</h4>
131+
</div>
132+
<div class="btn-toolbar">
133+
<p class="pull-right lead">Calendar One View Options</p>
134+
<div class="btn-group">
135+
<button class="btn btn-success" ng-click="changeView('agendaDay', myCalendar3)">AgendaDay</button>
136+
<button class="btn btn-success" ng-click="changeView('agendaWeek', myCalendar3)">AgendaWeek</button>
137+
<button class="btn btn-success" ng-click="changeView('month', myCalendar3)">Month</button>
138+
</div>
139+
</div>
140+
<div class="calendar" ng-model="eventSources2" calendar="myCalendar3" config="uiConfig.calendar" ui-calendar="uiConfig.calendar"></div>
141+
</tab>
142+
</tabset>
110143
</div>
111144
</div>
112145
</div>

0 commit comments

Comments
 (0)