[fullcalendar] 커스텀달력 / 이전달, 다음달 날짜 선택 막기

fullcalendar 사용중 2가지 또 다른 문제점을 발견했다.

문제점 및 해결방법을 공유한다.

 

[문제점 1] 이전달, 다음달의 날짜도 한 주로 쳐서 보여지는 문제

위 이미지를 보면 5~11일까지는 다음달에 해당하는 날짜라 보여지면 안되는데(?) 보여지고 있다.

기본 셋팅값인것 같다.

 

 

이 문제는 이외로 쉽게 해결했다.

fixedWeekCount: false,

한 줄 추가해주면 해결 완료!

공식 문서에서 찾다가 안보여서 구글링했는데 성공적이었다. 내가 공식 문서 읽기가 아직 잘 안되는건가..?

 

 

[문제점 2] 이전달, 다음달의 날짜가 선택되는 문제

난 이전달의 날짜와 다음달의 날짜는 선택을 막고 싶은데...선택 되는게 문제였다.

그래서 여러가지 찾아보다가 힌트(?)를 얻어서 내가 그냥 직접 짰다.

조금 단순하게 무식한 방법으로 짜긴 했지만 그래도 결과는 나왔으니 만족!

 

step1. selectAllow 사용한다.

selectAllow: function (selectInfo) {
	var click_start = selectInfo.start.getMonth();
	var click_end = selectInfo.end.getMonth();
	if (click_start != month_int) {
	  return false;
	} else if (click_end != month_int && selectInfo.end.getDate() != 1) {
	  return false;
	} else {
	  return true;
	}
},

선택한 날짜의 시작날짜의 달과 끝날짜의 달을 받아와서 현재 달력의 달과 비교!

맞지 않으면 선택이 안되도록 했다.

 

step2. 현재 보여지는 달을 받아온다. (month_int)

calendar.render();
      
// rendering 후 month 불러오기
month_int = calendar.getDate().getMonth();

// 이전달 이동 후 month 불러오기
$('.fc-prev-button').click(function () {
	month_int = calendar.getDate().getMonth();
});

// 다음달 이동 후 month 불러오기
$('.fc-next-button').click(function () {
	month_int = calendar.getDate().getMonth();
});

calendar.rendar() 밑에 코드를 작성해주었다.

랜더링 시 현재 날짜의 달을 가져와주었고,

밑에는 이전달, 다음달로 이동하는 버튼 클릭시 보여지는 화면의 달을 가져오도록 하였다. 

 

 

더 좋은 방법이 있을 것 같기는 한데...

다음에 시간 나면 더 찾아보든지 해야겠다.