REACT

FullCalendar --값 가져오기

user-anonymous 2020. 12. 23. 18:54
728x90

FullCalendar 
 

1. 주차 별 날짜 가져오기 

weekArray = [1,3,4,5] ==> 주차 배열에 1주차, 3주차, 4주차, 5주차 요소들이 있을 때 1주차에 해당하는
날짜들을 가져올려한다.
 
핵심코드 

$(".fc-week:eq("+i+")").find("div.fc-bg").find("td.fc-day:eq("+w+")");
 
          for(var j =0; j<wkArr.length; j++){ //가져오고 싶은 주차만큼 반복  
              for(var w = 0; w<7 ; w++){//일주일 총 7번돈다.

                wkDay = $(".fc-week:eq("+Number(wkArr[j]-1)+")").find("div.fc-bg").find("td.fc-day:eq("+w+")");

                if (!wkDay.hasClass("fc-other-month")) { //이미 지난 날짜는 빼기 
                        dates.push($(".fc-week:eq("+i+")").find("div.fc-bg").find("td.fc-day:eq("+w+")").data("date"));
               
                }   
              }    
             } 
             
             

 
즉 가져오고 싶은 주차만큼 반복을 하게되면서 .fc-row를 가져오고 그에 대해 또 fc-day:eq(n)번을 돌면서 만일 이 요소가 fc-other-month : 이번달이 아닌 지난달 또는 그담달 날짜를 제외하고 날짜를 가져온다. 
 
이때 .data("date")는 fc-day:eq(n)번에 data attribute로 날짜를 보여주는 속성이다. 이 날짜를 dates라는 배열에 넣어주었다.
 
나는 2020 12월달의 1,2,4,5주차만 한번 가져와봤다. <<다른날짜 제외 및 주말 (토요일,일요일제외)
 

만약 주말을 제외하고싶다면, fc-other-month와 같이 fc-sat, fc-sun을 같은 방식으로 구현하면된다. 
 

728x90
반응형

'REACT' 카테고리의 다른 글

Error#1 transform 속성과 position fixed  (0) 2022.03.24
함수형 React Array state update 방법  (0) 2021.10.14
AWS- appspec.yml root  (0) 2020.09.24
gapi oauth2 - google Calendar  (0) 2020.09.15
React / 환경변수 설정 DefinePlugin  (0) 2020.08.11