Ausgabe, die multi Datum Ereignis in einem Kalender mit SCSS

Question

Ich versuche, einen Kalender in SCSS und HTML, ähnlich wie diese zu bauen:

Ich versuche, eine schöne Darstellung für Veranstaltungen zu machen Das erstreckt sich über mehrere Tage. Sie können sehen, dass ich die Klasse .long-event für Daten verwende, die Teil eines Ereignisses mit mehreren Datumsangaben sind. Das Problem ist, ich kann die Enden nicht richtig abrunden. In meinem Beispiel sind die Daten 1st - 3rd und 14th - 18th als lange Ereignisse ausgewählt, aber das erste hat nicht das abgerundete Ende, noch das dritte (aber das vierte tut) und das 14. tut (was richtig ist), aber das 18. nicht (und am nächsten Tag wieder tut, was falsch ist) Im folgenden ist ein Beispiel dafür, was ich getan habe:

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; 
    } 

    // First date in range 
    :not(.long-event) + .long-event { 
    background: orange; 
    border-radius: 50% 0 0 50%; 
    } 

    // Last date in range 
    .long-event + :not(.long-event) { 
    background: red; 
    border-radius: 0 50% 50% 0; 
    } 
} 

und ein jsFiddle von dem, was ich ve done:

https://jsfiddle.net/k0112tbd/6/

Jede Hilfe wäre willkommen, besonders wenn Sie einen besseren Weg kennen. Unter Verwendung des Plugin, das ich verwenden möchten, kann ich keine zusätzlichen Klassen zu Beginn der Veranstaltung hinzufügen oder das Ende, so brauche ich etwas Gescheites :)

Andy

Answer 1

leider bis vorherigen Geschwister-Selektoren in CSS eingeführt werden Das wird nicht möglich sein. Für jetzt ist Ihre zuverlässigste Option jQuery.

Mit jQuery können Sie eine Klasse zu jedem der letzten Tage in der .long-event Serie hinzufügen.

Im Folgenden wird eine Klasse von .last bis zum letzten Tag in jeder .long-event Serie eintragen:

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

, die dann die CSS gestylt werden können, die Sie bereits (mit einem neuen Wähler) haben:

.last { 
    background: red; 
    border-radius: 0 50% 50% 0; 
} 

Für die zweite Ausgabe, die erste .long-event Targeting, können Sie einen zusätzlichen Selektor hinzufügen:

:not(.long-event) + .long-event, 
.long-event:first-child { 
    background: orange; 
    border-radius: 50% 0 0 50%; 
} 

Der wichtige Teil dort ist die , die immer die abgerundeten Ecken auf die erste .long-event im Kalender anwenden wird.

$(':not(.long-event) + .long-event, .long-event:first-child').addClass('first'); 

dann:

.first { 
    background: orange; 
    border-radius: 50% 0 0 50%; 
} 

hier ein jsFiddle

Wenn Sie mit jQuery für den ersten Tag in jeder .long_event halten wollte.