FullCalendar外部事件删除两个不同的模态

时间:2018-01-09 17:11:35

标签: jquery fullcalendar bootstrap-modal

我通过反复试验来自我教学,很多错误:)我被困住了。我使用的是fullCalendar,它可以很好地使用JSON提要。

我想将外部事件拖到日历中,并根据拖动的事件显示不同的模态。事件掉落和模态显示正在工作,除了每次都打开两个(假期在修复之上)。

<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>

事件掉落:

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");
        };)

    },

任何帮助将不胜感激。我做了相当广泛的搜索,但没有任何类似于我的目标。另外,我每次都写jQuery,因为我也使用wordpress,而且它很挑剔。

1 个答案:

答案 0 :(得分:0)

很难确定完全为什么你得到你描述的行为,因为你的样本中的代码不能编译,但很明显

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

将返回所有您的外部事件,因为它会选择具有fc-event类的外部事件框中的所有内容 - 这就是所有内容。然后,执行

.hasClass( “修复”)

在该事件列表上意味着如果这些事件的任何也具有类“修复”,则它返回true。因此,这是您的第一个if语句,如果您的外部事件列表中至少有一个“修复”事件,它将始终显示修复模式。

我认为你打算做的是识别被拖放的特定事件。为此,您可以使用this对象。正如在“drop”回调的上下文中的文档(https://fullcalendar.io/docs/dropping/drop/)中所提到的,this表示为了触发回调而被删除的单个元素。

e.g。

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

以后......

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

在此处查看(略微简化的)演示http://jsfiddle.net/sbxpv25p/97/,其中显示this的使用情况。 (我不得不猜测/只是放入基本的东西)你的一些代码,只是为了使它工作,但你可以忽略这些位,并专注于“丢弃”回调)。