이전 글에서 풀캘린더 API를 사용한 기본적인 일정 관리 시스템 구현에 대해 살펴보았습니다. 이번에는 더 발전된 기능들을 추가하여 일정 관리 시스템을 한 단계 업그레이드해보겠습니다.
1. 일정 유형 구분 (개인/공유/전사 일정)
일정을 개인, 공유, 전사 일정으로 구분하여 관리할 수 있습니다. 이를 위해 일정 객체에 type 필드를 추가하고, 각 유형별로 다른 색상이나 아이콘을 사용하여 시각적으로 구분할 수 있습니다.
eventRender: function(event, element) {
if (event.type === 'personal') {
element.css('background-color', '#3788d8');
} else if (event.type === 'shared') {
element.css('background-color', '#28a745');
} else if (event.type === 'company') {
element.css('background-color', '#dc3545');
}
}이 코드는 각 일정의 type 속성에 따라 다른 배경색을 적용합니다. 이렇게 하면 사용자가 일정의 유형을 쉽게 구분할 수 있습니다.
- 개인 일정은 파란색(#3788d8)
- 공유 일정은 녹색(#28a745)
- 전사 일정은 빨간색(#dc3545)
2. 색상 선택기 구현
사용자가 일정의 색상을 직접 선택할 수 있도록 색상 선택기를 구현할 수 있습니다.
<div class="form-group">
<label for="scheduleColor">색상</label>
<input type="hidden" id="scheduleColor">
<div class="color-picker">
<div class="color-option" style="background-color: #FF0000;" data-color="#FF0000"></div>
<div class="color-option" style="background-color: #00FF00;" data-color="#00FF00"></div>
<div class="color-option" style="background-color: #0000FF;" data-color="#0000FF"></div>
<!-- 추가 색상 옵션 -->
</div>
</div>$('.color-option').click(function() {
$(this).siblings().removeClass('selected');
$(this).addClass('selected');
var color = $(this).data('color');
$('#scheduleColor').val(color);
});이 코드는 색상 선택기를 구현합니다:
1. HTML 부분에서는 여러 색상 옵션을 가진 div 요소들을 생성합니다.
2. JavaScript 부분에서는 색상 옵션 클릭 시 선택된 색상을 표시하고, 해당 색상 값을 hidden input에 저장합니다.
이렇게 하면 사용자가 원하는 색상을 쉽게 선택할 수 있고, 선택된 색상은 일정 생성/수정 시 서버로 전송됩니다.
3. 참석자 선택 기능
공유 일정의 경우, 참석자를 선택할 수 있는 기능을 추가할 수 있습니다.
<div id="participantSelection" class="form-group">
<label class="form-label">참석자 선택</label>
<div class="participant-selection-container">
<div class="department-list">
<h6>부서 목록</h6>
<ul id="departmentList"></ul>
</div>
<div class="employee-list">
<h6>사원 목록</h6>
<ul id="employeeList"></ul>
</div>
<div class="selected-employees">
<h6>선택된 참석자</h6>
<ul id="selectedEmployeeList"></ul>
</div>
</div>
</div>function loadEmployees(deptCode) {
$.ajax({
url: '/schedule/selectEmpByDept',
type: 'GET',
data: { deptCode: deptCode },
dataType: 'json',
success: function(employees) {
const employeeList = $('#employeeList');
employeeList.empty();
$.each(employees, function(index, emp) {
employeeList.append(`<li data-emp-no="${emp.employeeNo}">${emp.employeeName}</li>`);
});
}
});
}
$(document).on('click', '#employeeList li', function() {
const empNo = $(this).data('emp-no');
const empName = $(this).text();
if (!$(`#selectedEmployeeList li[data-emp-no="${empNo}"]`).length) {
$('#selectedEmployeeList').append(`<li data-emp-no="${empNo}">${empName} <span class="remove-employee">×</span></li>`);
}
});
$(document).on('click', '.remove-employee', function() {
$(this).parent().remove();
});이 코드는 참석자 선택 기능을 구현합니다:
- HTML 부분에서는 부서 목록, 사원 목록, 선택된 참석자 목록을 표시할 구조를 만듭니다.
loadEmployees함수는 선택된 부서의 사원 목록을 서버에서 가져와 표시합니다.- 사원 목록에서 사원을 클릭하면 선택된 참석자 목록에 추가됩니다.
- 선택된 참석자 옆의 'x' 버튼을 클릭하면 해당 참석자를 목록에서 제거합니다.
이 기능을 통해 사용자는 쉽게 일정의 참석자를 선택하고 관리할 수 있습니다.
4. 반복 일정 구현
정기적으로 반복되는 일정을 설정할 수 있는 기능을 추가할 수 있습니다.
<div class="form-group">
<label for="scheduleRepeat">반복</label>
<select id="scheduleRepeat" class="form-control">
<option value="none">반복 안함</option>
<option value="daily">매일</option>
<option value="weekly">매주</option>
<option value="monthly">매월</option>
<option value="yearly">매년</option>
</select>
</div>$('#addScheduleForm').submit(function(e) {
e.preventDefault();
var newSchedule = {
// ... 기존 필드들 ...
repeat: $('#scheduleRepeat').val()
};
$.ajax({
url: '/schedule/addSchedule',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify(newSchedule),
success: function(response) {
// 서버에서 반복 일정 생성 후 캘린더에 렌더링
$('#calendar').fullCalendar('refetchEvents');
$('#scheduleModal').modal('hide');
}
});
});이 코드는 반복 일정 기능을 구현합니다:
- HTML에서 반복 주기를 선택할 수 있는 드롭다운 메뉴를 제공합니다.
- 일정 추가 시 선택된 반복 주기를 포함하여 서버로 전송합니다.
- 서버에서는 이 정보를 바탕으로 반복 일정을 생성하고 저장합니다.
- 클라이언트에서는
refetchEvents를 호출하여 새로 생성된 반복 일정을 포함한 모든 일정을 다시 불러옵니다.
서버 측에서는 반복 규칙에 따라 여러 개의 일정 인스턴스를 생성하거나, 하나의 반복 일정 객체를 만들고 클라이언트에서 이를 해석하여 표시하는 방식으로 구현할 수 있습니다.
