티스토리 뷰

WEB/JQuery

fullcalendar 미니 일정 관리자

silverline79 2026. 1. 26. 21:02

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <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>
    <style>
        /* 전체 컨테이너: 가로 300px 고정 */
        #mini-calendar-app {
            width: 300px;
            border: 1px solid #ddd;
            border-radius: 10px;
            overflow: hidden;
            background: #fff;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        }

        /* 1. 상단 달력 영역 */
        #calendar {
            padding: 10px;
            border-bottom: 1px solid #eee;
        }
        /* 달력 폰트 사이즈 축소 */
        .fc { font-size: 0.8rem; }
        .fc .fc-toolbar-title { font-size: 0.9rem !important; }
        .fc .fc-button { padding: 2px 5px !important; font-size: 0.7rem !important; }
        .fc-daygrid-day { height: 35px !important; cursor: pointer; }
        
        /* 일정이 있는 날짜 표시 (이벤트 점) */
        .fc-daygrid-event-dot {
            border-color: #0d6efd !important;
        }

        /* 2. 하단 일정 영역 */
        #schedule-list-area {
            padding: 15px;
            background: #fafafa;
            min-height: 150px;
            max-height: 250px;
            overflow-y: auto;
        }
        .selected-date-title {
            font-size: 0.85rem;
            font-weight: bold;
            color: #555;
            margin-bottom: 10px;
            display: block;
        }
        .event-item {
            background: #fff;
            border: 1px solid #e0e0e0;
            border-left: 3px solid #0d6efd;
            padding: 8px 10px;
            margin-bottom: 8px;
            border-radius: 4px;
        }
        .event-title {
            font-size: 0.85rem;
            font-weight: 600;
            display: block;
        }
        .no-data {
            text-align: center;
            color: #bbb;
            font-size: 0.8rem;
            margin-top: 30px;
        }
    </style>
</head>
<body>

<div id="mini-calendar-app">
    <div id="calendar"></div>

    <div id="schedule-list-area">
        <span class="selected-date-title" id="display-date">일정을 선택하세요</span>
        <div id="event-items-container">
            </div>
    </div>
</div>

<script>
$(document).ready(function() {
    // 샘플 데이터
    const myEvents = [
        { title: '오전 팀 미팅', start: '2026-01-26' },
        { title: '치과 예약', start: '2026-01-26' },
        { title: '보고서 제출', start: '2026-01-28' },
        { title: '친구 약속', start: '2026-01-30' }
    ];

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

    const calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        locale: 'ko',
        height: 'auto',
        headerToolbar: {
            left: 'prev',
            center: 'title',
            right: 'next'
        },
        events: myEvents,
        // 날짜 클릭 시 동작
        dateClick: function(info) {
            showSchedules(info.dateStr);
        }
    });

    calendar.render();

    // 일정 리스트 출력 함수
    function showSchedules(dateStr) {
        $('#display-date').text(dateStr + " 일정");
        const container = $('#event-items-container');
        container.empty();

        const filtered = myEvents.filter(e => e.start === dateStr);

        if (filtered.length > 0) {
            filtered.forEach(e => {
                container.append(`
                    <div class="event-item">
                        <span class="event-title">${e.title}</span>
                    </div>
                `);
            });
        } else {
            container.append('<div class="no-data">일정이 없습니다.</div>');
        }
    }

    // 실행 시 오늘 날짜 일정 바로 보여주기
    const today = new Date().toISOString().split('T')[0];
    showSchedules(today);
});
</script>

</body>
</html>

 

 

index.global.min.js
0.27MB
미니 일정 관리자.html
0.00MB

 

 

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

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

업무 일정 관리 시스템  (0) 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
글 보관함