eventClick: function(calEvent, jsEvent, view) {

            alert('Event: ' + calEvent.title);
            alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
            alert('View: ' + view.name);
            alert('This needs to be deleted');

        // change the border color just for fun
        $(this).css('border-color', 'red');
        $('#calendar').fullCalendar(
            'removeEvents'
            [this] );

    },

$('#calendar').fullCalendar('removeEvents' , function(ev){
    return (ev._id == calEvent._id);
})

$('#calendar').fullCalendar('removeEvents', calEvent._id);

event = {
    start: "2017-04-06T16:00:00.510Z",
    end: "2017-04-06T21:00:00.510Z",
    id: "idForThisEvent",
    title: "Event 1"
  }

eventClick: function(calEvent, jsEvent, view) {
    $('#calendar').fullCalendar('removeEvents', calEvent.id);
},

eventRender = ({ event, el }) => {
  const duration = moment.duration(moment(event.end).diff(event.start))
  const hours = duration.asHours()

  el.style.border = `1px solid ${event.backgroundColor}`
  el.className = `${el.className} event-class` // allows showing the edit and remove buttons only when hovering over the event

  if (!event.extendedProps.published && !event.allDay) {
      el.className = el.className + ' unpublished'  //it grays out the event if it hasn't been published
  }

  const child = document.createElement('div')
  child.innerHTML = `
      <div>
        <div  style="${styles.title}" class="pt-4">
          <strong>${hours} hrs </strong>
        </div>

        <div class="event-actions">
          <button style="${styles.editStyle}" data-event-id=${event.id}>
            <i class='fa fa-edit'></i>
          </button>
          <button style="${styles.removeStyle}" data-event-id=${event.id}>
            <i class='fa fa-trash-o'></i>
          </button>
        </div>
    </div>`

  el.appendChild(child)
  const btns = el.getElementsByTagName('button')
  const self = this
  btns[0].addEventListener('click', e => {
    self.onEditEvent(e)
  })
  btns[1].addEventListener('click', e => {
    self.onRemoveEvent(e)
 })
}

.fc-time-grid .fc-event {
   overflow: auto;
 }

 .event-class .event-actions {
   display: none;
 }


 .event-class:hover .event-actions {
   display: flex;
   justify-content: space-around;
   font-size: 1.75rem;
   padding-top: 4px;
 }

.unpublished {
  background-image: url('../assets/img/unpublish.png');
}