fullCalendar 의 tooltip 및 좌측 시간별 width 조절하기
fullCalendar 의 tooltip 및 좌측 시간별 width 조절하기
fullCalendar 의 tooltip 을 활용하기
FullCalendar 의 코드 중에, eventRender 함수에서 이를 popper 라이브러리를 사용하면 tooltip 처럼 상세히 보여주는 기능을 제공합니다.
eventRender 은 이벤트가 렌더링되는 동안 트리거됩니다. 이는 DOM을 수정하기 위한 hook 입니다. 또한 Tooltip.js 와 같은 이벤트 요소에 다른 jQuery 플러그인을 연결하는데 좋은 방법이 될 수 있습니다.
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js'></script>
$('#calendar').fullCalendar({
defaultView: 'month',
defaultDate: '2023-02-12',
eventRender: function(eventObj, $el) {
$el.popover({
title: eventObj.title,
content: eventObj.description,
trigger: 'hover',
placement: 'top',
container: 'body'
});
},
전체소스
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title> Event tooltip with eventRender - Demos | FullCalendar </title>
<link href='/docs/dist/demo-to-codepen.css' rel='stylesheet' />
<link href='https://cdn.jsdelivr.net/npm/fullcalendar@3.10.5/dist/fullcalendar.min.css' rel='stylesheet' />
<link href='https://cdn.jsdelivr.net/npm/fullcalendar@3.10.5/dist/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='https://cdn.jsdelivr.net/npm/moment@2/min/moment.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@3.10.5/dist/fullcalendar.min.js'></script>
<script src='/docs/dist/demo-to-codepen.js'></script>
<style>
html,
body {
margin: 0;
padding: 0;
font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 40px auto;
}
</style>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css' rel='stylesheet' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js'></script>
<script>
$(function() {
$('#calendar').fullCalendar({
defaultView: 'month',
defaultDate: '2023-02-12',
eventRender: function(eventObj, $el) {
$el.popover({
title: eventObj.title,
content: eventObj.description,
trigger: 'hover',
placement: 'top',
container: 'body'
});
},
events: [{
title: 'All Day Event',
description: 'description for All Day Event',
start: '2023-02-01'
}, {
title: 'Long Event',
description: 'description for Long Event',
start: '2023-02-07',
end: '2023-02-10'
}, {
id: 999,
title: 'Repeating Event',
description: 'description for Repeating Event',
start: '2023-02-09T16:00:00'
}, {
id: 999,
title: 'Repeating Event',
description: 'description for Repeating Event',
start: '2023-02-16T16:00:00'
}, {
title: 'Conference',
description: 'description for Conference',
start: '2023-02-11',
end: '2023-02-13'
}, {
title: 'Meeting',
description: 'description for Meeting',
start: '2023-02-12T10:30:00',
end: '2023-02-12T12:30:00'
}, {
title: 'Lunch',
description: 'description for Lunch',
start: '2023-02-12T12:00:00'
}, {
title: 'Meeting',
description: 'description for Meeting',
start: '2023-02-12T14:30:00'
}, {
title: 'Birthday Party',
description: 'description for Birthday Party',
start: '2023-02-13T07:00:00'
}, {
title: 'Click for Google',
description: 'description for Click for Google',
url: 'http://google.com/',
start: '2023-02-28'
}]
});
});
</script>
<style>
#calendar a.fc-event {
color: #fff;
/* bootstrap default styles make it black. undo */
}
</style>
</head>
<body>
<div class='demo-topbar'>
<button data-codepen class='codepen-button'>Edit in CodePen</button> Event tooltip with eventRender and Boostrap popover
</div>
<div id='calendar'></div>
</body>
</html>
데모화면
https://fullcalendar.io/docs/v3/event-tooltip-demo
Event tooltip with eventRender - Demos | FullCalendar
Edit in CodePen Event tooltip with eventRender and Boostrap popover
fullcalendar.io
https://fullcalendar.io/docs/v3/eventRender
eventRender - Docs v3 | FullCalendar
Triggered while an event is being rendered. A hook for modifying its DOM. function( event, element, view ) { } event is the Event Object that is attempting to be rendered. element is a newly created jQuery element that will be used for rendering. It has al
fullcalendar.io
fullCalendar 의 좌측 시간별 사이즈 조절하기
일간 달력 형태로 볼 때 , 좌측 부분의 날짜 부분의 사이즈를 조절하고자 한다면 css 를 통해 가능합니다.
width 가 인라인으로 설정된 것으로 나타납니다. 아마도 이것은 fullCalendar의 일부 코드를 통해 수행됩니다.
<td> CSS에서 재정의할 수 있지만 클래스 조합이 동일한 모든 항목이 아니라 열의 다른 모든 항목 도 이동해야 합니다 .
<td class="fc-axis fc-time fc-widget-content" style="width: 55px;">
<span>12:35am</span>
</td>
다행스럽게도 그들은 모두 동일한 루트 클래스를 가지고 있습니다 .fc-axis. 따라서 이것을 CSS 끝에 추가하면 너비가 아주 잘 조정될 것입니다.
.fc-axis { width: 100px !important;}
https://stackoverflow.com/a/45730420
FullCalendar agendaWeek/agendaDay view, width of time row
I have a probleme of the setting of my calendar now. I want to make first row which is the time in AgendaWeek view and AgendaDay view a little wider, but i can't find the corresponding css code in
stackoverflow.com
'프로그래밍 > jQuery 👍' 카테고리의 다른 글
| jQuery Pagination Plugin: Good Paginator 추천 페이징 (4) | 2023.05.18 |
|---|---|
| fullCalendar 의 좌측 시분 hour minute 표기 hh:mm 형태로 변경하기 (0) | 2023.03.16 |
| jQuery : jQuery.countdown 카운트 다운 count down 라이브러리 (0) | 2022.10.21 |
| jQuery.qrcode 를 활용한 qr code 생성하기 (1) | 2021.09.14 |
| javascript 이메일 정규식 생성하기 email regex validation (7) | 2021.03.11 |