CSS Grid Calendar - промежутки времени события - PullRequest
Новая
       5

CSS Grid Calendar - промежутки времени события

0 голосов
/ 19 марта 2020

Я смотрю на следующий код, который, кажется, близко соответствует тому, чего я пытаюсь достичь: https://codepen.io/snookca/pen/WXPBEL

HTML

<div class="week">
  <div class="week-day">Sunday</div>
  <div class="week-day">Monday</div>
  <div class="week-day">Tuesday</div>
  <div class="week-day">Wednesday</div>
  <div class="week-day">Thursday</div>
  <div class="week-day">Friday</div>
  <div class="week-day">Saturday</div>  
</div>
<div class="week">
  <div class="day">
    <h3 class="day-label">1</h3>
    <div class="event event-start event-end" data-span="2">Class</div>
    <div class="event event-end">Interview</div>
  </div>
  <div class="day">
    <h3 class="day-label">2</h3>
    <div class="event event-start event-end" data-span="1">Dinner</div>
  </div>
  <div class="day">
    <h3 class="day-label">3</h3>
    <div class="event event-start event-end" data-span="2">School</div>
  </div>
  <div class="day">
    <h3 class="day-label">4</h3>
    <div class="event event-start" data-span="4">Meeting</div>
  </div>
  <div class="day">
    <h3 class="day-label">5</h3>
  </div>
  <div class="day">
    <h3 class="day-label">6</h3>
  </div>
  <div class="day">
    <h3 class="day-label">7</h3>
  </div>
</div>

CSS

.week {
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-flow: dense;
  grid-gap: 2px 10px;
}

.day {
  display:contents;
  background-color: #DDD; /* if display contents, this won't color */
}
.day-label {
  grid-row-start: 1;
  text-align: right;
  margin:0;
}

.week-day, .day-label, .event {
  padding: 4px 10px;
}

.event {
  background-color: #CCC;
}

.event-end { 
  border-top-right-radius: 10px; 
  border-bottom-right-radius: 10px; 
}

.event-start { 
  border-top-left-radius: 10px; 
  border-bottom-left-radius: 10px; 
}

.day:nth-child(1) > .event { grid-column-start: 1; }
.day:nth-child(2) > .event { grid-column-start: 2; }
.day:nth-child(3) > .event { grid-column-start: 3; }
.day:nth-child(4) > .event { grid-column-start: 4; }

[data-span="1"] { grid-column-end: span 1; }
[data-span="2"] { grid-column-end: span 2; }
[data-span="3"] { grid-column-end: span 3; }
[data-span="4"] { grid-column-end: span 4; }
[data-span="5"] { grid-column-end: span 5; }
[data-span="6"] { grid-column-end: span 6; }
[data-span="7"] { grid-column-end: span 7; }



/* other */
a { color: blue; }

В моем случае дни будут месяцами на весь год. Есть ли способ сделать частичные пролеты? Например, если у меня есть событие, которое длится с 1 января по 15 августа, есть ли способ показать событие div на середине августа? События могут заканчиваться в любой день месяца, поэтому хотелось бы наглядно показать, примерно, где в этом месяце он заканчивается.

...