Autor Zpráva
vodys
Profil
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 *
vodys:
Chceš vybrat všechny (nextAll), ne jen jeden následující element.

$('.day.event').parent().nextAll().addClass('after-event')
https://jsfiddle.net/Lm4phkxw/
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 *
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%)');
Toto mi bohužel označí jen první a žádné další první..

Ž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í.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0