拖动时全日历显示事件

时间:2020-03-11 11:28:40

标签: javascript events fullcalendar fullcalendar-4

当我将事件拖到日历中时,我试图使其复制。我设法复制了事件并将其写入数据库,但是直到重新加载页面后,原始图像才显示出来。也就是说:即使复制了信息,事件也会显示为“已移动”,直到您重新加载页面为止。

拖动时会发生这种情况(这是正常现象):

重新加载页面时,它看起来像这样:

我需要的是始终这样显示,而无需重新加载页面。似乎事件没有发生。如果我要在几天内复制同一事件而不必重新加载页面,则这是必需的。

代码:

document.addEventListener('DOMContentLoaded', function() {
   var calendar = document.getElementById('calendar');
    var calendarTodo = new FullCalendar.Calendar(calendar, {
      plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'myCustomButton dayGridMonth,timeGridWeek,timeGridDay,listWeek'
      },
      locale: 'es',
      nowIndicator: true,
      allDaySlot: false,
      minTime: "08:00:00",
      maxTime: "19:00:00",
      height: 'auto',
      columnHeaderFormat: { 
        weekday: 'long',
        day: 'numeric', 
        omitCommas: true },
      hiddenDays: [6,0],
      slotEventOverlap: false,

      defaultTimedEventDuration: '00:45',
      slotDuration: '00:15:00',
      slotLabelInterval: '00:45:00',

      defaultDate: '<?php echo date('Y-m-d');?>',
      defaultView: 'timeGridDay',
      views: {
          month: {
              editable: true
          }
      },

      eventDrop: function(info) {
        if (!confirm("Se va a duplicar " + info.event.title + " al " + info.event.start.getDate() + " de " + monthNames[info.event.start.getMonth()] + ", ¿estás seguro?")) {
          info.revert();
        }else{
          grabarDuplicado(info.event);
        }
      },
      editable: false,
      eventTimeFormat: {
        hour: '2-digit',
        minute: '2-digit',
        meridiem: false,
        hour12: false
      },
      slotLabelFormat: {
        hour: '2-digit',
        minute: '2-digit',
        meridiem: false,
        hour12: false
      },

      customButtons: {
        myCustomButton: {
            text: 'Añadir festivo',
            click: function() {
                event.preventDefault();
                window.open("./index.php?view=newholiday", "popupWindow", "width=600,height=600,scrollbars=yes");
            }
        }
      },

      eventLimit: true,
      eventRender : function(info) {
        const props = info.event.extendedProps,
        rendering = info.event.rendering;
        if(rendering == "background") {
            $(info.el).html("<a href='./?view=editholiday&id="+info.event.id+"' style='color:#555'>"+info.event.title+"</a>");
        }
      },
      events: <?php echo json_encode(array_merge((array)$thejson,(array)$dias_festivos)); ?>
    });
  calendarTodo.render();
});
  function grabarDuplicado(event) {
      var d = event.start;
      var month = d.getMonth() + 1;
        if(month <= 9)
            month = '0'+month;

      var day= d.getDate();
        if(day <= 9)
            day = '0'+day;

      var fecha = d.getFullYear() + "-" + month + "-" + day;
      var hora = (d.getHours()<10?'0':'') + d.getHours() + ":" + (d.getMinutes()<10?'0':'') + d.getMinutes();
      var titulo = "";
      if(event.extendedProps.paciente_id == 9){
          titulo = event.title;
      }

      $.ajax({
        type:"POST",
        url:"./?action=addreservation",
        data:{"pacient_id":event.extendedProps.paciente_id,
              "medic_id":event.extendedProps.medic_id,
              "date_at":fecha,
              "time_at":hora,
              "status_id":1,
              "title":titulo},
        traditional:true,
        success:function(msg){
          //console.log(msg);
          //alert('Cita duplicada correctamente');
        },
        error:function(msg){
          //console.log(msg);
          alert('No se ha podido duplicar la cita');
        }
      });
    }  

0 个答案:

没有答案