代码为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>
答案 0 :(得分:0)
找到了解决方案:
.fc-scroller { overflow-x: visible !Important; }