nuxt.js를 이용한 캘린더 만들기

혜인·2022년 3월 17일
0

NUXT.JS

목록 보기
1/3

내가 npm으로 추가한 dependencies

"dependencies": {
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/bootstrap": "^0.0.1",
    "@nuxtjs/dotenv": "^1.4.1",
    "@nuxtjs/proxy": "^2.1.0",
    "@nuxtjs/vuetify": "^1.12.3",
    "@popperjs/core": "^2.11.4",
    "axios": "^0.26.1",
    "bootstrap-vue": "^2.21.2",
    "cjs": "^0.0.11",
    "express": "^4.17.3",
    "jquery": "^3.6.0",
    "nuxt": "^2.0.0",
    "portal-vue": "^2.1.7",
    "webpack": "^4.46.0",
    "xml-js": "^1.6.11"
  },
  "devDependencies": {
    "babel-eslint": "^10.0.1",
    "bootstrap": "^5.1.3",
    "eslint": "^4.19.1",
    "eslint-friendly-formatter": "^4.0.1",
    "eslint-loader": "^2.1.1",
    "eslint-plugin-vue": "^4.0.0"
  },

구현한 기능

  • 캘린더 월별로 해당하는 일자가 뜨는 것
  • 이전 달 날짜 뜨는 것
  • 선택한 날짜 조회 시 해당 날짜는 다른 색으로 뜨는 것
  • 이전 달 다음달 조회 하는 것

구현할 예정인 기능

  • 공휴일은 배경색을 다르게 보여주는 것 (공공 API 활용하여 axios 통신으로 할 예정 node.js로 back 서버를 만들어줘야하지 않을까 생각중 현재 공공 api가 잘 불러지지 않음 cors오류 ㅠㅠ)
  • 선택한 날짜는 클릭이 가능하게 되며, 클릭하면 오른쪽 표에 들어가게 되게 하기
  • router를 활용해서 화면전환이 되게 해서 두번째 과제로 넘어갈 수 있게 하면 좋을 것 같다.
  • DB를 연동해서 화면을 꺼도 데이터가 저장되게 하기,,

구현한 기능 설명

1. calendar 월별 날짜 뜨게 하기

vue는 기본적으로 <template></template> 에 html 코드가 들어가고,
<script></script>에 js코드가 들어간다.
css를 편하게 사용하기위해 bootstrap을 활용하였다.

          <h1>{{ currentYear }}년 {{ currentMonthName }} </h1>
        </section>

년도와 월을 표시하는 것은 Date() 로 불러오는 식으로 했다.

export default{ } 안에

data(){ days: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
      currentMonthInNumber: new Date().getMonth(),
      currentYear: new Date().getFullYear(), }

를 작성하여 data를 꺼내와서 썼다.
vue 는 {{ }} 안에 변수명을 넣으면 쉽게 js에서 꺼내서 쓸 수 있다.

요일 나타내는 코드
 <p class="text-center" v-for="(day,index) in days" :key="index"><b>{{ day }}</b></p>

v-for으로 for문을 돌릴 수 있다.

이렇게 하고 간격을 css 코드로 조정 

.days P, .dates p {
 width: 14.28%;
}

날짜와 요일 간격을 이렇게 해주고 d-flex로 가로 정렬 해주면 자동으로 줄바꿈이 되어서
달력의 형태가 만들어진다.

날짜 나타내는 코드
 <div class="dates d-flex" id="calDatetest">

          </div>

빈 div를 id를 calDatetest로 지정해서, script부분에서 값을 넣어주었다.

페이지를 띄울 때 바로 실행되는 메소드는 

mounted() {
    this.drowCalendar();
  }

mounted()에서 하면 된다.
drowCalender()이라는 메소드를 만들어줬다.

drowCalendar(selectDate) {
      const element = document.getElementById("calDatetest");
      var elementText1 = "";
      var elementText2 = "";
      var firstdayList = this.firstDay();
      var lastDayofLastMonth =  new Date(this.currentYear, this.currentMonthInNumber , 0).getDate();
      //elementText1 전달 날짜 표시
      for (var i in firstdayList) {
        elementText2 += "<p class=\"text-center text-muted\">" + (lastDayofLastMonth - firstdayList[i] + 1) + "</p>";
      }
      //elementText2 이달 날짜 표시
      for (var i = 1; i < this.lastDayeofMonth + 1; i++) {
        elementText2 += "<p class=" + this.selectDate(i, selectDate) + "><b>" + i + "</b></p>";
      }
      ;
      element.innerHTML = elementText1 + elementText2;
    }

selectDate는 선택한 날짜에서 받아오는 값인데,
값이 없이 들어와도 캘린더를 띄우는데는 문제는 없었다.
document.getElementById()로 값을 넣어줬다.

2. 이전 달 날짜 표시

firstDay()라는 메소드를 이용해 우선 해당 월의 1일이 무슨요일인지 찾은다음,거꾸로 값을 넣어줬다.
예를 들어 수요일이면 0,1,2 2인데, 거꾸로 리스트를 넣어서
[2,1,0] 이렇게 리스트를 넣어줬다.
그리고 그 전달의 마지막 날짜에서 뺴줬다.
예를들어 3월의 1일이 수요일이라면, 이전달인 2월이면 마지막날짜가 28이니까,
[28-2,28-1,28-0] 이렇게되어서 [26,27,28] 이렇게 나오는 것이다.

 firstDay() {
      var firstDay = new Date(this.currentYear, this.currentMonthInNumber, 1).getDay();
      var firstdayList = [];
      for (var i = firstDay; i > 0; i--) firstdayList.push(i);
      return firstdayList
    }

3. 선택한 날짜 다른색상으로 바꿔주기

색깔 바꿔주는건 if문으로 달력이 그리고있는 날짜 (1~ 31) 가 선택한날짜리스트에 들어있는지를
includes() 로 체크해서 있는 경우에는 bootstrap의 text-primary클래스 값으로 넣어줬고 없는경우엔 ""으로 빈 값을 넣어줬다.

조회버튼 누르면 사이날짜 받아오는 메서드

이 코드에서 jQuery가 사용되었다.

lookUp() {
      var selectDate = Array();
      var curDate = new Date($('#startDate').val());
      var endDate = new Date($('#endDate').val())
      while (curDate <= endDate) {
        selectDate.push(curDate.getFullYear() + "-" + curDate.getMonth() + "-" + curDate.getDate());
        curDate.setDate(curDate.getDate() + 1);
      }

처음에 왜인지 아직 모르겠지만,
var selectDate = [] 로 했더니 에러가 나서 Array()로 바꿔줬더니 에러가 사라졌다,,
아무튼 선택한 값이 결국 selectDate.push() 되는 코드이다.

4. 이전달 다음달 조회 기능

이전달 다음달은 currentMonthInNumber과 currentYear만 변경해주면 자동으로 값은 바뀐다.
월은 현재월에서 +1 -1 하면되지만, 년도는 월에따라서 바뀔때도 있고 안바뀔때도 있다.
그래서 코드는 이렇게 짰다.

prev() {
      if (this.currentMonthInNumber == 0) {
        this.currentYear--;
        this.currentMonthInNumber = 11;
      } else {
        this.currentMonthInNumber--;
      }
      this.lookUp()

    },
    next() {
      if (this.currentMonthInNumber == 11) {
        this.currentYear++;
        this.currentMonthInNumber = 0;
      } else {
        this.currentMonthInNumber++;
      }
      this.lookUp()
    }

메소드 마지막에 선택한 날짜를 가져오고 달력을 그려주는 메소드인
lookUp()을 호출했다.

profile
혜인
다음 포스트

nuxt.js를 이용해 달력 만들기 2

0개의 댓글