jQuery Plugin : Full Calender Plugin : Delete button on Hover in Events

// iN 'eventAfterAllRender' Callback of full calender
,
eventAfterAllRender: function(view){
  addDeleteButtonOnEvents();
  customizeEventForPupup();
},
function addDeleteButtonOnEvents() {
  var $fcEvent = $(document).find('.fc-event');
  $fcEvent.each(function () {
    var $fcEvent = $(this);
    var splittedHREF = $fcEvent.attr('href').split('/');

    // GET SECOND LAST ITEM FROM ARRAY
    var eventId = splittedHREF.slice(-2, -1)[0];

    $(this).find('.fc-event-inner').append(
    '<div id="fc-event-delete-button-' + eventId + '" title="Delete" rel="tooltip" class="fc-event-delete-button"></div>'
    );
  });

  // Assign fancy tooltip to delete button recently added to the  DOM
  $(document).find('.fc-event-delete-button').tooltip();
}
.fc-event{
  &:hover .fc-event-delete-button{
      display: block;
  }
  .fc-event-delete-button{
    display: none;
    background: url(asset-path('icon-delete1.png')) no-repeat 0 0;
    width: 14px;
    height: 17px;
    margin: 0 0 0 10px;
    position: absolute;
    right: 8px;
    top: 2px;
  }
  .fc-event-time {
    display: none;
  }

  .fc-event-title{
    text-align: center;
  }
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s