使用 SCSS 在日历中发布样式多日期事件

Question

我正在尝试用 SCSS 和 HTML 构建一个日历，类似于：

我正在尝试为跨越多天的事件做出很好的表示。您可以看到我在作为多日期事件一部分的日期上使用 .long-event 类。问题是，我似乎无法正确地完成末端。在我的示例中，日期 1st - 3rd 和 14th - 18th 被选为长事件，但第一个没有圆形结束，第三个（但第四个有）也没有，第 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：

* {
  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/

任何帮助将不胜感激，特别是如果您知道更好的方法。使用我计划使用的插件，我无法在事件的开头或结尾添加任何额外的类，所以我需要一些聪明的东西:)

安迪

Answer 1

不幸的是，在 CSS 中引入之前的同级选择器之前，这是不可能的。目前你最可靠的选择是 jQuery。

使用 jQuery，您可以为 .long-event 系列中的每一天添加一个类。

下面会在每个.long-event系列的最后一天添加一个.last的类：

$('.long-event + .date:not(.long-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。