[Java Script] 연속일정 날짜별로 쪼개서 객체로 만들기

Today's mission.

연속일정을 분리시키기

 달력에 위와 같이 일정을 등록하고 목록보기를 하면

위와 같이 [아배고파고파] 일정이 시작한 날 한번만 목록에 나타남을 볼 수 있다.

이렇게 나오면 앙대요~

목록에서 연속일정의 경우 시작 날짜부터 끝 날짜 까지 모두 일정이 표시되어야 한다.

연속 일정을 목록에 나타나게 하는 방법을 알아봅시다아아아아아ㅏㅏㅏㅏㅏ

<1> 먼저 일정을 등록하면 data가 어떻게 들어가는지 봅시다.

var _eventlist = [
    {
        title: "월요일엔내가",
        fromDate: "2014-07-21 11:00:00",
        toDate: "2014-07-21 15:30:00"
    },
    {
        title: "아배고파고파",
        fromDate: "2014-07-22 11:00:00",
        toDate: "2014-07-24 11:30:00"
    },
    {
        title: "수요일 점심밥",
        fromDate: "2014-07-23 12:00:00",
        toDate: "2014-07-23 12:30:00"
    }
]

  이와 같이 리스트 안에 각 일정이 객체 형태로 들어가 있다.

여기서도 보면 [아배고파고파] 일정은 

fromDate : '2014-07-22 11:00:00',  toDate : '2014-07-24 11:30:00'

이렇게 들어가 있지만 객체가 한번밖에 들어가 있지 않다.

때문에 목록보기 시 한번밖에 보이지 않는 것이다.

fromDate 를 기준으로 목록보기에 보이기 때문에 리스트 안의 객체도 각각의 날짜별로 객체가 만들어져야한다.

 코딩 순서를 생각해보자.

1) 새로운 리스트 _newEventList 를 만든다.

function disassembleContinuedEvent(data) {
 
    var _newSearchEventList = [];
    
    
    return _newSearchEventList;
}

2) 원래의 리스트의 객체들을 하나씩 가져와 _newEventList 에 넣는다.

function disassembleContinuedEvent(data) {
 
    var _newSearchEventList = [];
    
    for(var i = 0; i < data.length; i++) {
    
        var _each = data[i];
        
        _newSearchEventList.push(_each);        
    }
    return _newSearchEventList;
}

3) fromDate와 toDate를 비교하여 다르면 연속 일정으로 인식한다.

if(_fromDateYMD != _toDateYMD) {
            
    _newSearchEventList.push(_each);        
        
} else {
    _newSearchEventList.push(_each);
}

4) 해당 연속 일정의 객체를 복사 한 후 fromDate 부터 toDate 까지 하루씩 더해  _newEventList 에 복사한 객체를 넣는다.

fromDate : '2014-07-22 11:00:00' / toDate : '2014-07-23 00:00:00'

fromDate : '2014-07-23 00:00:00' / toDate : '2014-07-24 00:00:00'

fromDate : '2014-07-24 00:00:00' / toDate : '2014-07-25 11:30:00'

/**
 * 연속일정 시작 날짜부터 끝 날짜까지
 * fromDate, toDate 재셋팅하기
 */ 
for(var _newEachDate = new Date(_newFromDate.getTime()); _newEachDate < _newToDate; _newEachDate.addDate(1)) {
    var _thisDate = new Date(_newEachDate.getTime());   // 객체
    var _nextDate = new Date(_newEachDate.getTime()).addDate(1);  // 하루씩 더하기
    var _newObject = $.extend(true, {}, _each);   // 객체 복사
    var _strNewEachDate = _newEachDate.format('yyyy-mm-dd');   // 'yyyy-mm-dd' 형태로 변환
    var _strNewFromDate = _newFromDate.format('yyyy-mm-dd');
    var _strNewToDate = _newToDate.format('yyyy-mm-dd');
    
    if(_strNewEachDate == _strNewFromDate) {   // 일정 시작 날짜 이면
        // fromDate 는 시간까지 그대로
        _newObject.fromDate = _newFromDate.format('yyyy-mm-dd hh:MM:00');
        // toDate 는 다음날 00시 00분 00초 로 셋팅
        _newObject.toDate = _nextDate.format('yyyy-mm-dd 00:00:00');
        
    } else if(_strNewEachDate == _strNewToDate) {   // 일정 끝 날짜 이면
        _newObject.fromDate = _thisDate.format('yyyy-mm-dd 00:00:00');
        // toDate 는 시간까지 그대로
        _newObject.toDate = _newToDate.format('yyyy-mm-dd hh:MM:00');
        
    } else {   // 일정 사이의 날짜들은  00시 00분 00초 로 셋팅
        _newObject.fromDate = _thisDate.format('yyyy-mm-dd 00:00:00');
        _newObject.toDate = _nextDate.format('yyyy-mm-dd 00:00:00');
    }    
    _newSearchEventList.push(_newObject);    // 리스트에 객체 넣기
}

객체가 제대로 들어갔는지 확인해보자

5) 끝.

다시 목록을 확인해 볼까나아아아아아ㅏㅏㅏㅏ

짜자라잔!! 

연속일정도 제대로 나타납니다!!! 완성!! 훌라훌라

>> 전체 소스보기

/**
 *  연속일정을 분리시키기
 */ 
function disassembleContinuedEvent(data) {
 
    var _newSearchEventList = [];
    
    for(var i = 0; i < data.length; i++) {
        var _each = data[i];
        var _fromDate = _each.fromDate;
        var _toDate = _each.toDate;
        var _fromDateYMD = _fromDate.substring(0, 10);
        var _toDateYMD = _toDate.substring(0, 10);
        
        if(_fromDateYMD != _toDateYMD) {
            var _newFromDate = SWP.Calendar.parseDate(_fromDate);
            var _newToDate = SWP.Calendar.parseDate(_toDate);
            
            for(var _newEachDate = new Date(_newFromDate.getTime()); _newEachDate < _newToDate; _newEachDate.addDate(1)) {
                var _thisDate = new Date(_newEachDate.getTime());
                var _nextDate = new Date(_newEachDate.getTime()).addDate(1);
                var _newObject = $.extend(true, {}, _each);
                var _strNewEachDate = _newEachDate.format('yyyy-mm-dd');
                var _strNewFromDate = _newFromDate.format('yyyy-mm-dd');
                var _strNewToDate = _newToDate.format('yyyy-mm-dd')
                
                if(_strNewEachDate == _strNewFromDate) {
                    _newObject.fromDate = _newFromDate.format('yyyy-mm-dd hh:MM:00');
                    _newObject.toDate = _nextDate.format('yyyy-mm-dd 00:00:00');
                } else if(_strNewEachDate == _strNewToDate) {
                    _newObject.fromDate = _thisDate.format('yyyy-mm-dd 00:00:00');
                    _newObject.toDate = _newToDate.format('yyyy-mm-dd hh:MM:00');
                } else {
                    _newObject.fromDate = _thisDate.format('yyyy-mm-dd 00:00:00');
                    _newObject.toDate = _nextDate.format('yyyy-mm-dd 00:00:00');
                }    
                _newSearchEventList.push(_newObject);        
            }
        } else {
            _newSearchEventList.push(_each);
        }
    }
    return _newSearchEventList;
}

날씨가 신나게 덥다 화이팅!