[javaScript] fullcalendar 사용하여 달력 그리기

js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>

css

<style>
	.fc-day-grid-container {
	    overflow: hidden !important; /* 오버플로우를 제거합니다. */
	}
	
	.fc-center button {
	    display: inline-block;
	    vertical-align: middle;
	    margin: 0 5px; /* 좌우 여백 추가 */
	    background-color: #717171; /* 배경색 변경 */
	    color: #fff; /* 폰트 컬러 변경 */
	    border: none; /* 테두리 제거 */
	    border-radius: 5px; /* 모서리를 둥글게 만듭니다. */
	    padding: 8px 15px; /* 내부 여백 설정 */
	    font-size: 14px; /* 폰트 크기 조정 */
	}
	
	.fc-day-header, .fc-day-number {
	    font-size: 16px; /* 폰트 크기를 동일하게 조정합니다. */
	    text-align: center; /* 가운데 정렬합니다. */
	    line-height: 30px; /* 높이를 조절합니다. */
	}
	
	.fc-center h2 {
	    display: inline-block;
	    vertical-align: middle;
	    margin: 0 10px; /* 좌우 여백 추가 */
	    font-size: 20px; /* 폰트 사이즈 조정 */
	    font-weight: bold;
	    color: #333; /* 폰트 컬러 변경 */
	}
	
	.fc .fc-toolbar>* { 
	    display: inline-block; /* 버튼을 일자로 만듭니다. */
	    margin-left: 10px;
	    margin-right: 10px;
	}
	
	.fc-head { 
	    background-color: #f0f0f0;
	    line-height: 50px;
	    font-size: 18px;
	    font-weight: bold;
	}
	
	.fc .fc-title {
	    font-size: 20px;
	    font-weight: bold;
	    color: #333;
	}
	
	.fc .fc-title b {
	    font-weight: normal;
	    color: #ff5733;
	}
	
	.fc-content {
	    font-size: 16px;
	    background-color: #f8f9fa;
	    border: 1px solid #ccc;
	    border-radius: 5px;
	    padding: 5px 10px;
	}

</style>

 

AJAX로 data 가져와서 테스트 할 경우

<script type="text/javascript">
$(function() {

	var hdr = {
		left: '',
		center: 'prev, title,next',
		right: '',
	};

	$('#calendar').fullCalendar({
		height: 650,
		header: hdr,
		defaultView: 'month',
		editable: false,
		droppable: false, 
		displayEventTime: false,
		dayClick: function(date, allDay) {
		},
		eventClick: function(info) {
		},
		select: function (start, end, allDay) {
		},
		events: function(start, end, timezone, callback) {
			$.ajax({
				type: "GET", // 또는 "POST"
				url: "url", 
				dataType: "json",
				success: function(response) {
					var events = [];
					$.each(response.rows, function(index, item) {
						events.push({title: item.ContentId, start: new Date(item.start), end: new Date(item.EndDt), Memo: item.Memo});
					});
					callback(events);
				},
				error: function(xhr, status, error) {
					console.error("AJAX 요청 중 오류 발생:", status, error);
				}
			});
		},
		eventRender: function (event, element, icon) {
			if (event.Memo != '' && typeof event.Memo !== "undefined") {
				element.find(".fc-title").append("<br/><b>" + event.Memo + "</b>");
			}
		},
		windowResize: function (event, ui) {
			$('#calendar').fullCalendar('render');
		}
	});
});

 

임의 데이터 넣어 테스트 할 경우 

$(function() {

	var hdr = {
		left: '',
		center: 'prev, title,next',
		right: '',
	};

	$('#calendar').fullCalendar({
		height: 650,
		header: hdr,
		defaultView: 'month',
		editable: false,
		droppable: false, 
		displayEventTime: false,
		dayClick: function(date, allDay) {
	},
	eventClick: function(info) {},
	select: function (start, end, allDay) {},
	events: function(start, end, timezone, callback){
		var events = [];
		var tglCurrent = $('#calendar').fullCalendar('getDate');
		
		// ajax로 변경가능 
		var result = {
		  "rows": [{
		      "Memo": "❤",
		      "start": "2024-05-06",
		      "EndDt": "2024-05-06",
		      "ContentId": "day off"
		    },
		    {
		      "Memo": "＞______________＜",
		      "start": "2024-05-15",
		      "EndDt": "2024-05-17",
		      "ContentId": "happy holiday"
		    }
			    
		  ]
		};

		$.each(result.rows, function(index, item){
			events.push({title:item.ContentId, start: new Date(item.start), end: new Date(item.EndDt), Memo:item.Memo});
		});
		callback(events);
	},
	eventRender: function (event, element, icon) {
		if(event.Memo != '' && typeof event.Memo  !== "undefined"){
			element.find(".fc-title").append("<br/><b>"+event.Memo+"</b>");
		}
	},
	windowResize: function (event, ui) {
		$('#calendar').fullCalendar('render');
	}
	});
});
</script>