Question

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

我正试图为跨越多天的事件做出很好的表达。您可以看到我在多日期事件的日期使用类.long-event。问题是，我似乎无法正确地完成任务。在我的示例中，1st - 3rd和14th - 18th被选为长事件，但是第1个没有圆形结束，第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;
  }
}

这是我所做过的事情：

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

任何帮助都会受到赞赏，特别是如果你知道更好的方法。使用我计划使用的插件，我不能在事件的开头或结尾添加任何其他类，所以我需要一些聪明的东西：）

安迪

Answer 1

不幸的是，直到CSS中引入了先前的兄弟选择器，这是不可能的。现在你最可靠的选择是jQuery。

使用jQuery，您可以在.long-event系列的最后几天添加一个类。

以下内容会在每个.last系列的最后一天添加.long-event课程：

$('.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。

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

1 个答案: