[Calenda]

# fullcalendar 

- 기본 사용방법

<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.19/index.global.min.js'></script>
<div id='calendar'></div>
<script>

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    locale: 'ko',                                     // 언어를 한국어로 설정
    headerToolbar: {
      start: 'dayGridMonth,timeGridWeek,dayGridDay', // headerToolbar에 버튼 추가
      center: 'title',
      end: 'today prev,next'                         // 스페이스-버튼간격띄움 ,-붙여서 생성
    },
    buttonText: {
      today: '오늘', // '오늘' 버튼 이름 변경
      month: '월별',
      week: '주간',
      day: '일간'
    },
    /* 일정등록 */
    selectable: true, // 드래그하여 날짜를 선택할 수 있도록 설정
    select: function(arg) {
      var title = prompt('일정 제목을 입력하세요:');
      if (title) {
        calendar.addEvent({
          title: title,
          start: arg.start,
          end: arg.end,
          allDay: arg.allDay
        });
        // DB에 저장하는 로직 추가
        // 예: axios.post('/api/schedules', { title: title, start: arg.start, end: arg.end });
      }
      calendar.unselect(); // 선택된 영역 해제
    },
    /* 일정보기 */
    eventClick: function(arg) {
      // arg.event는 클릭된 이벤트 객체입니다.
      var event = arg.event;
      var title = event.title;
      var start = event.start;
      var end = event.end;
      var description = event.extendedProps.description || '상세 내용 없음';  // 커스텀속성

      // 사용자에게 보여줄 메시지 구성
      var PlanMessage = `
        제목: ${title}\n
        시작: ${start ? start.toLocaleString() : '날짜 미정'}\n
        종료: ${end ? end.toLocaleString() : '미정'}\n
        설명: ${description}      
      `;
      alert(PlanMessage);
    },
    events: [
      {
        title: '회의',
        start: '2025-09-15T10:00:00',
        end: '2025-09-15T12:00:00',
        message: '다음 분기 목표에 대해 논의합니다.' // 커스텀속성
      },
      {
        title: '프로젝트 마감',
        start: '2025-09-20',
        message: '다음 분기 목표에 대해 논의합니다.' 
      },
      {
        title: '점심 약속',
        start: '2025-09-22T13:00:00',
        message: '다음 분기 목표에 대해 논의합니다.' 
      }
    ]
  });
  calendar.render();
});

</script>

 

 

---

# 상단 옵션 

	기본 상단 옵션
initialView: 'dayGridMonth',

 

	start 앞쪽, center 중간, end 우측
headerToolbar: {   start: 'dayGridMonth,timeGridWeek,dayGridDay', // headerToolbar에 버튼 추가   center: 'title',   end: 'today prev,next'                                             // 스페이스-버튼간격띄움 ,-붙여서 생성 }, locale: 'ko',                                     // 언어를 한국어로 설정 buttonText: {                                   // 버튼 이름 변경   today: '오늘',    month: '월별',   week: '주간',   day: '일간' },

 

 

---

# 입력 옵션 

	드래그해서선택후, 일정 등록
selectable: true, // 드래그하여 날짜를 선택할 수 있도록 설정 select: function(arg) {   var title = prompt('일정 제목을 입력하세요:');   if (title) {     calendar.addEvent({       title: title,       start: arg.start,       end: arg.end,       allDay: arg.allDay     });     // DB에 저장하는 로직 추가     // 예: axios.post('/api/schedules', { title: title, start: arg.start, end: arg.end });   }   calendar.unselect(); // 선택된 영역 해제 },

 

---

# 상세보기 옵션 

켈린더에서 일정 클릭 이벤트

eventClick: function(arg) {   // arg.event는 클릭된 이벤트 객체입니다.   var event = arg.event;   var title = event.title;   var start = event.start;   var end = event.end;   var description = event.extendedProps.description || '상세 내용 없음';    // 커스텀 속성     // 사용자에게 보여줄 메시지 구성   var PlanMessage = `     제목: ${title}\n     시작: ${start ? start.toLocaleString() : '날짜 미정'}\n     종료: ${end ? end.toLocaleString() : '미정'}\n     설명: ${description}   `;   alert(PlanMessage); },

 

 

 

 

 

 

 

 

# Big Calendar