FullCalendar external event drop two different modals

Question

I'm sort of self-teaching myself through trial and error, lots of errors :) I'm stuck. I am using fullCalendar which is working great from JSON feeds.

I want to drag external events to the calendar and depending on the event dragged, show a different modal. The event drop and modal show is working, except its opening both (vacation on top of repair) every time.

<div id="external-events">
<div id="vacationdrop" class="fc-event vacation" className="vacation">Vacation</div>
<div id="repairdrop" class="fc-event repair" className="repair">Repair</div
</div>

The event drop:

drop: function() {
    if (jQuery('#external-events .fc-event').hasClass('repair') {
        var territory = jQuery(terrDropdown).find(':selected').text();
        var start = moment(start).format("YYYY-MM-DD");
        var end = moment(end).format("YYYY-MM-DD");
        jQuery('#calendarRepairModal #startdate').val(start);
        jQuery('#calendarRepairModal #enddate').val(end);
        jQuery('#calendarRepairModal #terr').val(territory);
        jQuery("#calendarRepairModal").modal("show");

      }
    };

    else {

      if (jQuery('#external-events .fc-event').hasClass('vacation') {
          var territory = jQuery(terrDropdown).find(':selected').text();
          var start = moment(start).format("YYYY-MM-DD");
          var end = moment(end).format("YYYY-MM-DD");
          jQuery('#calendarVacationModal #startdate').val(start);
          jQuery('#calendarVacationModal #enddate').val(end);
          jQuery('#calendarVacationModal #terr').val(territory);
          jQuery("#calendarVacationModal").modal("show");
        };)

    },

Any help would be appreciated. I did search quite extensively but nothing that resembles my objective. Also, I've written jQuery out each time because I'm also using wordpress, and its finicky.

ADyson ADyson · Accepted Answer · 2018-01-10T10:29:29

It's hard to be sure exactly why you get the behaviour you describe, because the code in your sample does not compile, however it's clear that

jQuery('#external-events .fc-event')

will return all your external events, because it selects everything within the external-events box which has the fc-event class - which is all of them. Then, executing

.hasClass("repair")

on that list of events means it return true if any of those events also have the class "repair". So because that's your first if statement, it will always display the repair modal if you have at least one "repair" event in your external event list.

I think what you meant to do was identify the specific event which was dragged and dropped. For that you can use the this object. As mentioned in the documentation (https://fullcalendar.io/docs/dropping/drop/) in the context of the "drop" callback, this represents the single element which has been dropped in order to trigger the callback.

e.g.

drop: function(date, jsEvent, ui) {
    if ($(this).hasClass('repair')) {

and later...

if ($(this).hasClass('vacation')) {

See a (slightly simplified) demo here http://jsfiddle.net/sbxpv25p/97/ which shows the use of this. (I had to guess / just put in basic things) with some of your code, just to make it work, but you can ignore those bits, and focus on the "drop" callback).

FullCalendar external event drop two different modals

1 Answers