스케줄러 만들기 2 - table 글자 색상 /background 변경 및 js 이벤트 처리

구현해야할 것
1. 일요일은 모두 빨간색으로 처리하기 ok
2. 토요일은 모두 파란색으로 처리하기 ok
3. 지나온 날은 칸 회색으로 바꾸기 ok
4. 오늘은 분홍색색 칸으로 바꾸기 ok
5. 일정 추가가 가능한 날은 연두색으로 바꾸기 ok

 

여기까지는 순조롭게 모두 구현했다.

 

1. 글꼴 색상 처리하기

.css 파일>

  .sat{
        color: blue;
    }
    .sun{
        color: red;
    }
 

글꼴은 css 파일에 각각 스타일을 정의해준 뒤 html 파일에서 class 명을 정해주어 각각의 td 태그 안에 있는 텍스트들의 색상을 변경해주었다. 열 별로 올바르게 적용된 모습을 볼 수 있다.

 

2. javaScript에서 CSS 접근하기

js에서 조건을 주어 CSS를 처리하고 싶었다. 

조건은 지나간 날짜, 현재 날짜, 미래 날짜의 배경 색을 각각 다르게 하는 것으로 이에 대한 조건 처리가 필요했다.

그래서 js에서 CSS에 접근하여 아래와 같은 코드로 처리하였다.

 

주된 코드는 아래와 같다. 

week2_child[write2].style.backgroundColor = 'gray'; //CSS 불러오기

function check_today(indexs, weeks, dates){
    if(dates > today_days){
        //인덱스가 오늘의 날짜보다 크다면(미래: 일정 추가 가능)
        weeks[indexs].style.backgroundColor = '#FFEFD5'; //CSS 불러오기
    } else if(dates == today_days){
         //인덱스가 오늘의 날짜와 같다면(현재: 일정 추가 가능)
         weeks[indexs].style.backgroundColor = '#DB7093'; //CSS 불러오기
    } else if(dates < today_days){
        //인덱스가 오늘의 날짜보다 작다면(지나온 날: 일정 추가 불가)
        weeks[indexs].style.backgroundColor = 'gray'; //CSS 불러오기
    }
}

위와 같은 날짜를 채크하는 함수를 만들어서 

check_today(start, week1_child, dates); //배경 색 채우는 함수를 사용하여 배경 색을 채웠다. 잘 적용되었다.

위의 코드가 어떻게 되는지 참고하고 싶다면 스케줄러 만들기 1글의 코드를 참고하면 된다.

 

 

 

다음 오늘 했던 것들 중 최종 난관은 js로 알림창 처리하기 문제였다.

조건은 아래와 같았다.

 

[세부조건]

 

1. 지나온 날은 일정 추가 불가 (오늘 구현했던 부분)

2. 현재 날짜 기준으로 일정 추가 가능 (오늘 구현했던 부분)

3. 클릭 시 일정 추가 양식 출력 
- 00일 일정 추가 안내 문구/ text필드로 입력받기/Add와 Cancel 버튼 
- Add를 했을 경우 테이블에 일정 박스를 추가 

4. 이미 추가한 박스 수정하기 
- 일정 변경 안내 문구/ 일정 날짜 변경: / text필드로 입력 1(선택한 박스의 날짜 출력) 
- 일정 순서 변경: /text필드로 입력 2(순서 출력-index) 
- Save버튼(다시 저장)/ Delete 버튼(박스 삭제)  

 

<일정 추가기능 구현>
- 마우스 커서 double click으로 일정 추가하기
1)

TEST

 //위와 같이 결과 테스트는 잘 됨
그러나 테이블에는 반응하지 않음 왜 그럴까?를 한참 고민해봤다. 어떻게 각각의 칸에 접근할 수 있을까?

2) if(week2_child[write2].innerText == 4){ //이렇게 하면 테이블 안에 있는 값이 어떤 값인지 알 수 있음(int던지 String이던지 상관 없음)
            console.log("성공");
        }
값 확인을 성공했다.

3) 정답은 이거였다. 태그로 걸러내기! 모든 td 태그에 적용시켜서 알림창 띄우기를 성공했다.

var td = document.querySelectorAll('td'); //모든 태그에 대해 알림창 설정
 
for(var i=0; i<td.length; i++){
    if(i>=(today_days+null_days-1)){ //여기에서만 실행되도록 정하기 today_days+null_days-1는 현재 날짜 전까지의 인덱스를 표현한 것
        //get_data(i); //해당 인덱스에만 알람 표시하기
        //console.log(get_data(i));
        td[i].ondblclick = function() {
            //test_data = $("#data").text();
           // console.log(get_data(i));
            alert('hum');
        };
    } 
}

4) 해야하는 것
제이쿼리로 각 칸의 innerText를 얻어와서 값 비교를 해서
작으면 추가 불가능하고 크거나 같으면 알림창이 뜨도록 해야하는데 
정보에 접근하는 것은 알았으나 내가 클릭한 태그가 몇 번째 태그인지 알 수 없음

5) 잠깐 킵 해두는 코드

for(var i=0; i<td.length; i++){ 
    td[i].ondblclick = function(index) { 
        get_data(i); 
        //test_data = $("#data").text(); 
       // console.log(get_data(i)); 
        console.log(index); 
        //alert('hum'); 
    }; 
}

여기서 깨달은게, 굳이 제이쿼리를 사용해야 하나였다. 결론적으로 오늘의 코드에서는 필요없었지만, 후에 참고하기 위해 올려둔다.

 

js 파일에서 제이쿼리를 사용할 경우에는 아래와 같은 코드를 작성해서 함수를 실행시켜야한다.

function loadJQuery() {
    var oScript = document.createElement("script");
    oScript.type = "text/javascript";
    oScript.charset = "utf-8";          
    oScript.src = "http://code.jquery.com/jquery-1.6.2.min.js";    
    document.getElementsByTagName("head")[0].appendChild(oScript);
}
//제이쿼리 사용시 위의 함수를 로드할 것
loadJQuery();

6) 성공
반복문과 조건문으로 해당하는 날짜에만 접근해서 설정이 가능했다.

조금 뭔가 돌아서 삽질을 열심히 한 것 같지만 생각보다 단순하게 생각해야겠더라. 

그래도 많은 걸 배웠으니 됐다.