티스토리 뷰

WEB/JavaScript

카테고리 기능이 추가된 달력 스크립트 (년/월 이동 + 오늘 일정 자동 표시)

silverline79 2026. 3. 3. 22:19

카테고리 기능이 추가된 통합 코드.html
0.01MB

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>카테고리별 일정 관리 달력</title>
    <style>
        :root { --primary: #4a90e2; --today-bg: #fff9c4; }
        body { font-family: sans-serif; display: flex; justify-content: center; padding: 20px; background: #f5f5f5; }
        .calendar-container { width: 450px; background: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
        .calendar-header { display: flex; justify-content: space-between; margin-bottom: 20px; }
        .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; text-align: center; }
        .day { aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 8px; position: relative; }
        .day:hover { background: #eee; }
        .day.today { background: var(--today-bg); font-weight: bold; }
        .has-event::after { content: ''; position: absolute; bottom: 5px; width: 5px; height: 5px; background: red; border-radius: 50%; }
        
        /* 카테고리 태그 스타일 */
        .event-section { margin-top: 20px; border-top: 1px solid #ddd; padding-top: 15px; }
        .event-item { display: flex; align-items: center; margin-bottom: 8px; font-size: 14px; }
        .badge { 
            padding: 2px 8px; 
            border-radius: 4px; 
            color: white; 
            font-size: 11px; 
            font-weight: bold; 
            margin-right: 8px;
            white-space: nowrap;
        }
        .bg-category1 { background-color: #ff9800; } /* 전제 */
        .bg-category2 { background-color: #4caf50; } /* 지역 */
        .no-event { color: #999; }
    </style>
</head>
<body>

<div class="calendar-container">
    <div class="calendar-header">
        <div>
            <button id="prevMonth">&lt;</button>
            <select id="yearSelect"></select>
            <select id="monthSelect"></select>
            <button id="nextMonth">&gt;</button>
        </div>
        <button onclick="goToToday()">오늘</button>
    </div>
    
    <div class="calendar-grid" id="calendarGrid"></div>
    
    <div class="event-section">
        <h3 id="selectedDateTitle"></h3>
        <ul id="eventList" style="list-style: none; padding: 0;"></ul>
    </div>
</div>

<script>
    // 1. 데이터 구조 변경: 문자열 대신 객체를 사용합니다.
    const scheduleData = {
        "2026-03-03": [
            { category: "전제", content: "프로젝트 통합 기획안 검토" },
            { category: "지역", content: "광주지사 현장 방문" }
        ],
        "2026-03-05": [
            { category: "전제", content: "정기 주간 회의" }
        ],
        "2026-03-10": [
            { category: "지역", content: "부산 파트너사 미팅" }
        ]
    };

    let viewDate = new Date();
    const yearSelect = document.getElementById('yearSelect');
    const monthSelect = document.getElementById('monthSelect');
    const grid = document.getElementById('calendarGrid');

    function init() {
        const curYear = new Date().getFullYear();
        for (let i = curYear - 5; i <= curYear + 5; i++) {
            const opt = document.createElement('option');
            opt.value = i; opt.innerText = i + "년";
            yearSelect.appendChild(opt);
        }
        for (let i = 0; i < 12; i++) {
            const opt = document.createElement('option');
            opt.value = i; opt.innerText = (i + 1) + "월";
            monthSelect.appendChild(opt);
        }
        renderCalendar();
        showEvents(formatDate(new Date()));
    }

    function formatDate(date) {
        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
    }

    function renderCalendar() {
        const year = viewDate.getFullYear();
        const month = viewDate.getMonth();
        yearSelect.value = year;
        monthSelect.value = month;
        grid.innerHTML = '';

        const firstDay = new Date(year, month, 1).getDay();
        const lastDate = new Date(year, month + 1, 0).getDate();
        const todayStr = formatDate(new Date());

        for (let i = 0; i < firstDay; i++) grid.innerHTML += `<div></div>`;

        for (let d = 1; d <= lastDate; d++) {
            const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
            const dayDiv = document.createElement('div');
            dayDiv.className = 'day';
            if (dateStr === todayStr) dayDiv.classList.add('today');
            if (scheduleData[dateStr]) dayDiv.classList.add('has-event');
            dayDiv.innerText = d;
            dayDiv.onclick = () => showEvents(dateStr);
            grid.appendChild(dayDiv);
        }
    }

    // 2. 일정 출력 로직 수정 (카테고리별 뱃지 추가)
    function showEvents(dateStr) {
        document.getElementById('selectedDateTitle').innerText = dateStr;
        const listEl = document.getElementById('eventList');
        const events = scheduleData[dateStr] || [];
        
        if (events.length > 0) {
            listEl.innerHTML = events.map(ev => {
                // 카테고리에 따른 색상 클래스 지정
                const badgeClass = (ev.category === '전제') ? 'bg-category1' : 'bg-category2';
                return `
                    <li class="event-item">
                        <span class="badge ${badgeClass}">${ev.category}</span>
                        <span class="content">${ev.content}</span>
                    </li>
                `;
            }).join('');
        } else {
            listEl.innerHTML = `<li class="no-event">일정이 없습니다.</li>`;
        }
    }

    function goToToday() { viewDate = new Date(); renderCalendar(); showEvents(formatDate(viewDate)); }
    yearSelect.onchange = () => { viewDate.setFullYear(yearSelect.value); renderCalendar(); };
    monthSelect.onchange = () => { viewDate.setMonth(monthSelect.value); renderCalendar(); };
    document.getElementById('prevMonth').onclick = () => { viewDate.setMonth(viewDate.getMonth() - 1); renderCalendar(); };
    document.getElementById('nextMonth').onclick = () => { viewDate.setMonth(viewDate.getMonth() + 1); renderCalendar(); };

    init();
</script>
</body>
</html>

 

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

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

결재선 지정 선택 팝업  (0) 2026.03.05
6주 카테고리 달력  (0) 2026.03.04
통합 달력 스크립트 (년/월 이동 + 오늘 일정 자동 표시)  (0) 2026.03.03
실시간 검색 필터링  (0) 2026.01.14
[JavaScript]슬라이드 이미지  (0) 2026.01.03
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2026/03   »
일 월 화 수 목 금 토
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
29 30 31
글 보관함