wiki:bootstrap:fullcalendar
차이
문서의 선택한 두 판 사이의 차이를 보여줍니다.
|
wiki:bootstrap:fullcalendar [2023/03/02 13:47] sgjang 만듦 |
wiki:bootstrap:fullcalendar [2023/03/02 14:27] (현재) sgjang |
||
|---|---|---|---|
| 줄 9: | 줄 9: | ||
| ===== 적용 방법 ===== | ===== 적용 방법 ===== | ||
| + | * FullCalendar css, script 추가 | ||
| + | * 본인은 bootstrap package에 fullcalendar가 존재하여 아래와 같이 설정함 | ||
| + | |||
| + | < | ||
| + | <!-- fullCalendar --> | ||
| + | <link rel=" | ||
| + | <link rel=" | ||
| + | <link rel=" | ||
| + | <link rel=" | ||
| + | |||
| + | <!-- fullCalendar 2.2.5 --> | ||
| + | <script src="< | ||
| + | <script src="< | ||
| + | <script src="< | ||
| + | <script src="< | ||
| + | <script src="< | ||
| + | <script src="< | ||
| + | <script src="< | ||
| + | </ | ||
| + | |||
| + | * calendar load | ||
| + | < | ||
| + | < | ||
| + | let Calendar = FullCalendar.Calendar; | ||
| + | let calendarEl = document.getElementById(' | ||
| + | |||
| + | let calendar = new Calendar(calendarEl, | ||
| + | //아래 FullCalendar와 toolbar 활용 예시 참고 | ||
| + | } | ||
| + | | ||
| + | calendar.render(); | ||
| + | </ | ||
| + | </ | ||
| + | * 위와 같이 설정한 후에 달력을 표시할 div 생성 | ||
| + | |||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | </ | ||
| + | |||
| ===== Tip ===== | ===== Tip ===== | ||
| + | === FullCalendar와 toolbar 활용 예시 === | ||
| + | < | ||
| + | < | ||
| + | | ||
| + | |||
| + | |||
| + | let Calendar = FullCalendar.Calendar; | ||
| + | let calendarEl = document.getElementById(' | ||
| + | let calendar = new Calendar(calendarEl, | ||
| + | plugins: [ ' | ||
| + | , header: | ||
| + | { // 헤더부분 버튼과 제목 | ||
| + | left | ||
| + | center: ' | ||
| + | right : ' | ||
| + | } | ||
| + | , ' | ||
| + | , events: function(info, | ||
| + | // 달력의 이벤트 표시 함수 | ||
| + | // ajax 활용하여 DB에 있는 정보 가지고 옴 | ||
| + | $.ajax({ | ||
| + | url : url부분 // | ||
| + | , cache: false | ||
| + | , type : ' | ||
| + | , success : function(data) | ||
| + | { | ||
| + | // | ||
| + | |||
| + | // 총 일수 구하는 변수 | ||
| + | |||
| + | // events 배열(중요) | ||
| + | let events = []; | ||
| + | |||
| + | // for문 돌려서 events 배열에 삽입 | ||
| + | for(let i = 0; i < 리스트.length; | ||
| + | |||
| + | // 종료일 포함하기 위해 +1 => events의 end 날짜는 종료일을 포함하지 않고 달력에 나오기 때문에 + 1함 | ||
| + | 예시) endDate = endDate.setDate(endDate.getDate() + 1); | ||
| + | |||
| + | // 값 입력한 후에 배열에 넣기 | ||
| + | 예시) events.push({ | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | // 그 이외의 것들은 info.event._def.extendedProps 안의 배열로 들어감. ***. | ||
| + | | ||
| + | }); | ||
| + | } | ||
| + | // 성공시 events Callback | ||
| + | successCallback(events); | ||
| + | } | ||
| + | , error : function () | ||
| + | { | ||
| + | alert(' | ||
| + | } | ||
| + | , complete : function () | ||
| + | { | ||
| + | windowStatus = " | ||
| + | } | ||
| + | }); | ||
| + | } | ||
| + | |||
| + | , expandRows: true // 화면에 맞게 높이 재설정 | ||
| + | , eventClick: function (info){ | ||
| + | // 달력의 이벤트 클릭 함수 | ||
| + | } | ||
| + | , customButtons: | ||
| + | { | ||
| + | custom1: | ||
| + | { // 예약버튼 클릭 이벤트 | ||
| + | text: ' | ||
| + | click: | ||
| + | { | ||
| + | fn_rsvtClear(); | ||
| + | $('# | ||
| + | fn_daterangerpicker(); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | } | ||
| + | |||
| + | |||
| + | , contentHeight : 580 // 달력의 높이 | ||
| + | , editable | ||
| + | , ihandleWindowResize : true //반응형 여부 | ||
| + | }); | ||
| + | calendar.render(); | ||
| + | }) | ||
| + | </ | ||
| + | </ | ||
| ===== Ref ===== | ===== Ref ===== | ||
| + | * [[https:// | ||
| + | * [[https:// | ||
| + | * [[https:// | ||
| {{tag> | {{tag> | ||
/volume1/web/dokuwiki/data/attic/wiki/bootstrap/fullcalendar.1677732435.txt.gz · 마지막으로 수정됨: 2023/03/02 13:47 저자 sgjang
별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
