자스민Javascript [javascript] 추억의 javascript로 달력 만들기 (1)호키도키 2019. 7. 24. 22:03 작년에 자바스크립트를 만지면서 dom을 가지고 뭘 만들어 볼 수 있으려나 싶어서 만들어 본 것이 달력만들기였다. Date객체만을 이용해서 달력을 만들었는데 이런 생 노가다가 없었다. 지금이야 React moment 라이브러리를 이용해서 쉽게 만들지만 그때는 꽤나 힘들었다... 그래서 삽질의 과정을 포스팅 해보려 한다. 틀 만들기목업 design틀은 div가 아닌 table로 만들 것이다. html 결과style 추가하기html의 결과가 조금 구리니 callender td에 style 을 추가하자 결과
구리긴 매 한가지긴 하지만 그래도 각 td의 경계가 명확해졌다. 현재 연도 및 월 표시현재 시간을 알기 위해서 Date 객체를 이용해야 한다. Date객체의 생성자 인자로는 "연도 , 월, 일, 시, 분, 초, milliSecond" 를 넣어 객체의 시간을 세팅 할 수 있으며 ".getMonth() , .getFullYear() " 같은 메서드로 해당 객체에서 연도와 월 일을 추출하는 것도 가능하다.
첫 주 전 달의 빈공간 구현하기매달 1일이 월요일 부터 시작하는 것이 아니니 해당 1일의 요일전까지는 "" td에 날짜가 없어야 한다. 그러기 위하여 출력하는 달의 1일의 요일을 얻기위하여 ".getDay()" 메소드를 사용한다.
해당 달의 달력 구현하기이제 한 주가 돌아 갈때마다 각 셀에 setDays 를 넣어주기만 하면된다. 현 7월의 달력이 출력되는 모습 마지막 날 이후 다음 달 추가하기setDays 가 해당 달의 마지막 날 이후부터 넣으면 되니까 nextMonthDate를 전역으로 두고
전체
현재까지는 preventMonth 와 nextMonth 버튼의 구현을 아직 하지 않았다. 2020 - 03 -27안녕하십니까 여러분 블로그 주인 호키도키입니다. . 요즘 들어 블로그 관리가 좀 허술 한데, 오랜만에 이 블로그 통계를 보니 이 추억의 자바스크립트로 달력만들기 포스팅이 유독 조회수가 가장 높더군요. 약 2년전 처음으로 만든 허접한 토이프로젝트임에도 불구하고 많이들 봐주셔서 정말 감사드립니다. 혹시 시간이 좀 나시는 분은 글을 보시고 이 글을 어떤 이유로 좀 들어왔는지 댓글 한번만 달아주실 수 있나요 ? ㅎㅎ 참고해주셔서 감사드립니다. |