Question

假设我想在用户单击FullCalendar的事件时打开模式弹出窗口，我在Full Calendar的“ eventClick”部分写了一些逻辑。直到我进入默认视图（将其设置为“月”），该方法才能正常工作。

但是，如果我尝试从一个视图切换到另一个视图，则不会被触发，几乎就像它死了一样。

我在做什么错？这是我的完整日历的代码。我还尝试根据文档添加viewRender事件，但是它不起作用

function initCalendar2(oggetti){
    debugger;
    $('.calendar').fullCalendar({

      header: {
        left: 'prev,next today',
        center: 'title',
        //right: 'month,agendaWeek,agendaDay,' +vistaAgenda
        right: 'month,agendaWeek,agendaDay,listDay,listWeek'
      },
      views: {
        listDay: { buttonText: 'Lista Giorno'},
        listWeek: { buttonText: 'Lista Sett'}
      },


      eventClick: function(calEvent, jsEvent, view) {
                      debugger;
          //Send 2 values to the modal
          $("#dataArrivo").val(calEvent.start.toISOString().split('T')[0]);
          $("#dataConsegna").val(calEvent.end.toISOString().split('T')[0]);
          //Opens the modal
          var targeted_popup_class = $(this).attr('data-popup-open');
          $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
          //e.preventDefault();
          var newDateOne;
          var newDateTwo;
          //This triggers only when the save button of the modal is clicked
          setTimeout(function() {
              $("#save").click(function() {
              var tmp1 = $("#dataArrivo").val();
              var tmp2 = $("#dataConsegna").val();
              newDateOne = new Date(tmp1);
              newDateOne.setDate(newDateOne.getDate());
              newDateTwo = new Date(tmp2);
              newDateTwo.setDate(newDateTwo.getDate());
              var tmp = calEvent.id.split("&");
              var idToSend = "";
              for (var i = 0; i < tmp.length-1; i++) {
                  if (i == tmp.length-2) {
                      idToSend += tmp[i];
                  } else {
                      idToSend += tmp[i]+"&";
                  }
              } if (newDateOne !== calEvent.start || newDateTwo !== calEvent.end) {
                  var actualDate = new Date(calEvent.start);
                  debugger;
                  //This ajax call will save the event's new dates in the DB
                  $.ajax({
                         url: 'calendariomanagement/listaPraticheFormJSONByIdProgettoCommittenteAndTipoVal/'+ idToSend +'/modDate/' +  nuovaDataArrivo.toDateString() + '&' +  nuovaDataConsegna.toDateString() + '&' + actualDate.toDateString(),
                         type:'POST',
                         async:false,
                         success: function(data) {
                             var targeted_popup_class = $(this).attr('data-popup-close');
                             $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
                             location.reload();
                             /*calEvent.start = dataUno;
                             calEvent.end = dataDue;
                             $('#calendar').fullCalendar('updateEvent', calEvent);*/
                         }
                      });
              }
              }), 350}
          );

        },
      viewRender: function(view, element) {
          debugger;
          $('#calendar').fullCalendar('rerenderEvents');
      },
      locale: 'it',
      defaultView: 'month',
      defaultDate: moment(),
      navLinks: true, // can click day/week names to navigate views
      editable: false,
      eventDurationEditable: false,
      //weekends:false,
      eventLimit: true, // allow "more" link when too many events
      events: oggetti
    });

Answer 1

在这里放置任何可能遇到类似我的问题的人。这是我使用HTML定义的模式弹出窗口

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
 <div class="modal-dialog">

*<!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Cambio data</h4>
  </div>
  <div class="modal-body">
  <p> Inserire i nuovi valori nel formato anno-mese-giorno (es.: 2018-07-03). Nel 
caso non si volesse modificare nessun campo, semplicemente chiudere questo pop-up</p>
  <label for="arrivo">Data Arrivo:</label>
    <input type="text" name="dataArrivo" id="dataArrivo" class="form-control">
  <label for="consegna">Data Riconsegna:</label>
  <input type="text" name="dataConsegna" id="dataConsegna" class="form-control">
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
    <button type="button" class="btn btn-default" id="save" data-dismiss="modal">Salva</button>
  </div>
</div>

*

在FullCalendar加载之后，我在jQuery中添加了它

        $(".fc-content").attr('data-toggle', 'modal');
        $(".fc-content").attr('data-target','#myModal');

但是，当然，更改视图后，这些属性会丢失，并且没有机会重新插入它们。作为解决方案（由ADyson指出），解决方法是使用Bootbox对象定义模式，以便我可以动态地使用它

FullCalendar的eventClick更改视图后不起作用

1 个答案: