我正在使用网站上的完整日历API从现有的php事件日历中开发竞赛日历,我有一个客户要求,要在一天中显示带有图像的事件。
事件为单个时,表示工作正常,如果一天中的完整日历中有多个事件到来,则显示为“ +2”。我尝试使用CSS和完整的日历重叠功能,但尚未解决。
HTML:
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<div>
<div id="calendar"></div>
</div>
</div>
</div>
我的脚本:
$(document).ready(function() {
var calendar = $('#calendar').fullCalendar({
height: 400,
contentHeight: 400,
header: {
left: 'prev',
center: 'title',
right: 'next'
},
defaultView: 'month',
contentHeight: 'auto',
editable: true,
showNonCurrentDates: false,
eventLimit: true,
textEscape: false,
events: {
url:'loadEvents-ivb.php',//LOAD RACEDAYS FROM PHP FILE.
type: 'POST',
data: {
start: $('#calendar').fullCalendar('getDate'), //SEND A DATE, TO GET RACE DAYS BY DATE.
},
color: '#0000', //CALENDAR BACKGROUND.
overlapEventsSeparate : true,
allDay:false,
//textColor: 'black'
},
eventRender: function(event, element)
{
element.find(".fc-content").prepend("<img id='venue' src='images/jQuery-calendar-ivb/"+ event.img+"' align='absmiddle' text-align='center' width='8' height='8'>"); //DISPLAY IMAGE ON CALENDAR.
//console.log(event.img);
},
eventOverlap: function(stillEvent, movingEvent) {
return stillEvent.allDay && movingEvent.allDay;
},
displayEventTime: false, //REMOVE TIME.
});
// start the hack for the date picker
$(".fc-header-toolbar .fc-center h2").attr('id', 'fc-datepicker-header').before('<input size="1" style="height: 0px; width:0px; border: 1px;" id="fc-datepicker" value="" title = "Select Date"/>');
$("#fc-datepicker").MonthPicker({
Button: false,
OnAfterMenuClose: function() {
var d = $("#fc-datepicker").MonthPicker('Validate')
//console.log(d)
if (d !== null){
$('#calendar').fullCalendar('gotoDate', d);
}
}
});
$("#fc-datepicker-header").hover(function() {
$('#fc-datepicker').MonthPicker('Open')
});
}); //Display Hyd race Calendar
CSS:
body {
font-family: Tahoma;
font-size: 12px;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.red {
font: bold 13px Arial, Helvetica, sans-serif;
color: #FF0000;
text-decoration: none;
line-height: 18px;
}
a.news-link{
font:bold 13px Arial, Helvetica, sans-serif;
color:#049C0E;
text-decoration:none;
line-height:18px;
}
a.news-link.nrcm{
padding:18px;
}{
font:bold 13px Arial, Helvetica, sans-serif;
color:#049C0E;
text-decoration:none;
line-height:18px;
}
a.news-link:hover {
font: bold 13px Arial, Helvetica, sans-serif;
color: #FF5A00;
text-decoration: underline;
line-height: 18px;
}
#ui-datepicker-div {
z-index: 5 !important;
}
div#MonthPicker_fc-datepicker {
top: 25px !important;
left: 43px !important;
}
.ui-dialog.ui-widget {
position: absolute !important;
top:170px !important;
left:700px !important;
width: 220px !important;
padding: 5px;
//border: 1px solid #777;
//background-color: #fbca93;
}
.ui-dialog.ui-widget button {
//margin-left:50px !important;
display:none;
}
.fc-scroller.fc-day-grid-container{
overflow: hidden !important;
}
.imclose {
width:100px;
height:14px;
background: url(images/close.png);
background-repeat:no-repeat;
background-position:0px 0px;
}
.imtick {
width:100px;
height:14px;
background: url(images/tick.png);
background-repeat:no-repeat;
background-position:0px 0px;
}
.row{
margin:0px;
}
.col-md-6{
width:50%; float:left; /*padding-left:2%; padding-right:2%;*/
}
/* -- Calendar Code -- */
.fc-scroller.fc-day-grid-container {
overflow: hidden !important;
height: 228px !important;
}
.fc-toolbar h2 {
font-size: 16px !important;
}
.fc-toolbar.fc-header-toolbar {
margin-bottom: 2px !important;
}
.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
float: none !important;
}
.fc-toolbar .fc-left {
float: left;
padding-top: 2px;
padding-left: 2px;
}
.fc-toolbar .fc-right {
float: right;
padding-top: 2px;
padding-right: 2px;
}
.fc td img{
margin:0px !important;
padding:0px !important;
}
.fc .fc-row {
height: 20px !important;
}
.fc td {
line-height: 10px !important;
text-align: center;
background:#fff;
padding-top:3px !important;
}
.fc th {
text-align: center;
padding: 5px 0 !important;
background:#6dafcf;
color:#fff !important;
}
.fc-basic-view .fc-body .fc-row {
min-height: 38px !important;
}
.fc button {
height: 20px !important;
padding: 0px;
background:#267596;
}
.fc button .fc-icon {
color:#fff;
}
.skeleton{
display:none;
}
/*.fc-event-container {
width:20px; float:left;
}*/
@media only screen and (max-width: 479px){
.col-md-6{
width:100%; float:left;
padding:0px; margin-bottom:20px;
}
}
扩展后的输出为:
请帮助我! 谢谢你。