Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<table> <tr> <td><span class="day event">27</span></td> <td><span class="day">28</span></td> <td><span class="day">29</span></td> <td><span class="day">30</span></td> <td><span class="day">1</span></td> <td><span class="day event">2</span></td> <td><span class="day event">3</span></td> </tr> <tr> <td><span class="day">4</span></td> <td><span class="day">5</span></td> <td><span class="day event">6</span></td> <td><span class="day event">7</span></td> <td><span class="day">8</span></td> <td><span class="day event">9</span></td> <td><span class="day event">10</span></td> </tr> <tr> <td><span class="day">11</span></td> <td><span class="day">12</span></td> <td><span class="day event">13</span></td> <td><span class="day event">14</span></td> <td><span class="day event">15</span></td> <td><span class="day event">16</span></td> <td><span class="day event">17</span></td> </tr> <tr> <td><span class="day">18</span></td> <td><span class="day event">19</span></td> <td><span class="day event">20</span></td> <td><span class="day">21</span></td> <td><span class="day">22</span></td> <td><span class="day event">23</span></td> <td><span class="day event">24</span></td> </tr> <tr> <td><span class="day">25</span></td> <td><span class="day">26</span></td> <td><span class="day event">27</span></td> <td><span class="day event">28</span></td> <td><span class="day">29</span></td> <td><span class="day">30</span></td> <td><span class="day event">31</span></td> </tr> </table> <table class="legend"> <tr> <td>Legenda:</td> <td><div class="free"></div>Volno</td> <td><div class="arrival"></div>Příjezd</td> <td><div class="occupied"></div>Obsazeno</td> <td><div class="departure"></div>Odjezd</td> </tr> </table>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
td { width: 45px; height: 45px; padding: 0 10px; text-align: center; font-size: 25px; font-weight: bold; } .day { position: relative; display: inline-block; text-align: center; background: #bee5ff; color: #587f99; background: repeating-linear-gradient(-45deg, #bee5ff, rgb(255, 255, 255) 3px, rgb(235, 235, 235) 3px, rgb(235, 235, 235) 4px); padding: 10px; width: 100%; font-weight: 700; } .day.event { background: #ffd2da; color: #fd7285; background: repeating-linear-gradient( -45deg, #ffd2da, rgb(255, 255, 255) 3px, rgb(235, 235, 235) 3px, rgb(235, 235, 235) 4px); } .after-event .day { color: #587f99; background: #bee5ff; background-image: url(https://imgup.cz/images/2021/02/18/odjezd.png); background-position: center right -20px; background-size: 100px; } .first-day .day { background-image: url(https://imgup.cz/images/2021/02/18/prijezd2.png); background-position: center right -20px; background-size: 100px; } .legend td { font-size: 16px; } .legend .free { padding: 3px 10px; margin-right: 5px; border: 1px solid black; position: relative; display: inline; text-align: center; background: #bee5ff; color: #587f99; background: repeating-linear-gradient( -45deg, #bee5ff, rgb(255, 255, 255) 3px, rgb(235, 235, 235) 3px, rgb(235, 235, 235) 4px); font-weight: 700; } .legend .arrival { padding: 3px 10px; margin-right: 5px; border: 1px solid black; position: relative; display: inline; text-align: center; background: #ffd2da; background: linear-gradient(145deg, #bee5ff 50%, #ffd2da 50%); } .legend .occupied { padding: 3px 10px; margin-right: 5px; border: 1px solid black; position: relative; display: inline; text-align: center; background: #ffd2da; color: #fd7285; background-image: repeating-linear-gradient( -45deg, #ffd2da, rgb(255, 255, 255) 3px, rgb(235, 235, 235) 3px, rgb(235, 235, 235) 4px); } .legend .departure { padding: 3px 10px; margin-right: 5px; border: 1px solid black; position: relative; display: inline; text-align: center; color: #fd7285; background: #bee5ff; background-image: linear-gradient(145deg, #ffd2da 50%, transparent 50%); }
CSS
Autoformát
CSS reset
Až na konci
$('.day.event').parent().each(function (i, e) { var element = $(e); var prevElement=$(e).prev(); var hasPrevElement = true; if(prevElement.size() === 0) { var prevRow = element.parent().prev(); if(prevRow.size() === 0) { hasPrevElement = false; } prevElement = prevRow.children().last(); } var nextElement=$(e).next(); var hasNextElement = true; if(nextElement.size() === 0) { var nextRow = element.parent().next(); if(nextRow.size() === 0) { hasNextElement = false; } nextElement = nextRow.children().first(); } if(hasPrevElement && prevElement.children().first().attr("class").indexOf("event") === -1 || !hasPrevElement) { element.addClass('first-day') } if(hasNextElement && nextElement.children().first().attr("class").indexOf("event") === -1) { nextElement.addClass('after-event'); } });
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>