Original event in clickCallbacks

[kylestetz]

Original event in clickCallbacks

[kylestetz]

I am not 100% sure I understand what the end result should be, but let me toss out an idea– if the calendar didn't refresh when you added a new event, would that solve your problem?

Here's the source code to the addEvents method:

Clndr.prototype.addEvents = function(events) {
  // go through each event and add a moment object
  if(this.options.multiDayEvents) {
    this.options.events = $.merge(this.options.events, this.addMultiDayMomentObjectsToEvents(events));
  } else {
    this.options.events = $.merge(this.options.events, this.addMomentObjectToEvents(events));
  }

  this.render();
  return this;
};

For the purposes of your code, you can get away with only calling

this.options.events = $.merge(this.options.events, this.addMomentObjectToEvents(events));

if you aren't using multiday events. This would bypass the render function and allow you to handle things a little more naturally.

If I'm totally off here and that's not the issue, would you mind telling me a bit more about your calendar and what the effect of this code should be?

[Padam87]

A 4th option would be to just update the existing DOM elements instead of replacing.

IMO that is the best solution if you think globally. It should be fairly easy to add a refresh method to the prototype.

[piuccio]

I need the call to this.render() to add the event class to the date I clicked.

Fourth solutions looks like this

this.options.events = $.merge(this.options.events, this.addMomentObjectToEvents(events));
target.element.addClass("event");

But that feels like reinventing the wheel, and touching the calendar internals might not be future compatible.

I'm now using this if

if (target.parents(".dropdown-container").length || target.parents("body").length === 0) {
    return;
}

so if I click on a detached node nothing happens.

Feel free to close this issue if you think there's no need to pass the original event to click callbacks.

[kylestetz]

Okay I think I understand what you're going for now. I'm hesitant to add the click event to the API because I haven't seen any other use cases for it, and in your case there are other changes you could make to avoid dealing with event propagation.

Rather than checking (".dropdown-container").length, which is too closely coupled to the render mechanism of clndr, could you just make a boolean variable that you modify from inside the click handler?

For example, in clndr:

clickEvents: {
    click: function (target) {
        eventWasAdded = true;
        this.addEvents([{
            date: target.date
        }]);
    }
}

in your body click handler:

$("body").click(function (event) {
    var target = $(event.target);
    if (target.parents(".dropdown-container").length || eventWasAdded) {
        eventWasAdded = false;
        return;
    }
    $(".active").removeClass("active");
});

That click handler now covers both use cases: either the click handler caught a click inside of the clndr instance (so the length of the selector is > 0) or you just added an event, in which case we know the click was on the clndr.

[kylestetz]

Hey @piuccio, just wondering if you got this working.

[piuccio]

Oh yes, I added some extra logic in my click callback.