<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>