<div class="wrapper wrapper-content">
<style>
.calendar {
display: table;
width: 100%;
}
.calendar-header {
display: table-row-group;
width: 100%;
}
.calendar-header .day {
display: table-cell;
text-align: center;
font-weight: bold;
border-top: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
width: 146px;
max-width: 146px;
}
.calendar-body {
display: table-row-group;
width: 100%;
}
.calendar-body .day:nth-child(1),
.calendar-header .day:nth-child(1) {
border-left: 1px solid #ddd;
}
.calendar-body .day {
display: table-cell;
position: relative;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 0 2px;
max-width: 146px;
}
.calendar-week-container {
display: table-row;
min-height: 4em;
border-style: solid;
border-width: 0;
height: 141px;
}
.fc-day-grid-event {
background-color: rgb(26, 179, 148);
border-bottom-color: rgb(26, 179, 148);
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-collapse: collapse;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(26, 179, 148);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(26, 179, 148);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(26, 179, 148);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-top-style: solid;
border-top-width: 1px;
box-sizing: content-box;
color: rgb(255, 255, 255);
cursor: pointer;
direction: ltr;
display: block;
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 11.05px;
font-weight: 400;
height: 14px;
line-height: 14.365px;
margin-bottom: 0px;
margin-left: 2px;
margin-right: 2px;
margin-top: 1px;
padding-bottom: 4px;
padding-left: 6px;
padding-right: 6px;
padding-top: 4px;
text-align: left;
text-decoration-color: rgb(255, 255, 255);
text-decoration-line: none;
text-decoration-style: solid;
text-size-adjust: 100%;
user-select: none;
-webkit-border-horizontal-spacing: 0px;
-webkit-border-vertical-spacing: 0px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
width: 90%;
}
.fc-day-grid-event .fc.content {
border-bottom-color: rgb(221, 221, 221);
border-collapse: collapse;
border-left-color: rgb(221, 221, 221);
border-right-color: rgb(221, 221, 221);
border-top-color: rgb(221, 221, 221);
box-sizing: content-box;
color: rgb(255, 255, 255);
cursor: pointer;
direction: ltr;
display: block;
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 11.05px;
font-weight: 400;
height: 14px;
line-height: 14.365px;
overflow-x: hidden;
overflow-y: hidden;
position: relative;
text-align: left;
text-size-adjust: 100%;
user-select: none;
white-space: nowrap;
width: 128px;
z-index: 2;
-webkit-border-horizontal-spacing: 0px;
-webkit-border-vertical-spacing: 0px;
-webkit-tap-highlight-color: black;
}
.fc-day-grid-event .fc.content .fc-title {
border-collapse: collapse;
box-sizing: content-box;
color: rgb(255, 255, 255);
cursor: pointer;
direction: ltr;
display: inline;
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 11.05px;
font-weight: 400;
height: auto;
line-height: 14.365px;
text-align: left;
text-size-adjust: 100%;
user-select: none;
white-space: nowrap;
width: auto;
-webkit-border-horizontal-spacing: 0px;
-webkit-border-vertical-spacing: 0px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
</style>
<div class="calendar">
<div class="calendar-header">
<div class="day">
Sun
</div>
<div class="day">
Mon
</div>
<div class="day">
Tue
</div>
<div class="day">
Wed
</div>
<div class="day">
Thu
</div>
<div class="day">
Fri
</div>
<div class="day">
Sat
</div>
</div>
<div class="calendar-body">
<div class="calendar-week-container">
<div class="day empty"></div>
<div class="day empty"></div>
<div class="day" data-date="2018-05-01"><span class="dayNumber">1</span>
<div class="events"></div>
</div>
<div class="day" data-date="2018-05-02"><span class="dayNumber">2</span>
<div class="events"></div>
</div>
<div class="day" data-date="2018-05-03"><span class="dayNumber">3</span>
<div class="events"></div>
</div>
<div class="day" data-date="2018-05-04"><span class="dayNumber">4</span>
<div class="events"></div>
</div>
<div class="day" data-date="2018-05-05"><span class="dayNumber">5</span>
<div class="events"></div>
</div>
</div>
<div class="calendar-week-container">
<div class="day" data-date="2018-05-06"><span class="dayNumber">6</span>
<div class="events"></div>
</div>
<div class="day" data-date="2018-05-07"><span class="dayNumber">7</span>
<div class="events">
<div>
<a class="fc-day-grid-event" data-id="38717" data-sort="0" data-program="1" data-editable="1" data-workout-id="36" style="background-color: rgb(26, 123, 185); border-color: rgb(26, 123, 185);">
<div class="fc-content"><span class="fc-title">Bridge: Oppo Day</span></div>
<div class="fc-resizer fc-end-resizer"></div>
</a>
</div>
</div>
</div>
<div class="day" data-date="2018-05-08"><span class="dayNumber">8</span>
<div class="events"></div>
</div>
<div class="day" data-date="2018-05-09"><span class="dayNumber">9</span>
<div class="events"></div>
</div>
<div class="day" data-date="2018-05-10"><span class="dayNumber">10</span>
<div class="events">
<div>
<a class="fc-day-grid-event" data-id="38723" data-sort="0" data-program="0" data-editable="1" data-workout-id="223" style="background-color: rgb(26, 179, 148); border-color: rgb(26, 179, 148);">
<div class="fc-content"><span class="fc-title">Mound Blending A</span></div>
<div class="fc-resizer fc-end-resizer"></div>
</a>
</div>
</div>
</div>
<div class="day" data-date="2018-05-11"><span class="dayNumber">11</span>
<div class="events">
<div>
<a class="fc-day-grid-event" data-id="38724" data-sort="0" data-program="3" data-editable="1" data-workout-id="251" style="background-color: rgb(248, 172, 89); border-color: rgb(248, 172, 89);">
<div class="fc-content"><span class="fc-title">Upper Strength</span></div>
<div class="fc-resizer fc-end-resizer"></div>
</a>
</div>
</div>
</div>
<div class="day" data-date="2018-05-12"><span class="dayNumber">12</span>
<div class="events"></div>
</div>
</div>
<div class="calendar-week-container">
<div class="day" data-date="2018-05-13"><span class="dayNumber">13</span>
<div class="events"></div>
</div>
<div class="day" data-date="2018-05-14"><span class="dayNumber">14</span>
<div class="events">
<div>
<a class="fc-day-grid-event" data-id="38725" data-sort="0" data-program="0" data-editable="1" data-workout-id="223" style="background-color: rgb(26, 179, 148); border-color: rgb(26, 179, 148); width: 912px;">
<div class="fc-content"><span class="fc-title">Mound Blending A</span></div>
<div class="fc-resizer fc-end-resizer"></div>
</a>
</div>
<div>
<a class="fc-day-grid-event" data-id="38726" data-sort="0" data-program="0" data-editable="1" data-workout-id="231" style="background-color: rgb(26, 179, 148); border-color: rgb(26, 179, 148);">
<div class="fc-content"><span class="fc-title">VeloDay 6oz-4oz</span></div>
<div class="fc-resizer fc-end-resizer"></div>
</a>
</div>
<div>
<a class="fc-day-grid-event" data-id="38727" data-sort="0" data-program="0" data-editable="1" data-workout-id="237" style="background-color: rgb(26, 179, 148); border-color: rgb(26, 179, 148);">
<div class="fc-content"><span class="fc-title">HybridA</span></div>
<div class="fc-resizer fc-end-resizer"></div>
</a>
</div>
</div>
</div>
<div class="day" data-date="2018-05-15"><span class="dayNumber">15</span>
<div class="events">
<div>
<a class="fc-day-grid-event" data-id="38728" data-sort="0" data-program="0" data-editable="1" data-workout-id="223" style="background-color: rgb(26, 179, 148); border-color: rgb(26, 179, 148);">
<div class="fc-content"><span class="fc-title">Mound Blending A</span></div>
<div class="fc-resizer fc-end-resizer"></div>
</a>
</div>
</div>
</div>
<div class="day" data-date="2018-05-16"><span class="dayNumber">16</span>
<div class="events">
<div>
<a class="fc-day-grid-event" data-id="38729" data-sort="0" data-program="0" data-editable="1" data-workout-id="226" style="background-color: rgb(26, 179, 148); border-color: rgb(26, 179, 148);">
<div class="fc-content"><span class="fc-title">X2-LiveABs</span></div>
<div class="fc-resizer fc-end-resizer"></div>
</a>
</div>
</div>
</div>
<div class="day" data-date="2018-05-17"><span class="dayNumber">17</span>
<div class="events"></div>
</div>
<div class="day" data-date="2018-05-18"><span class="dayNumber">18</span>
<div class="events"></div>
</div>
<div class="day" data-date="2018-05-19"><span class="dayNumber">19</span>
<div class="events"></div>
</div>
</div>
<div class="calendar-week-container">
<div class="day" data-date="2018-05-20"><span class="dayNumber">20</span>
<div class="events"></div>
</div>
<div class="day" data-date="2018-05-21"><span class="dayNumber">21</span>
<div class="events"></div>
</div>
<div class="day" data-date="2018-05-22"><span class="dayNumber">22</span>
<div class="events"></div>
</div>
<div class="day" data-date="2018-05-23"><span class="dayNumber">23</span>
<div class="events"></div>
</div>
<div class="day" data-date="2018-05-24"><span class="dayNumber">24</span>
<div class="events"></div>
</div>
<div class="day" data-date="2018-05-25"><span class="dayNumber">25</span>
<div class="events"></div>
</div>
<div class="day" data-date="2018-05-26"><span class="dayNumber">26</span>
<div class="events"></div>
</div>
</div>
<div class="calendar-week-container">
<div class="day" data-date="2018-05-27"><span class="dayNumber">27</span>
<div class="events"></div>
</div>
<div class="day" data-date="2018-05-28"><span class="dayNumber">28</span>
<div class="events"></div>
</div>
<div class="day" data-date="2018-05-29"><span class="dayNumber">29</span>
<div class="events"></div>
</div>
<div class="day" data-date="2018-05-30"><span class="dayNumber">30</span>
<div class="events"></div>
</div>
<div class="day" data-date="2018-05-31"><span class="dayNumber">31</span>
<div class="events"></div>
</div>
<div class="day empty"></div>
<div class="day empty"></div>
</div>
</div>
</div>
</div>
На 14 дате есть растянутые событие до 17 числа, но на 15 и 16 есть тоже события, как сделать так чтобы эти события опускались ниже?
absolute
позиционирование естестевенно не поможет, табличную верстку я не хочу, так как требуется сделать сортировку между событиями в дне
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Все из-за того что к главному скрипту я подключаю сразу несколько компонентовК примеру:
Поставил fancybox, чтобы был нормальный фотоальбомТак вот, я использовал data-caption="", и у меня отображается все слево (некрасивое описание получается)
Проблема в том, что не получается из функции, которая принимает данные, взять и обработать данные пользователейПрошу помочь и подробно рассказать,...