<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset='utf-8' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.9/index.global.min.js"></script>
<!-- <script src="js/index.global.min.js"></script> -->
<!-- Core CSS -->
<link rel="stylesheet" th:href="@{/assets/vendor/css/core.css}" />
<link rel="stylesheet" th:href="@{/assets/vendor/css/theme-default.css}" />
<script>
var calendar = null;
$(document).ready(function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar : {
start : 'today',
center : 'title',
end:'prev,next',
},
footerToolbar: {
start: 'dayGridMonth,dayGridWeek,dayGridDay',
center: '',
end: ''
},
/* customButtons: {
addEventButton: {
text: '일정 추가',
click: function() {
$("#backDropModal").modal("show"); // modal 나타내기
$("#addEvent").on("click", function(){
$.ajax({
url: "/schedule"
})
const content = $("#event_content").val();
const start_date = $("#event_start_date").val();
const end_date = $("#event_end_date").val();
const color = $("#event_color").val();
if (content == null || content == ""){
alert("내용을 입력하세요.");
} else if(start_date == "" || end_date ==""){
alert("날짜를 입력하세요.");
} else if(new Date(end_date)- new Date(start_date) < 0){ // date 타입으로 변경 후 확인
alert("종료일이 시작일보다 먼저입니다.");
} else if(color == null || color == ""){
alert("색상을 선택해주세요.");
} else {
let obj = {
"content": content,
"startDate": start_date,
"endDate": end_date,
"color": color
}
}
});
}
}
}, */
navLinks : true, // can click day/week names to navigate views
editable : true,
dayMaxEvents : true, // allow "more" link when too many events
selectable : true, // 마우스로 선택한 날짜 클릭 시 색상 변환
locale : 'ko', // 한국어 적용
selectMirror : true,
height: 30,
contentHeight : 'auto', // 일정개수에 맞게 달력 크기 조절
eventAdd : function() {// 이벤트가 추가되면 발생하는 이벤트
console.log()
},
// eventChange: function (obj) { // 이벤트가 수정되면 발생하는 이벤트
// allEvent = calendar.getEvents();
// console.log(allEvent);
// },
// eventRemove: function (obj) { // 이벤트가 삭제되면 발생하는 이벤트
// console.log(obj);
// },
events : [],
select: function(event){
console.log(event);
$("#backDropModal").modal("show"); // modal 나타내기
$("#addEvent").on("click", function(){
/* $.ajax({
url: "/schedule"
}) */
const allDay = event.allDay;
const content = $("#event_content").val();
const start_date = event.startStr;
const end_date = event.endStr;
const color = $("#event_color").val();
console.log(content);
if (content == null || content == ""){
alert("내용을 입력하세요.");
} else if(start_date == "" || end_date ==""){
alert("날짜를 입력하세요.");
} else if(new Date(end_date)- new Date(start_date) < 0){ // date 타입으로 변경 후 확인
alert("종료일이 시작일보다 먼저입니다.");
} else if(color == null || color == ""){
alert("색상을 선택해주세요.");
} else {
console.log(start_date);
$("event_start_date").val(start_date);
calendar.addEvent({
title: content,
start: start_date,
end: end_date,
allDay: allDay,
color: color,
})
}
});
},
/* dateClick : function(info) {
console.log("Clicked event occurs : date = " + info.dateStr);
addEventToCalendar({
start : info.dateStr
})
} */
});
calendar.render();
});
// 이벤트 추가
function addEventToCalendar(event) {
console.log(event);
calendar.addEvent(event)
}
</script>
</head>
<body>
<div id="calender-container">
<div id='calendar'></div>
</div>
<!-- Modal -->
<div class="modal fade" id="backDropModal" data-bs-backdrop="static" tabindex="-1">
<div class="modal-dialog">
<form class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="backDropModalTitle">일정 추가</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col mb-3">
<label for="nameBackdrop" class="form-label" id="event_content">일정 <span class="text-danger">*</span></label>
<input type="text" id="nameBackdrop" class="form-control" placeholder="일정 입력해주세요.">
</div>
<div class="row">
<div class="col mb-0">
<label for="dobBackdrop" class="form-label" id="event_start_date">시작일 <span class="text-danger">*</span></label>
<input type="date" id="dobBackdrop" class="form-control">
</div>
<div class="col mb-0">
<label for="dobBackdrop" class="form-label" id="event_end_date">마감일 - <small class="text-muted">선택사항</small></label>
<input type="date" id="dobBackdrop" class="form-control">
</div>
</div>
<div class="row">
<div class="col mb-3">
<label for="nameBackdrop" class="form-label" id="event_color">색상 </label>
<input type="color" id="nameBackdrop" class="form-control" value="#3788d8">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="addEvent">추가</button>
</div>
</form>
</div>
</div>
<script th:src="@{/assets/vendor/js/bootstrap.js}"></script>
</body>
</html>
