반응형
Fullcalendar 라이브러리로 달력을 구현하고, ajax 통신을 통해서 달력에 데이터를 표시 해보겠습니다.
<!doctype html>
<html>
<head>
<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>
<style>
.fc h2 {
font-size: 25px;
font-weight:bold;
margin-right:10px;
}
.fc .fc-toolbar>*>* {
float: left;
margin-left: 0.75em;
display: -webkit-inline-box;
}
.fc-head {
background-color: bisque;
line-height: 50px;
font-size: 15px;
font-weight: bold;
}
.fc-content{font-size:18px; background-color:black;}
</style>
</head>
<body>
<div style="width:80%;"id="calendar"></div>
<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){
var events = [];
var tglCurrent = $('#calendar').fullCalendar('getDate');
$.ajax({
type: "POST",
dataType: "json",
url: "test.php",
cache: false,
async: false,
success: function(result) {
$.each(result.rows, function(index, item){
events.push({title:item.ContentId, start: new Date(item.start), end: new Date(item.start), Score:item.Score});
});
callback(events);
}
});
},
eventRender: function (event, element, icon) {
if(event.Score != '' && typeof event.Score !== "undefined"){
element.find(".fc-title").append("<br/><b>"+event.Score+"</b>");
}
},
windowResize: function (event, ui) {
$('#calendar').fullCalendar('render');
}
});
});
</script>
</body>
</html>fullcalendar 라이브러리를 선언해주시고, 달력의 영역을 지정 해 줍니다. (id = "calendar")
달력의 초기설정값을 세팅해주시고, 저는 데이터를 보여드리기 위해 css를 약간 수정하였습니다.
달력의 데이터는 event 함수를 호출하시는 부분을 참고하시면 됩니다.
ajax 통신을 통해서 데이터를 달력에 표시할 수 있습니다.
임시로 test.php 페이지에는 데이터를 넣어놨습니다. ajax 를 통해서 아래의 데이터를 가져오게 됩니다.
eventRender 함수를 통해서 데이터에 표시되는 달력을 가공할수도 있습니다.
아래는 test.php 소스 입니다. (입맛에 맞게 가공하시면 됩니다.)
{
"rows":[{
"Score":"85\uc810",
"EndDt":"2022-09-05",
"ContentId":"9월 5일 시험",
"start":"2022-09-05"
},{
"Score":"75\uc810",
"EndDt":"2022-09-01",
"ContentId":"9월 1일 시험",
"start":"2022-09-01"
}
]}
반응형
'개발이야기 > jQuery' 카테고리의 다른 글
| [jQuery] mouseover, mousemove, mouseout 마우스 이벤트 (0) | 2022.09.27 |
|---|---|
| [jQuery] html 화면 PDF 다운로드 (1) | 2022.09.26 |
| [jQuery] 테이블(table)행 추가/삭제 (0) | 2022.09.23 |
| [jQuery] 상하롤링, 위아래 롤링 (1) | 2022.09.21 |
| [jQuery] datetimepicker 사용방법 (날짜/시간선택) (0) | 2022.09.06 |
댓글