Append images as event side by side in jquery full calendar

问题

i need a help to display an image as event side by side . i tried but it's showing one by one . my code for append an image:

eventRender: function(event, element) 
{
   element.find(".fc-content").prepend("<img id='venue"+i+"' src='images/jQuery-calendar-ivb/"+ event.img +"' align='absmiddle' text-align='center' width='8' height='8'>"); //DISPLAY IMAGE ON CALENDAR.
}

my css code :

/* -- css for full Calendar -- */

.calendarBox {
    height:281px !important;
}

.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;
}

as per my output observations, I discuss below 3 things.

1. calendar dates are displye in <thead>.
2. first event(image) in <tbody><tr> first image</tr>
3. second event(image) in <tr> second image</tr></tbody

** Note:** finally one event is displayed in one separate tr and td.

I'm tried as above picture but need more accuracy to display events as images. I'm a beginner in css and JavaScript. please help me to achieve this issue. Thank you In Advance.

来源：https://stackoverflow.com/questions/53866989/append-images-as-event-side-by-side-in-jquery-full-calendar

标签

javascript

php

jquery

css

fullcalendar