<style type="text/css">
     .newUlView {
     padding: 5px;
     margin: 3px;
     }
     .subnavbar .mainnav > li:nth-child(4) > a{
     color: #ff9900;
     }

     .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;
     }

  
  
     /*#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="main">
     <div class="container">
        <div class="row">

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

              <div id='wrap'>

                       <div id='external-events' class="col-xs-12 col-md-3">

                          <h4>Draggable Events</h4>

                          <label ng-repeat="item in eventList" 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>
                          </label>
                          <!-- <p>

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

                          </p> -->

                       </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 style='clear:both'></div>

                    </div>

           </div>

        </div>

        <div>
        </div>

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