JSFiddle - React, Tailwind, and code Playground

by mowglisanu

HTML

<table border=1 cellspacing="2" class="jCalendar"><tbody>
<tr>
   <td class="current-month weekday today unselectable">18</td>
   <td class="current-month weekday unselectable">19</td>
   <td class="current-month weekday selected">20</td>
   <td class="current-month weekday unselectable" style="color: green; ">21</td>
   <td class="current-month weekday unselectable" style="color: green; ">22</td>
   <td class="current-month weekend unselectable" style="color: green; ">23</td>
   <td class="current-month weekend unselectable" style="color: green; ">24</td>
</tr>
<tr>
   <td class="current-month weekday today unselectable">18</td>
   <td class="current-month weekday unselectable">19</td>
   <td class="current-month weekday ">20</td>
   <td class="current-month weekday unselectable" style="color: green; ">21</td>
   <td class="current-month weekday unselectable" style="color: green; ">22</td>
   <td class="current-month weekend unselectable" style="color: green; ">23</td>
   <td class="current-month weekend unselectable" style="color: green; ">24</td>
</tr>
<tr>
   <td class="current-month weekday today unselectable">18</td>
   <td class="current-month weekday unselectable">19</td>
   <td class="current-month weekday ">20</td>
   <td class="current-month weekday unselectable" style="color: green; ">21</td>
   <td class="current-month weekday unselectable" style="color: green; ">22</td>
   <td class="current-month weekend unselectable" style="color: green; ">23</td>
   <td class="current-month weekend unselectable" style="color: green; ">24</td>
</tr>
<tr>
   <td class="current-month weekday today unselectable">25</td>
   <td class="current-month weekday unselectable">26</td>
   <td class="current-month weekday selected">27</td>
   <td class="current-month weekday unselectable">28</td>
   <td class="current-month weekday unselectable">29</td>
   <td class="current-month weekend unselectable">30</td>
   <td class="current-month weekend...

JavaScript

var selectStart = false;
    $('table.jCalendar td').not(function() {
        if ($(this).hasClass('selected')) {
            selectStart = !selectStart;
        }
        return !selectStart;
    }).css({color:'green'});