如果屏幕上没有显示天数,请点击日期并选择不工作

时间:2017-03-14 17:00:22

标签: fullcalendar

代码为here

问题是如果日历完全显示在屏幕上,日期点击事件和选择事件工作正常,但如果您更改分辨率或屏幕大小,那么在未显示日期时,事件不起作用。

 $(function() {
   $('#calendar').fullCalendar({
     customButtons: {
       botonMenu: {
         text: ' # OPCIONES ',
         click: function() {
           $('#calendar_menu_lateral').sidebar('toggle');
         }
       }
     },
     header: {
       left: 'prev,next today botonMenu',
       center: 'title',
       right: 'month, agendaWeek, agendaDay'
     },
     defaultDate: '2017-03-22',
     defaultView: 'month',
     editable: true,
     selectable: true,
     select: function(start, end, jsEvent, view) {

       var m = moment(start);
       var date = m.format()

       if (view.name != 'agendaDay') {
         $('#calendar').fullCalendar('changeView', 'agendaDay');
         $('#calendar').fullCalendar('gotoDate', date);
       } else if (view.name == 'agendaDay') {
         $("input[name=inicio]").val(date);
         $("input[name=finaliza]").val(date);
         $("input[name=nombreEvento], #usersadds").val("");
         $("#usuarios").html("");
         $("#tipoEvento").prop('selectedIndex', 0);
         $("#fieldsUsuarios").slideUp();
         $("#eventos").modal('show').css({
           'top': '40px',
           'margin-top': '0'
         });
       }
     },
     eventClick: function(evento, jsEvent, view) {
       var ini = moment(evento.start).format("dddd DD-MM-YYYY HH:mm");
       var fin = moment(evento.end).format("dddd DD-MM-YYYY HH:mm");

       if (ini == "Invalid date")
         ini = "Sin horario de inicio"

       if (fin == "Invalid date")
         fin = "Sin horario de finalización";

       $("#origen_").html(evento.origen);
       $("#titulo_").html(evento.title);
       $("#descripcion_evento").html(evento.descripcion);
       $("#link_evento").html(evento.link);
       $("#link_evento").prop("href", evento.link);
       $("#horarios_").html(ini.capitalizeWords() + " - " + fin.capitalizeWords());
       $("#id_evento").val(evento.id);
       $("#usuario_").val(evento.origen);

       if (usuario_origen == evento.origen)
         $("#eliminar_evento").show();
       else
         $("#eliminar_evento").hide();

       $("#info_").modal("show").css({
         'top': '40px',
         'margin-top': '0'
       });

     },

     events: [{
       "id": "3",
       "title": "asdf",
       "start": "2017-03-31 10:30:00",
       "end": "2017-03-31 10:30:00",
       "color": "orange",
       "editable": false,
       "borderColor": "black",
       "textColor": "black",
       "origen": "herherrera",
       "descripcion": "asdf",
       "link": "https:\/\/intranext.ejercito.mil.ar"
     }, {
       "id": "1",
       "title": "Primera anotacion",
       "start": "2017-03-08 07:00:00",
       "end": "2017-03-08 07:00:00",
       "color": "purple",
       "origen": "aramone",
       "descripcion": "aguna guebada",
       "link": ""
     }, {
       "id": "2",
       "title": "asdfasdf",
       "start": "2017-03-10 06:30:00",
       "end": "2017-03-10 06:30:00",
       "color": "orange",
       "origen": "aramone",
       "descripcion": "ls\u00f1akflpsdaf asdfasdf",
       "link": ""
     }, {
       "id": "6",
       "title": "tres",
       "start": "2017-03-11 06:00:00",
       "end": "2017-03-11 07:00:00",
       "color": "purple",
       "origen": "aramone",
       "descripcion": "adfasdf asdfm asdka s{lasdpf{adsfui adskf as\u00f1dkfupwaidj casoiudf asdf",
       "link": ""
     }, {
       "id": "7",
       "title": "otro mas",
       "start": "2017-03-09 09:30:00",
       "end": "2017-03-10 09:30:00",
       "color": "grey",
       "origen": "aramone",
       "descripcion": "asdgf asdfasdf a asdfasdfa sd",
       "link": ""
     }]

   });

 });
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.8/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.8/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.2.0/fullcalendar.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.2.0/fullcalendar.min.js"></script>


<div class="ui container">

  <div id="calendar"></div>

</div>

1 个答案:

答案 0 :(得分:0)

找到了解决方案: .fc-scroller { overflow-x: visible !Important; }