[프로젝트] 풀캘린더 라이브러리를 이용한 일정관리(3)

이번 글에서는 풀캘린더를 사용한 일정 관리 시스템의 더욱 고급화된 기능들을 살펴보겠습니다. 드래그 앤 드롭으로 일정 이동, 외부 캘린더와의 동기화, 그리고 추가적인 고급 기능들을 자세히 다루겠습니다.

이전 글 :
[JavaScript] 풀캘린더 라이브러리를 이용한 일정관리(1)
[JavaScript] 풀캘린더 라이브러리를 이용한 일정관리(2)

1. 드래그 앤 드롭으로 일정 이동

풀캘린더의 드래그 앤 드롭 기능을 활용하면 사용자가 마우스로 일정을 쉽게 이동할 수 있습니다.

$('#calendar').fullCalendar({
    // ... 기존 옵션들 ...
    editable: true,
    eventDrop: function(event, delta, revertFunc, jsEvent, ui, view) {
        updateSchedule(event, revertFunc);
    },
    eventResize: function(event, delta, revertFunc, jsEvent, ui, view) {
        updateSchedule(event, revertFunc);
    }
});

function updateSchedule(event, revertFunc) {
    $.ajax({
        url: '/schedule/updateSchedule',
        type: 'PUT',
        contentType: 'application/json',
        data: JSON.stringify({
            id: event.id,
            start: event.start.format(),
            end: event.end ? event.end.format() : null,
            allDay: event.allDay
        }),
        success: function(response) {
            if (response.success) {
                toastr.success('일정이 업데이트되었습니다.');
            } else {
                revertFunc();
                toastr.error('일정 업데이트에 실패했습니다.');
            }
        },
        error: function() {
            revertFunc();
            toastr.error('서버 오류가 발생했습니다.');
        }
    });
}

이 코드는 다음과 같은 기능을 구현합니다:

1. editable: true로 설정하여 일정의 드래그와 리사이즈를 활성화합니다.
2. eventDrop과 eventResize 핸들러를 사용하여 일정 이동과 크기 조절 이벤트를 처리합니다.
3. 변경된 일정 정보를 서버에 전송하여 업데이트합니다.
4. 서버 응답에 따라 성공 또는 실패 메시지를 표시하고, 실패 시 revertFunc()를 호출하여 변경을 취소합니다.

2. 외부 캘린더와의 동기화

Google Calendar와 같은 외부 캘린더와의 동기화는 사용자 편의성을 크게 향상시킬 수 있습니다.

function syncWithGoogleCalendar() {
    gapi.client.calendar.events.list({
        'calendarId': 'primary',
        'timeMin': (new Date()).toISOString(),
        'showDeleted': false,
        'singleEvents': true,
        'maxResults': 2500,
        'orderBy': 'startTime'
    }).then(function(response) {
        var events = response.result.items;
        var syncedEvents = events.map(function(event) {
            return {
                id: event.id,
                title: event.summary,
                start: event.start.dateTime || event.start.date,
                end: event.end.dateTime || event.end.date,
                allDay: !event.start.dateTime,
                editable: false,
                color: '#1976D2',
                description: event.description
            };
        });

        // 기존의 Google 동기화 일정 제거
        $('#calendar').fullCalendar('removeEvents', function(event) {
            return event.source.googleCalendarId;
        });

        // 새로운 Google 일정 추가
        $('#calendar').fullCalendar('addEventSource', {
            events: syncedEvents,
            googleCalendarId: 'primary'
        });

        toastr.success('Google Calendar와 성공적으로 동기화되었습니다.');
    }).catch(function(error) {
        toastr.error('Google Calendar 동기화 중 오류가 발생했습니다.');
        console.error('Error syncing with Google Calendar:', error);
    });
}

$('#syncWithGoogleBtn').click(syncWithGoogleCalendar);

이 코드는 다음과 같은 기능을 수행합니다:

1. Google Calendar API를 사용하여 사용자의 일정을 가져옵니다.
2. 가져온 일정을 풀캘린더 이벤트 형식으로 변환합니다.
3. 기존에 동기화된 Google 일정을 제거하고 새로 가져온 일정을 추가합니다.
4. 동기화 결과를 사용자에게 알립니다.

구현 시 고려사항:

• OAuth 인증: Google API 사용을 위한 인증 절차를 구현해야 합니다.
• 양방향 동기화: 로컬 캘린더의 변경사항을 Google Calendar에도 반영하는 기능을 추가할 수 있습니다.
• 주기적 동기화: 백그라운드에서 주기적으로 동기화하는 기능을 구현할 수 있습니다.

3. 일정 필터링 및 검색 기능

사용자가 원하는 일정만 볼 수 있도록 필터링과 검색 기능을 추가할 수 있습니다.

// 일정 유형별 필터링
$('.schedule-type-filter').on('change', function() {
    $('#calendar').fullCalendar('rerenderEvents');
});

// 일정 검색
$('#scheduleSearchInput').on('input', function() {
    $('#calendar').fullCalendar('rerenderEvents');
});

// 이벤트 렌더링 시 필터링 및 검색 조건 적용
$('#calendar').fullCalendar({
    // ... 기타 옵션들 ...
    eventRender: function(event, element, view) {
        // 유형별 필터링
        var typeVisible = $('#filter-' + event.type).is(':checked');
        
        // 검색어 필터링
        var searchTerm = $('#scheduleSearchInput').val().toLowerCase();
        var titleVisible = event.title.toLowerCase().indexOf(searchTerm) > -1;
        
        return typeVisible && titleVisible;
    }
});

이 코드는 일정 유형별 필터링과 제목 기반 검색 기능을 구현합니다. 사용자가 필터를 변경하거나 검색어를 입력할 때마다 캘린더의 일정이 실시간으로 업데이트됩니다.

4. 일정 공유 및 협업 기능

팀 프로젝트나 그룹 활동을 위한 일정 공유 및 협업 기능을 추가할 수 있습니다.

function shareSchedule(scheduleId) {
    $('#shareModal').modal('show');
    $('#shareScheduleId').val(scheduleId);
}

$('#shareForm').submit(function(e) {
    e.preventDefault();
    var scheduleId = $('#shareScheduleId').val();
    var sharedWith = $('#shareWith').val();

    $.ajax({
        url: '/schedule/share',
        type: 'POST',
        data: {
            scheduleId: scheduleId,
            sharedWith: sharedWith
        },
        success: function(response) {
            toastr.success('일정이 성공적으로 공유되었습니다.');
            $('#shareModal').modal('hide');
        },
        error: function() {
            toastr.error('일정 공유 중 오류가 발생했습니다.');
        }
    });
});

이 기능은 사용자가 특정 일정을 다른 사용자나 그룹과 공유할 수 있게 해줍니다. 서버 측에서는 공유된 일정에 대한 접근 권한을 관리해야 합니다.

5. 알림 및 리마인더 기능

일정 알림 및 리마인더 기능을 통해 사용자가 중요한 일정을 놓치지 않도록 할 수 있습니다.

function scheduleReminder() {
    $.ajax({
        url: '/schedule/upcoming',
        type: 'GET',
        success: function(events) {
            events.forEach(function(event) {
                var start = moment(event.start);
                var now = moment();
                var diff = start.diff(now, 'minutes');

                if (diff > 0 && diff <= 30) {
                    toastr.info(event.title + ' 일정이 30분 후에 시작됩니다.', '일정 알림');
                }
            });
        }
    });
}

// 5분마다 알림 체크
setInterval(scheduleReminder, 300000);

이 코드는 주기적으로 다가오는 일정을 확인하고, 30분 이내에 시작하는 일정에 대해 알림을 표시합니다.

결론

이러한 고급 기능들을 구현함으로써 풀캘린더 기반의 일정 관리 시스템을 더욱 강력하고 유용하게 만들 수 있습니다. 드래그 앤 드롭을 통한 직관적인 일정 관리, 외부 캘린더와의 동기화, 효과적인 필터링 및 검색, 협업을 위한 공유 기능, 그리고 알림 기능 등은 사용자의 생산성과 편의성을 크게 향상시킬 수 있습니다.