Блог

еженедельный календарь<—-img здесь —! У меня есть еженедельная таблица, и я хочу интегрировать в нее календарную систему. в img, где он показывает год, я хотел бы, чтобы он показывал 7-дневную неделю (пример: 20.12.20 — 27.12.2020), с датами, непосредственно отражающими дни недели. я также хотел бы добавить кнопки для перехода к предыдущей и следующей неделе, при этом дни недели также переходят в соответствие с этой неделей. я могу позаботиться о данных, которые будут помещены в ячейки под днями, и обновлять их, когда у меня будет этот календарь. Любая помощь будет с благодарностью?

Вот краткий пример, который я сделал, используя HTML, CSS и JS.

HTML-код:

 <div class="container">
  <div class="calendar">
    <div class="nav">
      <i id="prev" class="fas fa-arrow-left arrow" tabindex="0"></i>
      <div class="calendar-icon-container">
        <h1 id="date-range"></h1>
        <div>
          <div id="calendar-popover" class="calendar-popover hidden">
          </div>
        </div>
      </div>
      <i id="next" class="fas fa-arrow-right arrow" tabindex="0"></i>
    </div>
    <div id="header" class="header">
      <div>
        <div>Monday</div>
        <div class="date"></div>
      </div>
      <div>
        <div>Tuesday</div>
        <div class="date"></div>
      </div>
      <div>
        <div>Wednesday</div>
        <div class="date"></div>
      </div>
      <div>
        <div>Thursday</div>
        <div class="date"></div>
      </div>
      <div>
        <div>Friday</div>
        <div class="date"></div>
      </div>
      <div>
        <div>Saturday</div>
        <div class="date"></div>
      </div>
      <div>
        <div>Sunday</div>
        <div class="date"></div>
      </div>
    </div>
    <div class="body">
      <div>
          <li>text</li>
      </div>
      <div>
          <li>text</li>
      </div>
      <div>
          <li>text</li>
      </div>
      <div>
          <li>....</li>
      </div>
      <div>
          <li>text</li>
      </div>
      <div>
          <li>text</li>
      </div>
      <div>
          <li>text</li>
      </div>
    </div>
  </div>
</div>
 

CSS-код:

 .container {
     display: flex;
     align-items: center;
     flex-direction: column;
}
 .calendar > .nav {
     align-items: center;
}
 .calendar > div {
     display: flex;
     justify-content: space-evenly;
}
 .calendar > div > div {
     padding: 12px;
}
 .calendar > .header > div, .calendar > .body > div {
     flex: 1 0 120px;
     border-right: 1px solid #e6e6e6;
}
 .fas:focus {
     outline: none;
     opacity: 1;
}
 
 

JS-код:

 (function() {
  var mondayRef = 1;
  var sundayRef = 7;
  
  var prev = document.getElementById('prev');
  var next = document.getElementById('next');
  var dateRange = document.getElementById('date-range');
  var dateViews = document.getElementsByClassName('date');
  var daysOfMonth = document.getElementById('days-of-month');
  var calendarPopover = document.getElementById('calendar-popover');
  
 
  function adjustCalendar(monRef, sunRef) {
    var monday = moment().day(monRef);
    var sunday = moment().day(sunRef);
    
    if (monRef > 0) {
      for (var date = monRef; date <= sunRef; date  ) {
        dateViews[(date - 1) % 7].innerHTML = moment().day(date).format('M[/]D');
      }
    } else {
      for (var date = -monRef; date >= -sunRef; date --) {
        dateViews[-(monRef   date)].innerHTML = moment().day(-date).format('M[/]D');
      }
    }
  
    if (monday.format('YYYY') !== sunday.format('YYYY')) {
      dateRange.innerHTML = `${monday.format('MMMM Do, YYYY')} - ${sunday.format('MMMM Do, YYYY')}`;
    } else {
      dateRange.innerHTML = `${monday.format('MMMM Do')} - ${sunday.format('MMMM Do, YYYY')}`;
    }
  }
  
  // Init
  adjustCalendar(mondayRef, sundayRef);
  
  next.onclick = function() {
    mondayRef  = 7;
    sundayRef  = 7;
    adjustCalendar(mondayRef, sundayRef);
  }
  
  prev.onclick = function() {
    mondayRef -= 7;
    sundayRef -= 7;
    adjustCalendar(mondayRef, sundayRef);
  }
})();
 

Если вы хотите, чтобы он выглядел лучше и дополнял его, вы можете это сделать. Я советую вам использовать табличный подход, поскольку это облегчит вам проектирование ширины, высоты, границ и т. Д. Удачи!