<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>  
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.min.js"></script> 
    <script src="https://rawgithub.com/angular-ui/ui-calendar/master/src/calendar.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
    <link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.css" rel="stylesheet" />
  </head>
  <body>

<div ng-controller="ModalDemoCtrl">

    <!-- Calendar modal -->
    <script type="text/ng-template" id="calModalContent.html">
        <div class="modal-header">
            <h3>Calendar</h3>
            <p>Click day to add event</p>
        </div>
        <div class="modal-body">
            <div>
              <div ui-calendar="uiConfig.calendar" ng-model="eventSources"></div>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
    </script>

    <!-- Other modal -->
    <script type="text/ng-template" id="newModalContent.html">
        <div class="modal-header">
            <h3>I'm a modal too!</h3>
        </div>
        <div class="modal-body">
            <p>Click OK to add event</p>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
    </script>
    
    <button class="btn" ng-click="open()">Open calendar</button>

</div>
  </body>
</html>
angular.module('plunker', ['ui.calendar', 'ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $timeout) {

  $scope.items = ['item1', 'item2', 'item3'];

  // Open primary modal
  $scope.open = function () {

    var modalInstance = $modal.open({
      templateUrl: 'calModalContent.html',
      controller: ModalInstanceCtrl,
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function () {
      return;
    }, function () {
      console.log('Modal dismissed at: ' + new Date());
    });
  };


};

// Controller for primary modal
var ModalInstanceCtrl = function ($scope, $modal, $modalInstance, items) {

  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };

  $scope.ok = function () {
    $modalInstance.close($scope.selected.item);
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
  
  $scope.open = function() {
    $scope.openModal();
  };
  
  // Open modal from modal
  $scope.openModal = function (eventObj) {
    console.log('Opening modal...');
      var modalInstance = $modal.open({
        templateUrl: 'newModalContent.html',
        controller: NewModalInstanceCtrl,
        backdrop: false,
        resolve: {
          event: function () {
            return eventObj;
          }
        }
      });
    
    // Scope apply here to make modal show up
    $scope.$apply(function() {
      modalInstance.result.then(
        function (event) {
          console.log('Modal closed at: ' + new Date());
          console.log(event);
          $scope.events.push(event);
        }, 
        function () {
          console.log('Modal dismissed at: ' + new Date());
        }
      );
    });
    
  };
  
  var date = new Date();var d = date.getDate();var m = date.getMonth();var y = date.getFullYear();
  $scope.events= [ 
        {type:'party',id: 999,title: 'Repeating Event 2',start: new Date(y, m, d - 3, 16, 0),allDay: false},
        {type:'party',id: 999,title: 'Repeating Event 2',start: new Date(y, m, d + 4, 16, 0),allDay: false},
        {type:'party',title: 'Meeting 2',start: new Date(y, m, d, 10, 30),allDay: false}
  ];
  
  $scope.eventSources = [$scope.events];
  
  $scope.uiConfig = {
    calendar: {
      dayClick: function(event) {console.log('Day clicking');$scope.openModal(event)}
    }
  };

  $scope.addEvent = function() {
    console.log('Adding event');
      $scope.events.push({type:'party',id: 34,title: 'Added with button',start: new Date(y, m, d + 1, 12, 0),allDay: false});  
  };
  
    
};

// Controller for modal created from other modal
var NewModalInstanceCtrl = function ($scope, $modalInstance, event) {

  var date = new Date(event);var d = date.getDate();var m = date.getMonth();var y = date.getFullYear();
  $scope.ok = function () {
    $modalInstance.close({type:'party',id: 999,title: 'Added from modal',start: new Date(y, m, d, 16, 0),allDay: false});
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };

  
};