티스토리 뷰

WEB/JQuery

업무 일정 관리 시스템

silverline79 2026. 1. 26. 20:56

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>업무 일정 관리 시스템</title>
    
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/index.global.min.js'></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
        body { background-color: #f8f9fa; padding: 20px; }
        .main-container {
            display: flex;
            gap: 20px;
            max-width: 1200px;
            margin: 0 auto;
            height: 80vh;
        }
        /* 좌측 달력 영역 */
        #calendar-container {
            flex: 2;
            background: white;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        /* 우측 일정 리스트 영역 */
        #schedule-container {
            flex: 1;
            background: white;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            display: flex;
            flex-direction: column;
        }
        .date-header {
            font-size: 1.5rem;
            font-weight: bold;
            color: #0d6efd;
            margin-bottom: 15px;
            border-bottom: 2px solid #0d6efd;
            padding-bottom: 10px;
        }
        .event-list-wrapper {
            overflow-y: auto;
            flex-grow: 1;
        }
        .event-card {
            background: #f1f8ff;
            border-left: 5px solid #0d6efd;
            padding: 12px;
            margin-bottom: 10px;
            border-radius: 4px;
        }
        .event-card h5 { margin: 0; font-size: 1rem; color: #333; }
        .event-card p { margin: 5px 0 0; font-size: 0.85rem; color: #666; }
        .no-events { text-align: center; color: #999; margin-top: 50px; }
        
        /* FullCalendar 스타일 수정 */
        .fc-daygrid-day { cursor: pointer; }
        .fc-day-today { background-color: #e7f1ff !important; }
    </style>
</head>
<body>

<div class="container-fluid">
    <h2 class="text-center mb-4">📅 일정 관리 대시보드</h2>
    
    <div class="main-container">
        <div id="calendar-container">
            <div id="calendar"></div>
        </div>

        <div id="schedule-container">
            <div class="date-header">
                <span id="view-date">오늘</span>
            </div>
            <div id="event-list" class="event-list-wrapper">
                </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    // 1. 가상의 데이터 (현업에서는 DB 연동 데이터가 들어올 자리입니다)
    const scheduleData = [
        { title: '주간 업무 회의', start: '2026-01-26', content: '대회의실 1층, 주간 목표 보고' },
        { title: 'Gemini 프로젝트 개발', start: '2026-01-26', content: 'jQuery 달력 UI 연동 마무리' },
        { title: '클라이언트 미팅', start: '2026-01-27', content: '강남구 테헤란로 카페' },
        { title: '헬스장 PT', start: '2026-01-28', content: '저녁 8시, 등 운동' },
        { title: '정기 점검', start: '2026-01-30', content: '서버 보안 패치 업데이트' }
    ];

    const calendarEl = document.getElementById('calendar');

    // 2. FullCalendar 초기화
    const calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        locale: 'ko',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,dayGridWeek'
        },
        events: scheduleData,
        
        // 날짜 클릭 이벤트
        dateClick: function(info) {
            renderSchedules(info.dateStr);
        }
    });

    calendar.render();

    // 3. 일정을 화면에 그리는 함수
    function renderSchedules(dateStr) {
        // 헤더 날짜 업데이트
        $('#view-date').text(dateStr);
        
        const $listContainer = $('#event-list');
        $listContainer.empty();

        // 데이터 필터링 (선택한 날짜와 같은 일정만)
        const dailyEvents = scheduleData.filter(item => item.start === dateStr);

        if (dailyEvents.length > 0) {
            dailyEvents.forEach(ev => {
                const html = `
                    <div class="event-card">
                        <h5>${ev.title}</h5>
                        <p>${ev.content}</p>
                    </div>
                `;
                $listContainer.append(html);
            });
        } else {
            $listContainer.append('<div class="no-events">해당 날짜에 일정이 없습니다.</div>');
        }
    }

    // 4. 페이지 접속 시 오늘 날짜의 일정 기본 출력
    const todayStr = new Date().toISOString().split('T')[0];
    renderSchedules(todayStr);
});
</script>

</body>
</html>

 

 

업무 일정 관리 시스템.html
0.00MB

 

https://fullcalendar.io/

 

FullCalendar - JavaScript Event Calendar

Open Source... With over 10 years of open source and over 120 contributors, FullCalendar will always have a free and open source core. Learn more

fullcalendar.io

 

 

 

※ 해당 내용은 Google Gmini3.0에서 작성되었습니다.

'WEB > JQuery' 카테고리의 다른 글

fullcalendar 미니 일정 관리자  (1) 2026.01.26
JSON 연동 공지사항 상세보기 (HTML/JS)  (1) 2026.01.23
공지사항 등록/수정  (0) 2026.01.23
공지사항 상세보기 화면 (View)  (0) 2026.01.23
반응형 공지사항 게시판 목록 (JSON & 페이징 포함)  (0) 2026.01.23
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2026/02   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
글 보관함