눈으로 개발하는 블로그

캘린더 UI에 주간 달력 기능을 추가하겠습니다. 기존 캘린더 파일을 오픈하여 수정합니다. ​ 달력 뷰 버튼 그룹에 주간 달력으로 변경할 수 있게 버튼을 추가합니다. 연간 월간 주간 calendar.css 파일에 주간의 style을 추가합니다. /* calendar week */ .calendar.week table > tbody > tr > td { padding: 10px 10px; } .calendar.week table > tbody > tr > td > span { padding: 10px 10px; } .calendar.week table > tbody > tr > td > span.today { padding: 9px 9px; } 주간 달력 함수 추가합니다. function calendarWe..

주간 배열을 생성할 때 이전 달과 이전 연도, 다음 달과 다음 연도를 고려해서 계산하다 보니 복잡해 보일 수 있습니다. 그래서 쉽게 주간 배열을 생성하는 다른 방법을 알려드리겠습니다. 이 방법은 월간 달력에도 적용할 수 있습니다. ​ 주간 배열에 날짜(숫자)나 연월일(문자열) 대신에 날짜 객체를 생성해서 추가하면 됩니다. 날짜 객체를 사용하면 이전 달과 이전 연도, 다음 달과 다음 연도를 계산 없이 쉽게 처리할 수 있습니다. ​ calendar.js 파일을 오픈하여 주간 달력 함수를 수정합니다. ​ ​ 날짜 객체로 주간 배열 생성 ​ 날짜 객체로 배열을 만들기 위해서 배열을 초기화합니다. // 주간 날짜 배열 var arWeek = [null, null, null, null, null, null, nul..

주간 달력은 월간 달력과 달리 일주일(Week) 단위로 처리됩니다. 그리고 월 초에는 이전 달 마지막 주와 합쳐져서 처리되어야 합니다. 그래서 이전 달의 마지막 일을 구해야 합니다. 월 말에는 다음 달 첫 주와 합쳐져 처리되어야 합니다. // 달력 연도 var calendarYear = date.getFullYear(); // 달력 월 var calendarMonth = date.getMonth() + 1; // 달력 일 var calendarToday = date.getDate(); var monthLastDate = new Date(calendarYear, calendarMonth, 0); // 달력 월의 마지막 일 var calendarMonthLastDate = monthLastDate.getDa..

달력 생성 함수(calendar.js)를 사용하여 캘린더(Calendar)를 만들겠습니다. ​ ​ 캘린더 UI 구성 ​ 기존 달력 UI에 연간과 월간 달력으로 변경할 수 있게 달력 뷰 버튼 그룹을 추가합니다. 오늘 년간 월간 기존 style에 달력 컨트롤 버튼 그룹(.calendar-controls)을 수정하고 달력 뷰 버튼 그룹(.calendar-views)를 추가합니다. ​ 년과 월을 표시하는 태그와 달력 컨트롤 버튼 그룹(.calendar-controls)인 태그가 연속으로 나열되기 위해서 display를 inline-block으로 변경하고 달력 컨트롤 버튼 그룹(.calendar-controls)인 태그의 위치를 vertical-align과 margin으로 조정합니다. 달력 뷰 버튼 그룹(..

달력 생성 함수를 공용으로 사용하기 위해 웹 페이지에서 정보를 가져와 사용하는 문제점을 해결하고 확장해서 사용하기 위해서입니다. ​ ​ data-date 속성 추가 ​ 달력에서 날짜인 태그의 data-date 속성으로 연월일(yyyy-MM-dd)을 추가합니다. // 날짜 var calendarDay = 0; for (var index1 = 0; index1 추가 html += "" + calendarDay + ""; } else { html += ">"; --> 추가 } html += ""; calendarPos++;..

공휴일 표시 및 툴팁 표시 ​ 달력에 공휴일(국가에서 정한 휴일)을 표시하기 위해서 공휴일 정보가 있는 배열을 객체에 추가합니다. 공휴일 정보는 날짜(date)와 공휴일 명(title)으로 구성합니다. var options = { showToday : true, arHoliday : [{"date" : "3-1", "title" : "삼일절"}] }; 3월의 공휴일은 삼일절(3월 1일)입니다. ​ 에 공휴일(holiday)의 폰트 컬러를 추가합니다. .calendar table > tbody > tr > td > span.holiday { color: red; } 스크립트의 배열(Array) 객체는 typeof로는 object로 나옵니다. 그래서 instanceof를 사용하여 생성 타입을 확인하거나 Ar..

파라미터를 객체로 전달 ​ 함수에 전달되는 파라미터가 많아지면서 여러 설정 중 하나를 처리하기 위해 다른 설정도 처리되어야 하는 문제가 발생합니다. calendar(date); --> 요일(숏 네임) 표시, 오늘 표시 calendar(date, false); --> 요일 표시 제거, 오늘 표시 calendar(date, true, true); --> 요일(풀 네임) 표시, 오늘 표시 calendar(date, true, false, false); --> 요일(숏 네임) 표시, 오늘 표시 제거 위의 예제처럼 오늘 표시를 제거하기 위해서 앞의 파라미터들을 설정해야 합니다. 이렇게 해도 문제는 없는지 함수의 파라미터가 길어집니다. ​ 그래서 여러 파라미터들을 객체로 만들어 전달하면 설정 별로 처리할 수 있습니..

달력 생성 함수를 모듈화 하기 전에 달력의 토요일과 일요일에 폰트 컬러를 추가하겠습니다. ​ 에 토요일(saturday)과 일요일(sunday)의 폰트 컬러를 추가합니다. .calendar table > thead > tr > th.saturday { color: gray; } .calendar table > thead > tr > th.sunday { color: red; } .calendar table > tbody > tr > td > span.saturday { color: gray; } .calendar table > tbody > tr > td > span.sunday { color: red; } 기존 함수에서 년과 월을 출력하는 부분은 삭제하고 토요일과 일요일에 class를 추가하고 생성된 ..

이어서 달력의 월 변경 기능과 날짜 클릭 이벤트를 처리하겠습니다. ​ 먼저 태그에 있는 style 속성으로 인해 스크립트가 복잡해 보입니다. 그래서 태그의 style 속성을 class로 변경 처리하겠습니다. 그리고 달력의 크기와 월 변경 기능을 추가할 영역을 위해 태그로 감쌉니다. 월(이전 달, 다음 달) 변경 기능 추가 ​ 년과 월을 표시할 태그를 추가하고 이전 달과 다음 달로 이동할 수 있는 버튼과 오늘 날짜로 이동하는 버튼을 추가합니다. 오늘 에도 class를 추가합니다. .calendar > .calendar-header { position: relative; height: 50px; margin: 0px 20px; } .calendar > .calendar-header > .calenda..

JavaScript의 Date 객체를 사용하여 달력(Calendar)을 만들어 보겠습니다. ​ 날짜를 기준으로 달력에 필요한 정보들을 계산하여 가져옵니다. ​ Date 객체의 getFullYear() 메서드, getMonth() 메서드, getDate() 메서드로 연도, 월, 일을 구합니다. var date = new Date(); // 달력 연도 var calendarYear = date.getFullYear(); // 달력 월 var calendarMonth = date.getMonth() + 1; // 달력 일 var calendarToday = date.getDate(); console.log(calendarYear); --> 2022 console.log(calendarMonth); --> 3 ..

SNS에서 작성된 게시글을 보면 작성된 날짜가 "방금 전", "10초 전", "1분 전", "1시간 전", "1일 전", "10일 전"처럼 작성 날짜를 기준으로 지난 시간을 계산하여 표시되는 것을 볼 수 있습니다. ​ SNS처럼 작성 날짜를 기준으로 지난 시간을 계산하는 함수를 생성하겠습니다. ​ ​ getTime() 메서드 ​ Date 객체의 getTime() 메서드는 1970년 1월 1일 00시 00분 00초 UTC를 기준으로 경과 한 밀리초를 반환합니다. var today = new Date(); var writeDate = new Date("2022-03-13 15:23:37"); console.log(today.getTime()); --> 1647233149748 console.log(write..

이어서 경과된 시간(밀리초)으로부터 월, 일, 시, 분, 초를 계산해 보도록 하겠습니다. ​ 경과 시간에서 경과된 연도를 빼서 일을 계산합니다. var elapsedDay = Math.trunc((elapsedTime - elapsedTimeOfYear) / day); console.log(elapsedDay); --> 71 Math.trunc() 메서드를 소주점 이하는 제거하고 정수만 반환합니다. ​ 월을 계산하기 위해서 계산된 연도 기준으로 2월이 윤달인지 확인하고 윤달을 계산합니다. 그리고 계산된 월을 빼서 월의 일로 계산합니다. const monthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; // 윤년 계산 if (dateYear % 400..

JavaScript의 Date 객체에 있는 parse() 메서드를 시용하여 날짜와 시간 문자열을 구문 분석하여 1970년 1월 1일 00시 00분 00초 UTC를 기준으로 경과 한 밀리초를 구하고 경과된 년, 일, 시, 분, 초를 계산해 보겠습니다. ​ ​ parse() 메서드 ​ parse() 메서드는 날짜와 시간 문자열을 구문 분석하여 1970년 1월 1일 00시 00분 00초 UTC를 기준으로 경과 한 밀리초를 반환합니다. Date.parse(dateString); dateString(날짜와 시간)은 ISO 8601과 RFC 2822로 표기된 문자열입니다. console.log(Date.parse("2022-03-13 15:23:37")); console.log(Date.parse("2022-3-1..

JavaScript의 replace() 메서드를 시용하여 Date 객체에서 날짜와 시간을 문자열로 변환하여 가져오는 함수를 생성하도록 하겠습니다. ​ 먼저 replace() 메서드부터 알아보겠습니다. ​ replace() 메서드 ​ replace() 메서드는 문자열을 기준으로 pattern(교체할 문자열이나 정규식)과 일치하는 일부 또는 전체 부분을 replacement(교체할 문자열이나 교체 함수를 통한 교체 처리)로 교체하여 새로운 문자열을 반환합니다. str.replace(pattern, replacement); // 대상 문자열과 교체할 문자열을 이용한 처리 var newStr = str.replace(substr, newSubstr); // 정규식과 교체할 문자열을 이용한 처리 var newSt..

JavaScript에서는 Date 객체를 사용하여 날짜와 시간을 문자열로 변환하여 가져오는 다양한 메서드를 제공하고 있습니다. ​ ​ Date 객체 생성 ​​ 날짜와 시간을 얻기 위해서는 생성자로 Date 객체를 호출합니다. 그러면 새로운 Date 객체가 반환됩니다. var today = new Date(); 또는 생성자에 날짜와 시간 문자열을 전달하면 내부적으로 날짜와 시간을 구문 분석하여 새로운 Date 객체가 반환됩니다. var today = new Date(dateString); dateString(날짜와 시간)은 ISO 8601과 RFC 2822로 표기된 문자열입니다. var today = new Date("2022-03-13 15:23:37"); var today = new Date("2022..

JavaScript에서 날짜와 시간을 얻거나 생성할 때 Date 객체를 사용합니다. ​ ​ Date 객체 생성 ​ 오늘 시간을 얻기 위해서는 생성자로 Date 객체를 호출합니다. 그러면 새로운 Date 객체가 반환됩니다. var today = new Date(); Date 시간 얻기 ​ 생성된 Date 객체의 메서드를 사용하여 시, 분, 초, 밀리초를 가져옵니다. ​ getHours() 메서드는 생성된 Date 객체에서 시간(0 ~ 23)을 가져옵니다. ​ getMinutes() 메서드는 생성된 Date 객체에서 분(0 ~ 59)을 가져옵니다. ​ getSeconds() 메서드는 생성된 Date 객체에서 초(0 ~ 59)를 가져옵니다. ​ getMilliseconds() 메서드는 생성된 Date 객체에서..

JavaScript에서 날짜와 시간을 얻거나 생성할 때 Date 객체를 사용합니다. ​ ​ Date 객체 생성 ​ 오늘 날짜를 얻기 위해서는 생성자로 Date 객체를 호출합니다. 그러면 새로운 Date 객체가 반환됩니다. var today = new Date(); 생성된 Date 객체를 console.log로 출력하면 현재 날짜와 시간이 그리니치 표준시(GMT - Greenwich Mean Time)로 출력됩니다. Date 객체를 console.log로 출력하면 Date 객체의 toString() 메서드가 자동으로 호출됩니다. console.log(today); --> Wed Mar 13 2022 15:23:37 GMT+0900 (한국 표준시) console.log(today.toString()); --..