Step it up now

calendar 구현하기 본문

수업/JavaScript, css, html

calendar 구현하기

케잉 2023. 11. 14. 18:02

full calendar  스크립트 형식 가져오기 

Initialize with Script Tags - Docs | FullCalendar

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>기본달력 테스트 - 실습</title> 
  <!-- CDN방식 링크 -->

  <script src='https://cdn.jsdelivr.net/npm/fullcalendar/index.global.min.js'></script>
  <script>

    document.addEventListener('DOMContentLoaded', function() {
      const calendarEl = document.querySelector('#calendar')
      //카렌더 객체 생성하기 및 생성자 호출 - 초기화 속성값 지정
      const calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        headerToolbar: {
          left: 'prev, next, today',
          center: 'title',
          right: 'dayGridMonth, timeGridWeek, listWeek'
        },
        //일정에 대한 데이터셋 가져오기
        events:[
          {
            title: '월간회의',
            start: '2023-11-01'
          },
          {
            title: 'other event',
            start: '2023-11-01',
            end: '2023-11-04'
          },
          {
            title: '휴가일정',
            start: '2023-11-07',
            end: '2023-11-15'
          },
          {
            groupId: 999,
            title: '업체회의',
            start: '2023-11-17T15:00:00',
          },
          {
            groupId: 999,
            title: '기획회의',
            start: '2023-11-17T17:00:00',
          }
        ]


      })
      calendar.render()//위에서 초기화된 정보로 달력을 그려줘
    })

  </script>

</head>
<body>
  <div id="calendar"></div>
</body>
</html>

 

 

모듈을 이용해서 처리하기 위해 

npm install fullcalendar 명령어로 설치

로컬 안에 설치가 된다 (공유 안된다)

업데이트 됐을 때도 npm install 명령어만 입력하면 쉽게 업데이트 가능 

소스 url 가져와서 내 안에서 이용하기 위해 인스턴스화 하는 개념이다 

 

 

 

환경설정

:npm init -y  => package.json 생성된다

:npm run start 

저작자표시

'수업 > JavaScript, css, html' 카테고리의 다른 글

유튜브 영상  (0) 2023.11.13
원시형 / boolean  (0) 2023.11.12
Firebase  (0) 2023.11.08
[CSS] Position- relative /absolute 3  (0) 2023.11.01
[CSS] Position- relative /absolute 2  (0) 2023.10.31
'수업/JavaScript, css, html' Related Articles more