wiki:bootstrap:fullcalendar
목차
FullCalendar
- description : FullCalendar 관련 내용 기술
- author : slaptear
- email : sgjang@repia.com
- lastupdate : 2023-03-02
적용 방법
- FullCalendar css, script 추가
- 본인은 bootstrap package에 fullcalendar가 존재하여 아래와 같이 설정함
<!-- fullCalendar --> <link rel="stylesheet" href="<c:url value="/resource/bootstrapSource/plugins/fullcalendar/main.min.css"/>"> <link rel="stylesheet" href="<c:url value="/resource/bootstrapSource/plugins/fullcalendar-daygrid/main.min.css"/>"> <link rel="stylesheet" href="<c:url value="/resource/bootstrapSource/plugins/fullcalendar-timegrid/main.min.css"/>"> <link rel="stylesheet" href="<c:url value="/resource/bootstrapSource/plugins/fullcalendar-bootstrap/main.min.css"/>"> <!-- fullCalendar 2.2.5 --> <script src="<c:url value="/resource/bootstrapSource/plugins/moment/moment.min.js"/>"></script> <script src="<c:url value="/resource/bootstrapSource/plugins/fullcalendar/main.min.js"/>"></script> <script src="<c:url value="/resource/bootstrapSource/plugins/fullcalendar-daygrid/main.min.js"/>"></script> <script src="<c:url value="/resource/bootstrapSource/plugins/fullcalendar-timegrid/main.min.js"/>"></script> <script src="<c:url value="/resource/bootstrapSource/plugins/fullcalendar-interaction/main.min.js"/>"></script> <script src="<c:url value="/resource/bootstrapSource/plugins/fullcalendar-bootstrap/main.min.js"/>"></script> <script src="<c:url value="/resource/bootstrapSource/plugins/fullcalendar/locales/ko.js"/>"></script>
- calendar load
<script>
let Calendar = FullCalendar.Calendar;
let calendarEl = document.getElementById('calendar');
let calendar = new Calendar(calendarEl, {
//아래 FullCalendar와 toolbar 활용 예시 참고
}
calendar.render();
</script>
- 위와 같이 설정한 후에 달력을 표시할 div 생성
<body> <div id="calendar"></div> </body>
Tip
FullCalendar와 toolbar 활용 예시
<script>
$(document).ready(function(){
let Calendar = FullCalendar.Calendar;
let calendarEl = document.getElementById('calendar');
let calendar = new Calendar(calendarEl, {
plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'timeGrid' ]
, header:
{ // 헤더부분 버튼과 제목
left : 'prev,next today', // FullCalendar에서 제공하는 부분(공식문서 참고)
center: 'title', // FullCalendar에서 제공하는 부분(공식문서 참고)
right : 'custom1' // 버튼 커스텀한 후에 배치
}
, 'themeSystem': 'bootstrap'
, events: function(info, successCallback, failureCallback){
// 달력의 이벤트 표시 함수
// ajax 활용하여 DB에 있는 정보 가지고 옴
$.ajax({
url : url부분 // RestController와의 연결고리
, cache: false
, type : 'GET'
, success : function(data)
{
//필요한 부분 변수 선언
// 총 일수 구하는 변수
// events 배열(중요)
let events = [];
// for문 돌려서 events 배열에 삽입
for(let i = 0; i < 리스트.length; i++){
// 종료일 포함하기 위해 +1 => events의 end 날짜는 종료일을 포함하지 않고 달력에 나오기 때문에 + 1함
예시) endDate = endDate.setDate(endDate.getDate() + 1);
// 값 입력한 후에 배열에 넣기
예시) events.push({
id: rsvtNo
// 아래부분들은 fullcalendar events에 필요한 key와 value들
, title: (달력에 표시될 부분) // title = 이름 + (총 일수) 달력에 표시될 title
, start: startDate
, end: endDate // 종료일이 포함하지 않고 표시되어 날짜를 하루 더하여 넣음
, backgroundColor: "yellow"
, borderColor: "yellow"
, allDay: true //false 하게 되면 title 부분 맨 앞에 '12a' 문자가 들어감 / 하루종일 여부
// 그 이외의 것들은 info.event._def.extendedProps 안의 배열로 들어감. ***.
, rsvtNm: rsvtNm, ...
});
}
// 성공시 events Callback
successCallback(events);
}
, error : function ()
{
alert('일정 불러오기 서버요청실패');
}
, complete : function ()
{
windowStatus = "ready";
}
});
}
, expandRows: true // 화면에 맞게 높이 재설정
, eventClick: function (info){
// 달력의 이벤트 클릭 함수
}
, customButtons: // 버튼 커스텀
{
custom1:
{ // 예약버튼 클릭 이벤트
text: '예약',
click: function()
{
fn_rsvtClear();
$('#rsvtRegModal').modal('show');
fn_daterangerpicker();
}
}
}
, contentHeight : 580 // 달력의 높이
, editable : false // 이벤트 편집 여부 (늘리거나 줄이기 && 옮기기 여부)
, ihandleWindowResize : true //반응형 여부
});
calendar.render();
})
</script>
Ref
/volume1/web/dokuwiki/data/pages/wiki/bootstrap/fullcalendar.txt · 마지막으로 수정됨: 2023/03/02 14:27 저자 sgjang
별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
