2) 캘린더 구현 - 가로캘린더, 스크롤 드래그로 이동, 속도 설정

캘린더의 기본 베이스는 아래 사이트에서 가져와서 사용했다.

hyojin96.tistory.com/entry/Calendar-%EA%B5%AC%ED%98%84-%EB%AA%A9%ED%91%9C

Calendar 구현 목표

그 후 테스트 용도로 데이터를 넣어보았다.

테스트 데이터를 넣어본 모습(스크롤이 길어 가독성이 좋지 않다)

 이전 게시물에서 말했듯 스크롤이 길어지는 모습을 보였고, 때문에 시간을 조금 투자해 가로 스크롤로 바꿀 수 있었다.

이때 프로젝트에 필요없는 부분이라 생각됐던 좌측 section과 요일을 제거했다.

가로 캘린더

 가로 캘린더를 만든 방법은

white-space: nowrap;
overflow-x: auto;

이 두 문장으로 해결했다.

그 후 테스트데이터를 넣어본 모습

테스트데이터를 다시 넣어보니, 확실히 전보다는 한눈에 들어오는 것을 볼 수 있었다.

양이 많은 날도 있어서 세로스크롤도 추가해줬다.

overflow-y:auto

 하지만 스크롤을 잡고 이동해본 결과 불편하다는 생각이 들었고, 드래그해서 스크롤을 이동해보자는 생각을 했다.

	<script type="text/javascript">

		var dragFlag = false;
		var x, y, pre_x, pre_y, sec, secpre;


		$(function () {
			$('.content-right').mousedown(
				function (e) {
				    now=new Date();
				    secpre=now.getSeconds();

					dragFlag = true;
					var obj = $(this);
					x = obj.scrollLeft();
					y = obj.scrollTop();

					pre_x = e.screenX;
					pre_y = e.screenY;

					$(this).css("cursor", "pointer");

				}
			);


			$('.content-right').mousemove(
				function (e) {
					if (dragFlag) {
						var obj = $(this);
						obj.scrollLeft(x+ 2.2*(pre_x-e.screenX));
						obj.scrollTop(y - e.screenY + pre_y);
                        return false;
					}

				}
			);

			$('.content-right').mouseup(
				function () {
					dragFlag = false;
					$(this).css("cursor", "default");
				}


			);

			$('body').mouseup(
				function () {
					dragFlag = false;
					$('#result').text(dragFlag);
					$(this).css("cursor", "default");
				}
			);

		});

	</script>

mousemove 함수 안에 있는 숫자(현재 2.2)를 수정하면 드래그 속도를 설정할 수 있다. 

 

그렇게 해서 만든 결과물이다. 아직 최종결과와는 많이 다르지만 그래도 한걸음씩 다가가고 있다.