![i'm getting like below image, but need to display side by side](https://i.stack.imgur.com/MT8PV.png)
Мне нужна помощь, чтобы отобразить изображение как событие рядом.Я пытался, но он показывает один за другим.мой код для добавления изображения:
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.
}
мой код CSS:
/* -- 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;
}
согласно моим выходным наблюдениям, я обсуждаю ниже 3 вещи.
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
** Примечание: ** наконец, одно событие отображается в одном отдельном tr и td.
Я пробовал, как на картинке выше, но мне нужно больше точности для отображения событий в виде изображений.Я новичок в CSS и JavaScript.пожалуйста, помогите мне достичь этой проблемы.Заранее спасибо.