如何使响应事件变得全面

时间:2019-05-28 15:58:34

标签: javascript html fullcalendar

我有一个完整的日历,但是没有显示在移动设备上每月,一天或一周的活动响应:

enter image description here

这是我的javascript:

 var calendar = $('#calendar').fullCalendar({
    //aspectRatio: 0.7,
    navLinks :true,
    monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
    monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'],
    dayNames: ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'],
    dayNamesShort: ['Dom','Lun','Mar','Mié','Jue','Vie','Sáb'],
    editable:false,
    firstDay:1,
    handleWindowResize:true,
    customButtons: {
        add_event: {
            text: '+ Agregar Evento',
            click: function() {
              $("#modalEvento").modal({
                show:true,
                backdrop:'static',
                keyboard:false
              });
            }
        }
    },
    slotDuration:'00:15:00',
    buttonText: {
      today:'Hoy',
      month:'Mes',
      week:'Semana',
      day:'Dia'
    },
    header:{
     left:'prev,next today, add_event',
     center:'title',
     right:'month,agendaWeek,agendaDay',
    },
    events: 'incld/load.php',
    selectable:true,
    selectHelper:true,
    eventBorderColor: 'red',
    eventBackgroundColor:'white',
    //eventHeight:'150',
    displayEventEnd:true, 
    selectLongPressDelay:1000, //mobile
    eventLongPressDelay:1000,
    eventAfterRender: function(event, element) {  
      html = "<div class='col-lg-12 col-xs-12'>"
      html +="<a href='javascript:void(0);' onclick='detalleEvento("+event.id+");' class='btn btn-warning btn-sm' role='button'>Detalle</a>";
      html += "&nbsp;&nbsp;&nbsp;";
      //html+= "<a href='javascript:void(0);' onclick='editarEvento("+event.id+");'><span class='badge badge-warning'>Editar</span></a>";
      //html += "&nbsp;&nbsp;";
      html += "<a href='javascript:void(0);' onclick='eliminarEvento("+event.id+");' class='btn btn-danger btn-sm' >Eliminar</a>";
      html+= "</div>"


      element.find('.fc-content').after(html)
    },
    select: function(start, end, allDay){
      if (moment().diff(start, 'days') > 0) {
        $('#calendar').fullCalendar('unselect');
        return false;
      }else{
        document.getElementById('formEvento').reset();
        var today = new Date();
        var dd = String(today.getDate()).padStart(2, '0');
        var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
        var yyyy = today.getFullYear();

        date = start._d;

        today = yyyy + '-' + mm + '-' + dd;
        $("#modalEvento #fecha_inicio").val(today);
        $("#modalEvento #fecha_fin").val(today);
        $("#modalEvento").modal('show');
      }
    },
  });//end fullcalendar

现在,要添加按钮操作,请使用带有以下代码的 eventAfterRender

eventAfterRender: function(event, element) {  
  html = "<div class='col-lg-12 col-xs-12'>"
  html +="<a href='javascript:void(0);' onclick='detalleEvento("+event.id+");' class='btn btn-warning btn-sm' role='button'>Detalle</a>";
  html += "&nbsp;&nbsp;&nbsp;";
  html += "<a href='javascript:void(0);' onclick='eliminarEvento("+event.id+");' class='btn btn-danger btn-sm' >Eliminar</a>";
  html+= "</div>"

  element.find('.fc-content').after(html)
},

也许问题是当我为操作“细节”和“ Eliminar”按钮添加此按钮时,也许有人建议,谢谢.. !!

0 个答案:

没有答案