➰ Library/기타

Fullcalendar 날짜 색 변경 & 일정 배경없이 넣기

 사과개발자 2021. 3. 23. 16:10

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();
});

 

반응형