Autor | Zpráva | ||
---|---|---|---|
vodys Profil |
#1 · Zasláno: 18. 2. 2021, 10:26:33
Zdravím, hledám funkční řešení, které mi vždy v kalendáři následující den (td) po označeném poli vybarví další.
Mám tedy kus kódu a chci, aby každé td, které je za span class="day event" mělo třídu "after-event" <tr> <td><span class="day">20</span></td> <td><span class="day">22</span></td> <td><span class="day">23</span></td> <td><span class="day event">24</span></td> <td><span class="day event">25</span></td> </tr> <tr> <td><span class="day">26</span></td> <td><span class="day">27</span></td> <td><span class="day event">28</span></td> <td><span class="day event">29</span></td> <td><span class="day">30</span></td> </tr> K tomu mi slouží javascript: //Build calendar of a month from date buildCalendar: function (fromDate, calendar) { var plugin = this; calendar.find('table').remove(); var body = $('<table class="calendar"></table>'); var thead = $('<thead></thead>'); var tbody = $('<tbody></tbody>'); //Header day in a week ( (1 to 8) % 7 to start the week by monday) for (var i = 1; i <= this.settings.days.length; i++) { thead.append($('<td class="day-name">' + this.settings.days[i % 7].substring(0, 3) + '</td>')); } //setting current year and month var y = fromDate.getFullYear(), m = fromDate.getMonth(); //first day of the month var firstDay = new Date(y, m, 1); //If not monday set to previous monday while (firstDay.getDay() != 1) { firstDay.setDate(firstDay.getDate() - 1); } //last day of the month var lastDay = new Date(y, m + 1, 0); //If not sunday set to next sunday while (lastDay.getDay() != 0) { lastDay.setDate(lastDay.getDate() + 1); } for (var day = firstDay; day <= lastDay; day.setDate(day.getDate())) { var tr = $('<tr></tr>'); //For each row for (var i = 0; i < 7; i++) { // var td = $('<td><span class="day">' + day.getDate() + '<span class="room-price">12$</span>' + '</span></td>'); var td = $('<td><span class="day">' + day.getDate() + '</span></td>'); //if today is this day var ymd = day.getFullYear() + '-' + day.getMonth() + '-' + day.getDay(); var ymd = this.formatToYYYYMMDD(day); // console.log(ymd); if ($.inArray(this.formatToYYYYMMDD(day), plugin.events) !== -1) { // console.log('found'); td.find(".day").addClass("event"); // tr.find(".test").addClass("event"); } //if day is previous day if (day < (new Date())) { td.find(".day").addClass("wrong-day"); } if (day.toDateString() === (new Date).toDateString()) { td.find(".day").addClass("today"); td.find(".day").removeClass("wrong-day"); } //if day is not in this month if (day.getMonth() != fromDate.getMonth()) { td.find(".day").addClass("wrong-month"); } //Binding day event td.on('click', function (e) { // /alert('ok'); }); tr.append(td); day.setDate(day.getDate() + 1); } tbody.append(tr); } body.append(thead); body.append(tbody); var eventContainer = $('<div class="event-container"></div>'); calendar.append(body); calendar.append(eventContainer); } Napadlo mě toto, nicméně nefunguje: if ($.inArray(this.formatToYYYYMMDD(day), plugin.events) !== -1) { td.find(".day").addClass("event"); td.find(".day").parent().next().addClass("after-event"); } Díky moc za pomoc! |
||
anonym_ Profil * |
#2 · Zasláno: 18. 2. 2021, 10:37:24
vodys:
Chceš vybrat všechny ( nextAll ), ne jen jeden následující element.
$('.day.event').parent().nextAll().addClass('after-event') |
||
vodys Profil |
Nojo, nicméně v daném fiddle se začervená jak poslední .day.event, tak následující .day
Musí to být vždy až následující .day po .day.event A když je mezitím tr, nefunguje to :/ Tohle už vypadá líp, ale i tak zobrazuje včetně .event $('.day.event').closest('td').next('td').find('.day').addClass('after-event') |
||
Keeehi Profil |
Pak se dá použít each a s tím speciálním případem buňky na konci řádku se vypořádat v obslužné funkci.
Živá ukázka Pokud to má brát více dní co jsou po sobě jako jeden event, pak stačí přidat jednu podmínku, která barvení pro tu buňku neprovede, pokud je v ní taky event. Živá ukázka |
||
vodys Profil |
Keeehi:
To vypadá skvěle! Dá se tam nadefinovat i podmínka, kterou neoznačuji (bg:red) poslední .day.event ale až následující .day? V současnosti jsou označené oba EDIT: Pardon, už to vidím :) |
||
anonym_ Profil * |
#6 · Zasláno: 18. 2. 2021, 12:16:11
vodys:
Aha, spatne jsem pochopil zadání :-) |
||
vodys Profil |
Úplně poslední záležitosti.
Kdybych chtěl ještě zvolit každý první .day.event a dát mu třídu, budu postupovat jak? $('.day.event').first().css('background-image', 'linear-gradient(145deg, #bee5ff 50%, #ffd2da 50%)'); Živá ukázka Jinak fakčí pouze do jQuery 2.2.4 Web mi tedy hlásí na prvním řádku error "Uncaught TypeError: $ is not a function" Moc díky borci, fakt mi to moc pomohlo :) EDIT: Díky moc, všechno je hotové dle mých představ. Přikládám Živá ukázka |
||
Keeehi Profil |
vodys:
> Jinak fakčí pouze do jQuery 2.2.4 > Web mi tedy hlásí na prvním řádku error "Uncaught TypeError: $ is not a function" Podle té chyby to spíš vypadá že jsi tam tu novější verzi knihovny nějak špatně přidal (nepovedlo se jí přidat) než že by byl problém v kódu samotném. „Díky moc, všechno je hotové dle mých představ.“ Jsi si jistý? Zdá se mi že bys chtěl aby 9. mělo také třídu první den, a tu nemá. Myslím, že by to mělo vypadat takto Živá ukázka |
||
Radek9 Profil |
vodys:
Proč otvíráš znova stejné téma? Je snad kód, který jsem ti poslal, nefunkční? Přijde mi docela neefektivní přidávat tu třídu takhle dodatečně, když ji můžeš přidat už při generování. |
||
Časová prodleva: 3 roky
|
0