2016-05-04 20 views
1

とカレンダーのマルチ日付のイベントをスタイリング複数日にわたる私は、複数の日付のイベントの一部である日付のクラス.long-eventを使用していることがわかります。問題は、私は端を適切に四捨五入することができないということです。私の例では、1st - 3rd14th - 18thが長いイベントとして選択されていますが、1位は四捨五入されていませんし、3位(4位)でも14位(14通り)でも18位はありません問題は、私はこれに類似し、SCSSとHTMLでカレンダーを構築しようとしているSCSS

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

そして、私は「何のjsFiddleと、再び次の日には、以下に私がやったの例がある)間違っているん完了:

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

これを行うより良い方法がわかっている場合は、特に助けてください。私が使用する予定のプラグインを使用して、私がイベントの先頭または末尾に追加のクラスを追加することはできませんので、私は巧妙な何かを必要と:)

アンディ

+0

JS/jQueryを使用できますか? –

+0

遅く返事をして申し訳ありませんが、眠っていました;)うん、私はclndrというプラグインで構築しています。jsだからjQueryを使うことができる –

+0

JS/jQueryを使うことができるならば、CSSだけでより強力なセレクタを使って、個々の日に追加のクラス(またはスタイル)を適用することができます。 –

答えて

1

残念ながら、前の兄弟セレクタをCSSで導入されるまで、これは不可能です。今のところ最も信頼できるオプションはjQueryです。

jQueryを使用すると、.long-eventシリーズの最終日のそれぞれにクラスを追加できます。

以下は各.long-eventシリーズの最後の日に.lastのクラスを追加します。その後、(新しいセレクターで)あなたがすでに持っていたCSSを使ってスタイリングすることができます

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

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

:not(.long-event) + .long-event, 
.long-event:first-child { 
    background: orange; 
    border-radius: 50% 0 0 50%; 
} 
:最初 .long-eventをターゲットに第二の問題については

、あなたは追加のセレクタを追加することができます

重要な部分は.long-event:first-childです。これは、カレンダーの最初の.long-eventに丸い角を常に適用します。

あなたは、各.long_eventの最初の日のためのjQueryに固執したい場合:

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

その後:

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

ここjsFiddleです。

+0

さて、私はあなたと今、これは良い見えます。月の初めに始まる長いイベントで問題を修正するアイデアは何ですか?どこに要素がないのですか?たとえば、私のjsFiddleの場合、1st-3rdには1と3があるはずですが、それは3です。 –

+0

2番目の問題の解決策で更新されました。 –

+0

素敵なブレット、ありがとうございました:) –

関連する問題