[FullCalendar] 이미 출석 체크가 되었다는 표시하기

목표 : 이미 출석 체크가 된 날짜에 이미 출석되었다는 표시를 해주어야한다.

 

1. 날짜를 처음 클릭했을 때 체크되었는지 알려주는 boolean변수도 함께 넣어준다. (default값은 false)

2. 출석 날짜들 중 같은 날짜가 있으면 "이미 출석되었습니다"라는 메세지를 보이게 해줌.

3. 그렇지 않으면 "출석되었습니다"는 메세지와 함께 출석 날짜를 모아놓은 데이터 리스트에 출석날짜를 넣어줌.

 

처음엔 저장된 출석 날짜에 클릭한 날짜가 존재하지 않으면 출석되었다는 메세지와 함께 날짜를 저장해주려고 했다. 반복문을 돌리면서 비교해주려 했는데 자꾸 새로운 데이터만 추가 되었다. for문으로는 비교를 해주지 못했다.

var todayDate = this.$moment().format("YYYY-MM-DD")
var clickDate = this.$moment(arg.date).format("YYYY-MM-DD")
if(todaydate == clickdate) {
	for(var i=0; i<this.attendanceDates.length; i++) {
		if(this.attendanceDates[i].attendanceDate!=clickDate && !this.attendanceDates[i].isChecked) {
			alert("출석되었습니다♥");
			var newDate = {
				attendanceDate: clickDate,
				isChecked : true
			}
			this.attendanceDates.push(newDate);
			break;
		}
		else {
			alert("이미 출석되었습니다♥");
		}
	}            
	console.log(this.attendanceDates)
}
else {
	alert("접근할 수 없음");
}

some메서드를 이용해서 출석 날짜들을 하나씩 가져와서 오늘의 날짜와 비교해서 존재하면 true, 존재하지 않으면 false를 변수에다 저장해주었다. 

var todayDate = this.$moment().format("YYYY-MM-DD")			//오늘 날짜
var clickDate = this.$moment(arg.date).format("YYYY-MM-DD")	//클릭한 날짜

if (todayDate != clickDate) return alert("접근할 수 없음");	//오늘 날짜에만 클릭 할 수 있게 한다.

var todayDone = this.attendanceDates.some(date => date.attendanceDate == todayDate);
if(todayDone) {		//같은 날짜가 있으면 이미 출석 메세지를 띄움
	return alert("이미 출석되었습니다♥");
} else {			//없으면 출석 메세지와 데이터에 저장을 시켜줌
	alert("출석되었습니다♥");
	var newDate = {
		attendanceDate: clickDate,
		isChecked : true
	}
	this.attendanceDates.push(newDate);
}

some() 메서드란?

some() 메서드는 배열 안의 어떤 요소라도 주어진 판별 함수를 통과하는지 테스트합니다.

요소가 하나라도 배열 내 존재하는 경우 true를 반환

요소가 배열 내 존재하지 않는 경우 false를 반환

 

some() 메서드 사용법

비교할 배열.some(각 요소를 시험 할 함수)

 

 

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/some