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">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">31</span></td> </tr> </table> <table class="legenda"> <tr> <td>Legenda:</td> <td><div class="prvni"></div>Volno</td> <td><div class="druhy"></div>Odjezd</td> <td><div class="treti"></div>Příjezd</td> <td><div class="ctvrty"></div>Obsazeno</td> </tr> </table>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.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); } .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; } .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; } td { width:45px; height:45px; padding:0px 10px; text-align:center; font-size:25px; font-weight:bold; } .legenda td { font-size:16px; } .prvni { 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; } .druhy { padding:3px 10px; margin-right:5px; border:1px solid black; position: relative; display: inline; text-align: center; background: #ffd2da; color: #fd7285; background: linear-gradient(145deg, #bee5ff 50%, #ffd2da 50%) } .treti { padding:3px 10px; margin-right:5px; border:1px solid black; position: relative; display: inline; text-align: center; background: #bee5ff; background-image: linear-gradient(145deg, #ffd2da 50%, transparent 50%); } .ctvrty { 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); } .day.event.prvniden { background-image:url(https://imgup.cz/images/2021/02/18/prijezd2.png); background-position:center right -20px; background-size:100px; }
CSS
Autoformát
CSS reset
Až na konci
$('tr').find('.day.event:first').each(function() { $(this) .addClass('prvniden'); }) $('.day.event').parent().each(function (i, e) { var element = $(e); var nextElement=$(e).next(); if(nextElement.size() === 0) { nextRow = element.parent().next(); if(nextRow.size() === 0) { return; } nextElement = nextRow.children().first(); } if(nextElement.children().first().attr("class").indexOf("event") !== -1) { return; } nextElement.addClass('after-event'); });
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>