Question

我正在使用网站上的完整日历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;
    }   
}

扩展后的输出为：

请帮助我！谢谢你。

在每月日历中，像image1空间image2一样在一天中显示多个事件（作为图像）-完整日历

0 个答案: