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

Question

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

我正在尝试很好地表示跨越多天的事件。您可以看到我在属于多日期事件一部分的日期上使用类 .long-event。问题是，我似乎无法正确地结束结尾。在我的示例中，日期 1st - 3rd 和 14th - 18th 被选为长事件，但第 1 个没有圆 Angular 结尾，第 3 个也没有(但第 4 个做)和第 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 中引入 previous sibling 选择器之前，这是不可能的。现在你最可靠的选择是 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，它将始终将圆 Angular 应用于日历中的第一个 .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 .