ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [JavaScript] 일반적인 달력 만들기 - 영상
      만학도 프로젝트/JavaScript Calendar 2021. 4. 16. 11:45

      자바스크립트로 간단한 달력 만들기에 이어서 일반적인 달력 만들기를 영상으로 녹화해봤습니다.

      의도치 않게 오랜시간이 지나서야 이 영상을 제작하게 되었는데, 막상 시간이 지나서 제가 작성한 코드를 보니 개선해야 될 부분들이 많이 보이더라고요 ㅎㅎ

       

      따로 수정은 하지 않았지만 이번에 촬영하면서 느꼈던 저의 부족한 부분들을 좀 더 보완해서 다음 프로젝트에 녹여보도록 하겠습니다.

       

      여담이지만 이번엔 영상 길이가 생각보다 길었는데요, 생각보다 이거 그냥 틀어놓고 1,20분 집중할 때 노동요(?)로 써도 괜찮은 것 같더라구요. 나중에 영상들이 늘어나서 재생시간이 1,2시간 정도가 쌓이면 재생목록으로 묶어서 진짜 노동요로 써볼까도 고민 중입니다..ㅎㅎ

       

      아무튼 재미있게 봐주셨으면 좋겠고, 혹시나 잘못된 부분이나 개선할 부분은 댓글로 알려주시면 더 멋지게 성장하는 모습으로 보답해 보이겠습니다! :)

       

      github: https://github.com/kimbigtop/MHD-calendar

       

       

      index.html

      <!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>MHDP Full Calendar</title>
</head>
<body>
  <div class="calendar">
    <div class="header">
      <div class="year-month"></div>
      <div class="nav">
        <button class="nav-btn go-prev" onclick="prevMonth()">&lt;</button>
        <button class="nav-btn go-today" onclick="goToday()">Today</button>
        <button class="nav-btn go-next" onclick="nextMonth()">&gt;</button>
      </div>
    </div>
    <div class="main">
      <div class="days">
        <div class="day">일</div>
        <div class="day">월</div>
        <div class="day">화</div>
        <div class="day">수</div>
        <div class="day">목</div>
        <div class="day">금</div>
        <div class="day">토</div>
      </div>
      <div class="dates"></div>
    </div>
  </div>
  <script src="index.js"></script>
</body>
</html>

      index.js

      let date = new Date();

const renderCalender = () => {
  const viewYear = date.getFullYear();
  const viewMonth = date.getMonth();

  document.querySelector('.year-month').textContent = `${viewYear}년 ${viewMonth + 1}월`;

  const prevLast = new Date(viewYear, viewMonth, 0);
  const thisLast = new Date(viewYear, viewMonth + 1, 0);

  const PLDate = prevLast.getDate();
  const PLDay = prevLast.getDay();

  const TLDate = thisLast.getDate();
  const TLDay = thisLast.getDay();

  const prevDates = [];
  const thisDates = [...Array(TLDate + 1).keys()].slice(1);
  const nextDates = [];

  if (PLDay !== 6) {
    for (let i = 0; i < PLDay + 1; i++) {
      prevDates.unshift(PLDate - i);
    }
  }

  for (let i = 1; i < 7 - TLDay; i++) {
    nextDates.push(i);
  }

  const dates = prevDates.concat(thisDates, nextDates);
  const firstDateIndex = dates.indexOf(1);
  const lastDateIndex = dates.lastIndexOf(TLDate);

  dates.forEach((date, i) => {
    const condition = i >= firstDateIndex && i < lastDateIndex + 1
                      ? 'this'
                      : 'other';
    dates[i] = `<div class="date"><span class=${condition}>${date}</span></div>`;
  });

  document.querySelector('.dates').innerHTML = dates.join('');

  const today = new Date();
  if (viewMonth === today.getMonth() && viewYear === today.getFullYear()) {
    for (let date of document.querySelectorAll('.this')) {
      if (+date.innerText === today.getDate()) {
        date.classList.add('today');
        break;
      }
    }
  }
};

renderCalender();

const prevMonth = () => {
  date.setMonth(date.getMonth() - 1);
  renderCalender();
};

const nextMonth = () => {
  date.setMonth(date.getMonth() + 1);
  renderCalender();
};

const goToday = () => {
  date = new Date();
  renderCalender();
};

      style.css

      * {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.calendar {
  width: 600px;
  margin: 50px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.year-month {
  font-size: 35px;
}

.nav {
  display: flex;
  border: 1px solid #333333;
  border-radius: 5px;
}

.nav-btn {
  width: 28px;
  height: 30px;
  border: none;
  font-size: 16px;
  line-height: 34px;
  background-color: transparent;
  cursor: pointer;
}

.go-today {
  width: 75px;
  border-left: 1px solid #333333;
  border-right: 1px solid #333333;
}

.days {
  display: flex;
  margin: 25px 0 10px;
}

.day {
  width: calc(100% / 7);
  text-align: center;
}

.dates {
  display: flex;
  flex-flow: row wrap;
  height: 500px;
  border-top: 1px solid #333333;
  border-right: 1px solid #333333;
}

.date {
  width: calc(100% / 7);
  padding: 15px;
  text-align: right;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #333333;
}

.day:nth-child(7n + 1),
.date:nth-child(7n + 1) {
  color: #D13E3E;
}

.day:nth-child(7n),
.date:nth-child(7n) {
  color: #396EE2;
}

.other {
  opacity: 0.3;
}

.today {
  position: relative;
  color: #FFFFFF;
}

.today::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  width: 30px;
  height: 30px;
  display: block;
  background-color: #FF0000;
  border-radius: 50%;
  content: '';
}
      저작자표시

      '만학도 프로젝트 > JavaScript Calendar' 카테고리의 다른 글

      [JavaScript] 일반적인 달력 만들기 - 날짜 이동 버그 수정하기!  (2) 2021.09.11
      [JavaScript] 일반적인 달력 만들기 - 날짜 이동, 날짜 구분, 오늘 표시  (18) 2020.08.07
      [JavaScript] 일반적인 달력 만들기 - 스타일 입히기  (0) 2020.08.06
      [JavaScript] 일반적인 달력 만들기 - 날짜 가져오기  (9) 2020.08.05
      [JavaScript] 일반적인 달력 만들기 - HTML 뼈대 잡기  (0) 2020.08.03

      관련글 관련글 더보기

      댓글

    Designed by BigTop.

    티스토리툴바