Long Event calendar styling

by andyjh07

HTML

<div id="calendar">
  <div class="date long-event">
    <p>01</p>
  </div>
  <div class="date long-event">
    <p>02</p>
  </div>
  <div class="date long-event">
    <p>03</p>
  </div>
  <div class="date">
    <p>04</p>
  </div>
  <div class="date">
    <p>05</p>
  </div>
  <div class="date">
    <p>06</p>
  </div>
  <div class="date">
    <p>07</p>
  </div>
  <div class="date">
    <p>08</p>
  </div>
  <div class="date">
    <p>09</p>
  </div>
  <div class="date">
    <p>10</p>
  </div>
  <div class="date">
    <p>11</p>
  </div>
  <div class="date">
    <p>12</p>
  </div>
  <div class="date">
    <p>13</p>
  </div>
  <div class="date long-event">
    <p>14</p>
  </div>
  <div class="date long-event">
    <p>15</p>
  </div>
  <div class="date long-event">
    <p>16</p>
  </div>
  <div class="date long-event">
    <p>17</p>
  </div>
  <div class="date long-event">
    <p>18</p>
  </div>
  <div class="date">
    <p>19</p>
  </div>
  <div class="date">
    <p>20</p>
  </div>
  <div class="date">
    <p>21</p>
  </div>
  <div class="date">
    <p>22</p>
  </div>
  <div class="date">
    <p>23</p>
  </div>
  <div class="date">
    <p>24</p>
  </div>
  <div class="date">
    <p>25</p>
  </div>
  <div class="date">
    <p>26</p>
  </div>
  <div class="date">
    <p>27</p>
  </div>
  <div class="date">
    <p>28</p>
  </div>
  <div class="date">
    <p>29</p>
  </div>
  <div class="date">
    <p>30</p>
  </div>
</div>

SCSS

* {
  box-sizing: border-box;
}

#calendar {
  width: 300px;
  display: table;
  
  .date {
    display: inline-block;
    /* background: wheat; */
    padding: 10px;
    margin: 0;
    
    p {
      margin: 0;
      padding: 0;
    }
  }
  
  .long-event {
    background: orange;
  }
  
  :not(.long-event) + .long-event, .long-event:first-child {
    background: orange;
    border-radius: 50% 0 0 50%;
  }
  
  .last {
    border-radius: 0 50% 50% 0;
  }
}

JavaScript

$('.long-event + .date:not(.long-event)').prev().addClass('last');