<style type="text/css">
     .newUlView {
     padding: 5px;
     margin: 3px;
     }

     .subnavbar .mainnav > li:nth-child(5) > a{

     color: #ca5c6a;

     }

     .fc button, .fc-button-group, .fc-time-grid .fc-event .fc-time span{
        display: block;
     }
     .fc-state-default{
        background-color: #fff;
        background-image: none;
     }
     .fc-state-active, .fc-state-down{
        box-shadow: none;
        color: #fff;
        background-color: #ff9900;
     }

     .stacked:after, .stacked:before{
        display: none;
     }
     .btn-white, .btn-white:hover{
        background-color: #fff;
        background-image: none;
     }
     .fc-day-grid-event .fc-time{
        display: none;
     }

  
     /*#wrap {
        width: 1100px;
        margin: 0 auto;
     }
        
     #external-events {
        float: left;
        width: 150px;
        padding: 0 10px;
        border: 1px solid #ccc;
        background: #eee;
        text-align: left;
     }
        
     #external-events h4 {
        font-size: 16px;
        margin-top: 0;
        padding-top: 1em;
     }
        
     #external-events .fc-event {
        margin: 10px 0;
        cursor: pointer;
     }
        
     #external-events p {
        margin: 1.5em 0;
        font-size: 11px;
        color: #666;
     }
        
     #external-events p input {
        margin: 0;
        vertical-align: middle;
     }
  
     #calendar {
        float: right;
        width: 900px;
     }*/

  </style>

  
  <div class="myLoader" ng-show="showLoader">
    <img src="../img/hourglass.gif" width="50px;">
  </div>

  <div class="main">
     <div class="container">
        <div class="row">

           <div class="col-xs-12">

              <div class="col-xs-12 col-md-1">
                  <!--<div class="widget stacked">

                    <div class="widget-header">
                       <i class="fa fa-plane" aria-hidden="true"></i>
                       <h3>Enter Support Service</h3>
                    </div>
                    <div class="widget-content">
                       <label ng-repeat="item in events" ng-click="editEvent(item)" style="width: 100%;">

                          <div class="fc-event" data-drag="true" data-jqyoui-options="{revert: 'invalid'}" jqyoui-draggable="{index: {{$index}},placeholder:true,animate:true}">

                             {{item.title}}

                          </div>

                          <div class="fc-event">
                             {{item.title}}
                          </div>
                       </label>

                       <p>

                          <input type='checkbox' id='drop-remove' />
                          <label for='drop-remove'>remove after drop</label>

                       </p>

                    </div>
                 </div>
                 <div class="text-right">
                    <button class="btn btn-default btn-white" data-toggle="modal" data-target="#addEvent">Add Event</button>

                 </div> -->

              </div>

              <div class="col-xs-12 col-md-10">

                 <div class="widget stacked">
                    <div class="widget-header">
                       <i class="fa fa-calendar" aria-hidden="true"></i>

                       <h3>Schedule</h3>

                    </div>
                    <div class="widget-content">

                       <div id="my-calendar" ui-calendar="uiConfig.calendar" ng-model="eventSources" data-drop="true"></div>

                    </div>
                 </div>
              </div>
              <div style='clear:both'></div>

  			<div class="col-xs-12 col-md-1">
  			</div>

              <!-- <div ui-calendar="uiConfig.calendar" ng-model="eventSources" class="col-xs-12 col-md-9" data-drop="true" jqyoui-droppable="{multiple:true, onDrop: 'addEvent($index)'}"></div> -->

              </div>

           </div>

        </div>

        <div>
        </div>

        <!-- /row -->
     </div>
     <!-- /container -->
  </div>

  <!-- /main -->
  
  
  <div id="addEvent" class="modal fade" role="dialog" data-backdrop="static">
    <div class="modal-dialog">
      <form ng-submit="addNewEvent()">
         <div class="modal-content">
           <div class="modal-header">
             <button type="button" ng-click="cancelAdd()" class="close" data-dismiss="modal">&times;</button>
             <h4 class="modal-title">Schedule New Event</h4>
          </div>
          <div class="modal-body">
             <div class="col-md-6" style="padding-left: 0;">
              <label>Event Name:</label>
              <input type="text" ng-model="newEvent.aircraft" class="form-control">
           </div>
           <div class="col-md-6" style="padding-right: 0;">
              <label>Deploy Date:</label>
              <input type="text" datepicker ng-model="newEvent.deployDate" class="form-control">
           </div>
           <div class="clearfix"></div>
        </div>
        <div class="modal-footer">
           <input type="submit" value="Add" class="btn btn-primary">
           <button type="button" class="btn btn-default" ng-click="cancelAdd()" data-dismiss="modal">Close</button>
        </div>
      </div>
     </form>
  
     </div>
  </div>
  
  <div id="editEvent" class="modal fade" role="dialog" data-backdrop="static">
    <div class="modal-dialog">
      <form ng-submit="updateEvent()">
         <div class="modal-content">
           <div class="modal-header">
             <button type="button" ng-click="cancelAdd()" class="close" data-dismiss="modal">&times;</button>

             <h4 class="modal-title">Update Scheduled Event</h4>

          </div>
          <div class="modal-body">
             <div class="col-md-6" style="padding-left: 0;">
              <label>Event Name:</label>
              <input type="text" ng-model="editData.title" class="form-control">
           </div>
           <div class="col-md-6" style="padding-right: 0;">
              <label>Deploy Date:</label>
              <input type="text" datepicker ng-model="editData.start" class="form-control">
           </div>
           <div class="clearfix"></div>
        </div>
        <div class="modal-footer">

           <input type="submit" value="Update" class="btn btn-primary">

           <button type="button" class="btn btn-default" ng-click="cancelUpdate()" data-dismiss="modal">Close</button>
        </div>
      </div>
     </form>
  
     </div>
  </div>