fullcalendar 라이브러리를 사용하여 달력을 만들게 되면 일정을 추가할 때마다
아래의 그림과 같이 하나의 박스가 생기고 그 안에 글자가 써지게 된다!
<소스코드>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prev,next',
center: 'title',
right: 'today'
},
initialDate: '2021-01-01'
, editable : true
, eventLimit : true
, events: [
{
title : 'libft 과제이해',
start: '2021-01-26',
backgroundColor: "rgb(0, 185, 186)",
textColor : "#000000"
},
{
title : 'libft 코딩',
start: '2021-01-27',
backgroundColor: "rgb(0, 185, 186)",
textColor : "#000000"
},
{
title : 'libft 평가',
start: '2021-01-29',
backgroundColor: "rgb(0, 185, 186)",
textColor : "#000000"
},
]
});
calendar.render();
});
여기서 달력에 일정을 하나만 넣는다는 가정하에,
1) 일정이 존재하면 그 배경색이 통째로 바뀌고
2) 그 안에 일정이 박스없이 생기도록
수정할 수 있고 그 결과는 아래의 그림과 같다.
<소스코드>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prev,next',
center: 'title',
right: 'today'
},
initialDate: '2021-01-01'
, editable : true
, eventLimit : true
, events: [
{
start: '2021-01-06',
overlap: false,
display: 'background',
backgroundColor: "#00b9ba"
},
{
title : 'libft 과제이해',
start: '2021-01-06',
backgroundColor: "rgba(0, 185, 186, 0)",
borderColor : "rgba(0, 185, 186, 0)",
textColor : "#000000"
},
//
{
start: '2021-01-07',
overlap: false,
display: 'background',
backgroundColor: "#00b9ba"
},
{
title : 'libft 코딩',
start: '2021-01-07',
backgroundColor: "rgba(0, 185, 186, 0)",
borderColor : "rgba(0, 185, 186, 0)",
textColor : "#000000"
},
//
{
start: '2021-01-09',
overlap: false,
display: 'background',
backgroundColor: "#00b9ba"
},
{
title : 'libft 코딩',
start: '2021-01-09',
backgroundColor: "rgba(0, 185, 186, 0)",
borderColor : "rgba(0, 185, 186, 0)",
textColor : "#000000"
},
//
{
start: '2021-01-10',
overlap: false,
display: 'background',
backgroundColor: "#00b9ba"
},
{
title : 'libft 평가',
start: '2021-01-10',
backgroundColor: "rgba(0, 185, 186, 0)",
borderColor : "rgba(0, 185, 186, 0)",
textColor : "#000000"
},
]
});
calendar.render();
});
반응형
'➰ Library > 기타' 카테고리의 다른 글
간단하게 leak 검사하기 (0) | 2021.06.02 |
---|---|
Fullcalendar에서 event 잘림 현상 해결하기 (0) | 2021.03.23 |
memleak(메모리 누수) 있는지 확인하기 (0) | 2021.01.17 |
HTML 태그에 대해 알아봅시다! (0) | 2020.09.09 |
HTML, CSS 웹개발 환경 만들기 (0) | 2020.09.09 |