angular-ui ui-calendar 1.6.7 & 0.8.1
http://stackoverflow.com/questions/28100852
this is based on:
- full calendar v 1.6.7
- ui-calendar v 0.8.1
HTML
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.6/fullcalendar.min.css">
<title>Full Calendar Test</title>
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://momentjs.com/downloads/moment.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular.js"></script>
<script src="//rawgit.com/angular-ui/ui-calendar/0.8.1/src/calendar.js"></script>
<script src="//rawgit.com/arshaw/fullcalendar/v1.6.7/fullcalendar.js"></script>
<body ng-app="app" ng-controller="MainCtrl">
<div style="font-size: 32px; color: #fff; ">
<span style="background-color: blue;" ng-click="selectCalTab(1)">Tab 1</span>
<span style="background-color: green;" ng-click="selectCalTab(2)">Tab 2</span>
</div
<br>
<div style="background-color: #999999" ng-if="calendarTab == 1">
<div ui-calendar="uiConfig.calendar" ng-model="calendarDate" calendar="myCalendar1"></div>
</div>
<div style="background-color: #989898" ng-if="calendarTab == 2">
Nothing to see in this tab
</div>
<br>
You just Selected: {{selectedDate}}
<br>
<br>
The Event Source Object looks like:<br>
<br>
{{calendarDate}}
</body>
JavaScript
var myApp = angular.module('app', ['ui.calendar', 'angularMoment']);
myApp.controller('MainCtrl', function($scope, $filter, moment, uiCalendarConfig){
$scope.calendarDate = [
{
events: [
{
title: 'From',
start: '2015-01-31',
allDay: true,
rendering: 'background',
backgroundColor: '#f26522',
},
],
}
];
$scope.setCalDate = function(date, jsEvent, view) {
var selectedDate = moment(date).format('YYYY-MM-DD'); // set dateFrom based on user click on calendar
$scope.calendarDate[0].events[0].start = selectedDate; // update Calendar event dateFrom
$scope.selectedDate = $filter('date')(selectedDate, 'yyyy-MM-dd');; // update $scope.dateFrom
console.log('$scope.uiConfig', $scope.uiConfig);
console.log('uiCalendarConfig', uiCalendarConfig);
};
$scope.uiConfig = {
calendar : {
aspectRatio: 2,
editable:true,
droppable: true,
header : {
left : 'title',
center : '',
right : 'today prev,next'
},
dayClick : $scope.setCalDate,
background: '#f26522',
},
};
$scope.calendarTab = 1;
$scope.selectCalTab = function(tab){ // function to set which calendar tab is shown in html via ng-if
if(tab==1){
$scope.calendarTab = 1;
} else {
$scope.calendarTab = 2;
}
};
});