Реагируйте на даты в стиле большого календаря, в которых есть события - PullRequest
Новая
       13

Реагируйте на даты в стиле большого календаря, в которых есть события

0 голосов
/ 09 января 2019

Я хотел бы изменить стиль дат в моем представлении календаря месяца, в котором есть события.

Это дизайн, который я разрабатываю:

enter image description here

Так что мне нужно изменить стиль .rbc-date-cell на синий для каждой даты с событием. Я искал решение проблемы выше и ниже, чаще всего я нахожу примеры для создания CustomDateCell для dateCellWrapper, который будет условно стилизовать ячейки, вот один пример, который я пробовал:

Реагировать на Большой календарь, как стиль одного дня в представлении месяца

Это меняет стиль .rbc-day-bg, а не .rbc-date-cell. Разметка на RBC сложна, потому что разработчики сделали это для событий, которые могут растянуться на несколько дней. Это означает, что фоновые div находятся в родительском элементе, отличном от datecells. Я бы предпочел не проходить / манипулировать DOM для стилизации этих ячеек.

Конечно, должен быть способ стилизовать ячейки даты? Документы и все ответы, которые я нашел на SO и github, до сих пор ничего не дали. Может ли это быть сделано с eventPropGetter?

EDIT

HTML выглядит следующим образом. Я также попробовал пользовательские реквизиты слотов и eventPropgetter, но не смог напрямую манипулировать рендерингом .rbc-date-cell 

<div class="rbc-month-row">
  <div class="rbc-row-bg">
    <div class="rbc-day-bg" style="background-color: lightgreen;"></div>
    <div class="rbc-day-bg" style="background-color: lightgreen;"></div>
    <div class="rbc-day-bg rbc-today" style="background-color: lightgreen;"></div>
    <div class="rbc-day-bg" style="background-color: lightblue;"></div>
    <div class="rbc-day-bg" style="background-color: lightblue;"></div>
    <div class="rbc-day-bg" style="background-color: lightblue;"></div>
    <div class="rbc-day-bg" style="background-color: lightblue;"></div>
  </div>
  <div class="rbc-row-content">
    <div class="rbc-row">
      <div class="rbc-date-cell"><a href="#">13</a></div>
      <div class="rbc-date-cell"><a href="#">14</a></div>
      <div class="rbc-date-cell rbc-now rbc-current"><a href="#">15</a></div>
      <div class="rbc-date-cell"><a href="#">16</a></div>
      <div class="rbc-date-cell"><a href="#">17</a></div>
      <div class="rbc-date-cell"><a href="#">18</a></div>
      <div class="rbc-date-cell"><a href="#">19</a></div>
    </div>
  </div>
</div>

rbc-события существуют в строке, отличной от rbc-date-cell, в этой разметке есть события 23-го и 24-го. Я не хочу пересматривать DOM для условного стиля div, так как это не очень реактивный способ работы, это нужно сделать перед рендерингом, если это возможно 

<div class="rbc-row-content">
  <div class="rbc-row ">
    <div class="rbc-date-cell"><a href="#">21</a></div>
    <div class="rbc-date-cell"><a href="#">22</a></div>
    <div class="rbc-date-cell"><a href="#">23</a></div>
    <div class="rbc-date-cell"><a href="#">24</a></div>
    <div class="rbc-date-cell"><a href="#">25</a></div>
    <div class="rbc-date-cell"><a href="#">26</a></div>
    <div class="rbc-date-cell"><a href="#">27</a></div>
  </div>
  <div class="rbc-row">
    <div class="rbc-row-segment" style="flex-basis: 28.5714%; max-width: 28.5714%;"> </div>
    <div class="rbc-row-segment" style="flex-basis: 14.2857%; max-width: 14.2857%;"><button class="rbc-event"><div class="rbc-event-content" title="2/2"><p class="event-wrapper">2/2</p></div></button></div>
    <div class="rbc-row-segment" style="flex-basis: 14.2857%; max-width: 14.2857%;"><button class="rbc-event"><div class="rbc-event-content" title="1/1"><p class="event-wrapper">1/1</p></div></button></div>
  </div>
</div>
row

1 Ответ

0 голосов
/ 19 января 2019

оформить заказ в этой песочнице код https://codesandbox.io/s/73ky8rj2qj если это то, чего вы хотите достичь, то основная идея состоит в том, чтобы переопределить месяц dateHeader, а затем с каждым dateHeader рендерить, находится ли его значение date между любым событием startDate и endDate и отображать его в нужном стиле.

...