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

Calendar - Make delete icon stay on event

Asked by Anonymous
1 month 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]
29 days 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
29 days 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
28 days ago.

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

Thanks,
Doug

Answer posted by Doug
28 days ago.

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

New Reply
This reply is
Your name (optional):