search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Calendar - Make delete icon stay on event

Asked by Anonymous
7 months ago.

On the calendar, the delete (X) icon doesn't show up until a user hovers over the event.

Without pointing to the event, the user won't know where the delete icon is. Is there any way I can make it stay on the event?

Thanks,
Doug

Answer posted by Dan Letecky [DayPilot]
7 months ago.

If you disable the built-in delete icon using eventDeleteHandling="Disabled" you will be able to add a custom icon using active areas. See also an example in the docs (https://doc.daypilot.org/scheduler/event-deleting/):

<div id="dp"></div>
<script type="text/javascript">
  var dp = new DayPilot.Scheduler("dp");
  dp.onBeforeEventRender = function(args) {
    args.data.areas = [
      {
        top: 3,
        right: 2,
        bottom: 9,
        width: 17,
        onClick: function(args) { dp.events.remove(args.source); },
        visibility: "Visible",
        css: "event_action_delete"
      }
    ];
  };
  // ...
  dp.init();
</script>

Use visibility: "Visible" to make sure that the icon is always visible.

Comment posted by Anonymous
7 months ago.

Thanks, however, the class event_action_delete has no associated styles according to Chrome inspector. Maybe they changed the styles since they made the tutorial? It just looks like a blank space.

Comment posted by Doug
7 months ago.

Fixed now. I just used a font awesome icon and everything works great.

Thanks,
Doug

Answer posted by Doug
7 months ago.

Spoke too soon, that solved one problem but created another.... I'll make another post though.

This question is more than 3 months old and has been closed. Please create a new question if you have anything to add.