[Fullcalendar]풀캘린더 플러그인에서 툴팁 사용하기.(버전 4, 5 두 가지)
안녕하세요! 헤이즈입니다.
회사에서 최근까지 사용하던 버전은 v4였습니다.
해당 버전에서 툴팁이 필요하여 해당 홈페이지의 Docs를 참고 하였는데요.
최신 버전인 v5도 작년에 정식 출시가 되었더라구요.
대부분은 최신 버전을 사용하시겠지만,
간혹 저희 회사 처럼 사용빈도가 낮아 구버전을 쓰고 계신분들이 있을 수도 있다는 생각에
v4, v5 두가지 툴팁 설정 방법을 기록용으로 포스팅합니다.
v4(구버전)에서 툴팁 사용하기
01기본설정
- v4에서는 npm/yarn, download, cdn 3가지 설치 방법을 제공합니다. 설치는 이미 마치셨다는 가정하에 시작하겠습니다. 설치 다음 단계는 초기화입니다. 풀캘린더에서 안내하는 기본 초기화 코드는 아래와 같습니다.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<link href='fullcalendar/core/main.css' rel='stylesheet' />
<link href='fullcalendar/daygrid/main.css' rel='stylesheet' />
<script src='fullcalendar/core/main.js'></script>
<script src='fullcalendar/daygrid/main.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid' ]
});
calendar.render();
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
풀캘린더는 기능을 플러그인 단위로 나누어 제공합니다. 필요한 기능만 골라서 사용한다는 장점이 있으나, 해당 기능 css/js도 나뉘어 있어 3개의 기능이 필요하면, 각각의 파일을 불러와야합니다. 그리고, 스크립트 내에서 플러그인에 아무것도 호출하지 않으면, 기능하지 않습니다. dayGrid/timeGrid 등을 지정해야합니다.
02툴팁 옵션 추가
- 툴팁 옵션을 추가하기 이전, 툴팁 구현을 위해 필요한 js 파일이 있습니다. "Popper.js", "Tootip.js" 입니다. 이 파일은다른 플러그인 소스입니다. v4 Docs에선 파일을 제공하는 대신, 해당 플러그인 사이트 링크로 안내 합니다.
허나, 연결된 페이지 내용은 이미 사라져 빈 페이지가 나옵니다.
현재 1.x 버전은 홈페이지 내에선 npm으로 받는 방법만 안내되고 있습니다. cdn이나 파일로 다운받아 사용하시길
원하신다면, 풀캘린더 tooltip 데모 페이지에서 개발자 도구로 head에 추가된 cdn을 복사하거나 cdn을 새 페이지로 열어 소스를 긁어서 사용할 수는 있습니다만, 후자의 방법으로 하기 보다는, npm을 통해 받거나 또는 최신 버전을 사용하시길 추천합니다.
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.4.2/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.4.2/main.min.js"></script>
<script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tooltip.js/dist/umd/tooltip.min.js"></script>
<script>
//fullcalendar
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'resourceTimeline' ],
locale: 'ko',
header: {
left: '',
center: 'title',
right: ''
},
height: 650,
defaultDate: '2020-05-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: '[영업부] 2020년 하반기 영업실적',
description: '2020년 하반기 영업실적 안내입니다.',
start: '2020-05-01T14:00:00',
},
//tooltip
eventRender: function(info) {
var tooltip = new Tooltip(info.el, {
title: info.event.extendedProps.description,//이벤트 디스크립션을 툴팁으로 가져옵니다.
// title: info.event.title, 이벤트 타이틀을 툴팁으로 가져옵니다.
placement: 'top',
trigger: 'hover',
container: 'body'
});
}
});
calendar.render();
});
</script>
v4 버전의 툴팁 스타일은 따로 CSS 파일이 없습니다. 그래서 fullcalendar 측에서 예제를 작성하며 추가한 스타일을 아래에 추가하였습니다. 아래 스타일을 변형해서 사용하세요.
/*
i wish this required CSS was better documented :(
https://github.com/FezVrasta/popper.js/issues/674
derived from this CSS on this page: https://popper.js.org/tooltip-examples.html
*/
.popper,
.tooltip {
position: absolute;
z-index: 9999;
background: #FFC107;
color: black;
width: 150px;
border-radius: 3px;
box-shadow: 0 0 2px rgba(0,0,0,0.5);
padding: 10px;
text-align: center;
}
.style5 .tooltip {
background: #1E252B;
color: #FFFFFF;
max-width: 200px;
width: auto;
font-size: .8rem;
padding: .5em 1em;
}
.popper .popper__arrow,
.tooltip .tooltip-arrow {
width: 0;
height: 0;
border-style: solid;
position: absolute;
margin: 5px;
}
.tooltip .tooltip-arrow,
.popper .popper__arrow {
border-color: #FFC107;
}
.style5 .tooltip .tooltip-arrow {
border-color: #1E252B;
}
.popper[x-placement^="top"],
.tooltip[x-placement^="top"] {
margin-bottom: 5px;
}
.popper[x-placement^="top"] .popper__arrow,
.tooltip[x-placement^="top"] .tooltip-arrow {
border-width: 5px 5px 0 5px;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
bottom: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
.popper[x-placement^="bottom"],
.tooltip[x-placement^="bottom"] {
margin-top: 5px;
}
.tooltip[x-placement^="bottom"] .tooltip-arrow,
.popper[x-placement^="bottom"] .popper__arrow {
border-width: 0 5px 5px 5px;
border-left-color: transparent;
border-right-color: transparent;
border-top-color: transparent;
top: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
.tooltip[x-placement^="right"],
.popper[x-placement^="right"] {
margin-left: 5px;
}
.popper[x-placement^="right"] .popper__arrow,
.tooltip[x-placement^="right"] .tooltip-arrow {
border-width: 5px 5px 5px 0;
border-left-color: transparent;
border-top-color: transparent;
border-bottom-color: transparent;
left: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
.popper[x-placement^="left"],
.tooltip[x-placement^="left"] {
margin-right: 5px;
}
.popper[x-placement^="left"] .popper__arrow,
.tooltip[x-placement^="left"] .tooltip-arrow {
border-width: 5px 0 5px 5px;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
right: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
- 여기까지 따라 오셨다면 v4 버전에서 툴팁을 잘 띄우셨으리라 생각합니다. 고생하셨습니다.
v4 fullcalendar demo site
fullcalendar.io/docs/v4/event-tooltip-demo
Event tooltip with eventRender - Demos | FullCalendar
Edit in CodePen Event tooltip with eventRender and Tooltip.js
fullcalendar.io
v5(최신버전)에서 툴팁 사용하기.
01기본설정
- v5에서도 npm/yarn, download, cdn 3가지 설치 방법을 제공합니다. 설치는 이미 마치셨다는 가정하에 시작하겠습니다. 설치 다음 단계는 초기화입니다. 풀캘린더에서 안내하는 기본 초기화 코드는 아래와 같습니다.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<link href='fullcalendar/main.css' rel='stylesheet' />
<script src='fullcalendar/main.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth'
});
calendar.render();
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
v5에서도 기능을 플러그인 단위로 제공하지만, css/js 파일을 일일히 로드할 필요가 없습니다. main.css/.js에 모든 패키지를 포함합니다. 스크립트 내에서 플러그인을 선언하지 않으면, 기본적으로 "dayGridMonth" 로 표현됩니다.
02툴팁설정
- v5에서도 툴팁을 구현하기 위해 2가지 파일이 필요합니다. v5에선 Docs에 툴팁에 관한 안내가 제대로 없어서 좀 헤맸습니다. 2.x 대 버전의 "popper.js"와 "tooltip.js" 새 버전(?)인 "tippy.js" 두개의 파일이 필요합니다.
풀캘린더 내에서 지정하는 방법은 아래 코드를 참고해주세요.
<script src="js/main.js"></script>
<script src="js/locales-all.min.js"></script>
<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.js"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<script>
//fullcalendar
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
initialDate: '2021-02-12',
locale: 'ko',
headerToolbar: {
left: '',
center: 'title',
right: 'prev,next today'
},
height: 650,
editable: true,
dayMaxEventRows:true,
eventDidMount: function(info) {
tippy(info.el, {
content: info.event.extendedProps.description,//이벤트 디스크립션을 툴팁으로 가져옵니다.
});
},
events: [
{
title: '[영업부] 2020년 하반기 영업실적',
description: '2020년 하반기 영업실적 안내입니다.',
start: '2021-02-01',
},
],
});
calendar.render();
});
</script>
v5에선 함수명들이 많이 바뀌었습니다. 이점 주의하여 사용하는 버전의 맞는 함수명을 사용해주시기 바랍니다.
tippy.js를 사용하면 기본 툴팁 스타일이 지정되어 있어 v4에서 처럼 기본 스타일을 지정할 필요는 없습니다.
- 풀캘린더는 이슈사항에 대한 피드백이 빠르고, 버전 업그레이드도 활발한편인 것 같습니다. 사용하시면서 생기는 이슈사항은 fullcalendar 깃허브를 참조하시면 좋을 것 같아 아래 링크 올려드립니다.
github.com/fullcalendar/fullcalendar/issues
fullcalendar/fullcalendar
Full-sized drag & drop event calendar. Contribute to fullcalendar/fullcalendar development by creating an account on GitHub.
github.com
* v5 툴팁 데모 페이지는 존재하나, "popper.js", "tippy.js" 파일이 아닌 구버전 파일을 사용한 예제라서 링크는 생략하겠습니다.