在使用SCSS的日历中发布设置多日期事件的样式 [英] Issue styling multi date event in a calendar with SCSS
问题描述
我尝试在SCSS和HTML中建立日历，类似如下：
我试图为多天的事件做一个不错的表示。您可以看到我在使用多日期事件一部分的日期使用类 .long-event 。问题是，我似乎不能正确地完成两端。在我的示例中，第1 - 第3个和第14至第18个被选为长事件，圆的结束，也不是第三（但第四个）和第14个（这是正确的），但第18个不（第二天又是错误的）下面是一个例子我做了：
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：
code> * {
box-sizing：border-box;
}
#calendar {
width：300px;
display：table;
.date {
display：inline-block;
/ *背景：小麦; * /
padding：10px;
margin：0;
p {
margin：0;
padding：0;
}
}
.long-event {
background：orange;
}
//范围内的第一个日期
：not（.long-event）+ .long-event {
background：orange;
border-radius：50％0 0 50％;
}
//上次日期范围
.long-event +：not（.long-event）{
background：red;
border-radius：0 50％50％0;
}
}
和一个jsFiddle我做了什么： / p>
https://jsfiddle.net/k0112tbd/6/
任何帮助将不胜感激，尤其是如果你知道更好的方法。使用我计划使用的插件，我不能添加任何额外的类到事件的开始或结束，所以我需要一些聪明：）
Andy
不幸的是，直到在CSS中引入了先前的同级选择器，这将是不可能的。现在你最可靠的选择是jQuery。
使用jQuery可以在 .long-event 系列中的最后几天添加一个类。 / p>
以下将向每个 .long中的最后一天添加系列： .last -event
$（'。long-event + .date：not -event）'）。prev（）。addClass（'last'）;
，然后可以使用已有的CSS（使用新的选择器） >
.last {
background：red;
border-radius：0 50％50％0;
}
对于第二个问题，定位第一个 .long -event ，您可以添加一个额外的选择器：
：not（.long-event）+ .long-event，
.long-event：first-child {
background：orange;
border-radius：50％0 0 50％;
}
重要的部分是 .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 。
I'm trying to build a calendar in SCSS and HTML, similar to this:
I'm trying to make a nice representation for events that span multiple days. You can see that I am using the class .long-event on dates that are part of a multi date event. The problem is, I can't seem to round off the ends properly. In my example dates 1st - 3rd and 14th - 18th are selected as long events, but the 1st doesn't have the rounded end, nor does the 3rd (but the 4th does) and the 14th does (which is correct) but the 18th doesn't (and again the next day does which is wrong) Below is an example of what I've done:
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;
}
}
And a jsFiddle of what I've done:
https://jsfiddle.net/k0112tbd/6/
Any help would be appreciated, especially if you know a better way of doing this. Using the plugin that I plan to use, I cannot add any additional classes to the beginning of the event or the end, so I need something clever :)
Andy
Unfortunately until previous sibling selectors are introduced in CSS this won't be possible. For now your most reliable option is jQuery.
Using jQuery you can add a class to each of the last days in the .long-event series.
The following will add a class of .last to the last day in each .long-event series:
$('.long-event + .date:not(.long-event)').prev().addClass('last');
which can then be styled using the CSS you already had (with a new selector):
.last {
background: red;
border-radius: 0 50% 50% 0;
}
For the second issue, targeting the first .long-event, you can add an additional selector:
:not(.long-event) + .long-event,
.long-event:first-child {
background: orange;
border-radius: 50% 0 0 50%;
}
The important part there is the .long-event:first-child, which will always apply the rounded corners to the first .long-event in the calendar.
If you wanted to stick with jQuery for the first day in each .long_event:
$(':not(.long-event) + .long-event, .long-event:first-child').addClass('first');
then:
.first {
background: orange;
border-radius: 50% 0 0 50%;
}
Here's a jsFiddle.
这篇关于在使用SCSS的日历中发布设置多日期事件的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
