とカレンダーのマルチ日付のイベントをスタイリング複数日にわたる私は、複数の日付のイベントの一部である日付のクラス.long-event
を使用していることがわかります。問題は、私は端を適切に四捨五入することができないということです。私の例では、1st - 3rd
と14th - 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/
これを行うより良い方法がわかっている場合は、特に助けてください。私が使用する予定のプラグインを使用して、私がイベントの先頭または末尾に追加のクラスを追加することはできませんので、私は巧妙な何かを必要と:)
アンディ
は
JS/jQueryを使用できますか? –
遅く返事をして申し訳ありませんが、眠っていました;)うん、私はclndrというプラグインで構築しています。jsだからjQueryを使うことができる –
JS/jQueryを使うことができるならば、CSSだけでより強力なセレクタを使って、個々の日に追加のクラス(またはスタイル)を適用することができます。 –