dayclick and select not working if days not seen on screen - fullcalendar

Question

Code is here
The problem is if the calendar is completely shown in screen, the dayclick event and select event work fine, but if you change the resolution or the screen size, in those days that they are not shown the events doesn´t work.
$(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>

Answer 1

found a solution:
.fc-scroller { overflow-x: visible !Important; }