Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- 화면정의서
- 톰캣
- 한글깨짐
- 피그마
- Servlet
- https://www.inflearn.com/course/lecture?courseslug=%ea%b9%80%ec%98%81%ed%95%9c%ec%9d%98-%ec%8b%a4%ec%a0%84-%ec%9e%90%eb%b0%94-%ea%b8%b0%eb%b3%b8%ed%8e%b8&unitid=194690
- webserver #WAS #ServerApp
- Forwarding
- GET방식
- 매핑 #
- Dispatcher
- Request
- WAS
- POST방식
- sendRedirect
- xml
- Break
- 요구사항정의서
- while문
- Spring MVC
- JSON형식의 response
- CONTINUE
- 다형성 #부모타입 #자식타입
- 김영한
Archives
- Today
- Total
Step it up now
calendar 구현하기 본문
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 |