CSS date selector

Question

Attached is a mockup and my current solution. The problem is when two numbers are next to each other (horizontal or vertical) they should merge as shown in the mockup.

EX: selected numbers 48-49-50 should be like:

numbers 38-39-40-41 from the next screenshot

I use AddClass("active") with the following parameters for each clicked number:

  a.active {
    background-color: #3E9EA5;
    border-radius: 9px 9px 9px 9px;
    color: white;
  }

Answer 1

You can achieve this merge by using CSS selectors and using javascript. Since you used the jQuery tag, I used that for easy coding.

The solution looks at the clicked element and also his siblings in positions +-10 and +-1. Accordingly, it sets a merge. Comments were added in the code, hope it helps. Feel free to ask any questions.

$(document).ready(function(){
  var awesomeDates = $(".awesome-date");
  
  awesomeDates.on("click", function(){
    //Some variables to store the siblings in...
    var prevElement, nextElement, topElement, bottomElement;
    // basically toggleClass
    if($(this).hasClass("active")){
      $(this).removeClass("active");
      prevElement = $(this).prev();
      //if the element before was merged with the currently clicked list-item
      if(prevElement.hasClass("merge-right")){
        //unmerge
        prevElement.removeClass("merge-right");
      }
      //select element 10 siblings back
      topElement = $(this).prevAll().eq(9);
      //if the element above was merged
      if(topElement.hasClass("active")){
        //remove merge classes for both 
        $(this).removeClass("merge-top");
        topElement.removeClass("merge-bottom");
      }
      //select element 10 siblings ahead
      bottomElement = $(this).nextAll().eq(9);
      //if the currently clicked element was merged with element underneath
      if(bottomElement.hasClass("active")){
        //Unmerge both
        $(this).removeClass("merge-bottom");
        bottomElement.removeClass("merge-top");
      }
    }else{
      $(this).addClass("active");
      prevElement = $(this).prev();
      nextElement = $(this).next();
      //if direct siblings are also active
      if(prevElement.hasClass("active")){
        //Merge
        prevElement.addClass("merge-right");
      }
      if(nextElement.hasClass("active")){
        //Merge
        $(this).addClass("merge-right");
      }
      //select element 10 siblings back
      topElement = $(this).prevAll().eq(9);
      //if the element above is also active
      if(topElement.hasClass("active")){
        //Merge
        $(this).addClass("merge-top");
        topElement.addClass("merge-bottom");
      }
      //select element 10 siblings ahead
      bottomElement = $(this).nextAll().eq(9);
      //if the element below is also active
      if(bottomElement.hasClass("active")){
        //Merge
        $(this).addClass("merge-bottom");
        bottomElement.addClass("merge-top");
      }
    }
  });
});

.dater {
  display: block;
  width: 330px;
  height: 250px;
  background-color: #f7f7f7;
}

.dater-list {
  margin: 0;
  padding: 2px;
  height: auto;
}

.dater-list .awesome-date {
  display: inline-block;
  float: left;
  width: 20px;
  height: 20px;
  padding: 5px;
  border-radius: 50%;
  text-align: center;
  background-color: #fff;
  margin: 1px 1px 0 1px;
  transition: all 1s ease;
}

.dater-list .awesome-date.active{
  background-color: #1abc9c;
  color: #fff;
}
/* ALL elements except for every number dividable by 10 + 1*/
.dater-list li.awesome-date.active + li.awesome-date.active:not(:nth-child(10n+1)){
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  margin-left: 0;
  padding-left: 6px;
}

/* ALL elements with class merge-right except for every number dividable by 10 */
.dater-list li.awesome-date.active.merge-right:not(:nth-child(10n)){
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  margin-right: 0;
  padding-right: 6px;
}

/* ALL elements with class merge-top except for the first row/10 elements */
.dater-list li.awesome-date.active.merge-top:not(:nth-child(-n+10)){
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  margin-top: 0;
  padding-top: 6px;
}

/* ALL elements with class merge-bottom except filter not needed and hence not applied */
.dater-list li.awesome-date.active.merge-bottom{
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  margin-bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dater">
  <ul class="dater-list">
    <li class="awesome-date"><span>1</span></li>
    <li class="awesome-date"><span>2</span></li>
    <li class="awesome-date"><span>3</span></li>
    <li class="awesome-date"><span>4</span></li>
    <li class="awesome-date"><span>5</span></li>
    <li class="awesome-date"><span>6</span></li>
    <li class="awesome-date"><span>7</span></li>
    <li class="awesome-date"><span>8</span></li>
    <li class="awesome-date"><span>9</span></li>
    <li class="awesome-date"><span>10</span></li>
    <li class="awesome-date"><span>11</span></li>
    <li class="awesome-date"><span>12</span></li>
    <li class="awesome-date"><span>13</span></li>
    <li class="awesome-date"><span>14</span></li>
    <li class="awesome-date"><span>15</span></li>
    <li class="awesome-date"><span>16</span></li>
    <li class="awesome-date"><span>17</span></li>
    <li class="awesome-date"><span>18</span></li>
    <li class="awesome-date"><span>19</span></li>
    <li class="awesome-date"><span>20</span></li>
    <li class="awesome-date"><span>21</span></li>
    <li class="awesome-date"><span>22</span></li>
    <li class="awesome-date"><span>23</span></li>
    <li class="awesome-date"><span>24</span></li>
    <li class="awesome-date"><span>25</span></li>
    <li class="awesome-date"><span>26</span></li>
    <li class="awesome-date"><span>27</span></li>
    <li class="awesome-date"><span>28</span></li>
    <li class="awesome-date"><span>29</span></li>
    <li class="awesome-date"><span>30</span></li>
  </ul>
</div>

Ps. Next time add HTML and CSS yourself please.