2018-07-30
웹페이지 로딩시 fullcalendar를 그려주도록 설정 해놓을때는 잘 표시되던게, bootstrap의 modal을 사용하면 제대로 표시가 안되는 상황이 발생 했다.
아래를 보자.
<button type="button" id="btn1">달력 소환</button>

<div class="modal fade" id="modal1">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title">FullCalendar</h4>
			</div>
			<div class="modal-body">
				<div id="fullcalendar_div1"></div>
			</div>
		</div>
	</div>
</div>

<link href="/post_inc/fullcalendar/fullcalendar.min.css" rel="stylesheet">
<script src="/post_inc/moment/moment.min.js"></script>
<script src="/post_inc/fullcalendar/fullcalendar.min.js"></script>
<script src="/post_inc/fullcalendar/ko.js"></script>

<script type="text/javascript">
var fc1 = null
var mm1 = null

var start1 = moment().format('YYYY-MM-DD HH:')+'00'
var end1 = moment().add(2, 'hour').format('YYYY-MM-DD HH:')+'00'

var events =[
	{
		title: "일정1",
		start: start1,
		backgroundColor:'#ccc',
		end: end1
	},
]

function open_fc(){
	fc1 = $('#fullcalendar_div1').fullCalendar({
		defaultView: 'agendaWeek',
		header: {
			left: 'prev,next today',
			center: 'title',
			right: 'month,agendaWeek,agendaDay,listWeek',
		},
		// defaultDate: '2018-03-12',
		// navLinks: true, // 날짜 클릭여부
		// selectable: true, // 날짜 여백 클릭여부
		// selectHelper: true,
		// lang:"ko",
		select: function(start, end) {
			// console.log(start, end)
		},
		eventClick: function(event) {
			console.log(event.url.idx)
			return false;
		},
		// eventLimit: true, // more 여부
		// changeView: 'month',
		events:events,
		displayEventEnd: true,
		// minTime: "07:00:00",
		// maxTime: "24:00:00",
		slotDuration: '01:00:00'
		// eventAfterAllRender: function( view ) {
		// 	// console.log(view)
		// }
	})
}

$(function(){
	$('#btn1').click(function(){
		$('#modal1').modal()
		open_fc()
	})
})
</script>

기본값을 "주"로 해놓았더니, 다른탭을 선택해서 다시 그리기 전까지는 제대로 값을 불러오질 못하고 있다.
정확한 원인은 모르겠는데, bootstrap에서 modal을 생성할때와 fullCalendar에서 달력을 그릴때 뭔가 충돌이 일어나서, 제대로 기능을 못하는 것으로 판단하고 있다.

그래서 아래와 같이 modal이 완전히 생성된 뒤에 fullCalendar를 그리면 잘 보여지는 것을 볼 수 있다.
<button type="button" id="btn2">달력 소환</button>

<div class="modal fade" id="modal2">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title">FullCalendar</h4>
			</div>
			<div class="modal-body">
				<div id="fullcalendar_div2"></div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
var fc2 = null
var mm2 = null
var m_chk1 = 0

var start2 = moment().format('YYYY-MM-DD HH:')+'00'
var end2 = moment().add(2, 'hour').format('YYYY-MM-DD HH:')+'00'

var events2 =[
	{
		title: "일정2",
		start: start2,
		backgroundColor:'#ccc',
		end: end2
	},
]

function open_fc2(){
	fc2 = $('#fullcalendar_div2').fullCalendar({
		defaultView: 'agendaWeek',
		header: {
			left: 'prev,next today',
			center: 'title',
			right: 'month,agendaWeek,agendaDay,listWeek',
		},
		events:events2,
		displayEventEnd: true,
		slotDuration: '01:00:00'
	})
}

$(function(){
	$('#btn2').click(function(){
		mm2 = $('#modal2').modal()
		mm2.on('shown.bs.modal', function () {
			//shown.bs.modal이벤트가 다중으로 발생하는 걸 방지하기 위한 부분
			m_chk1++
			if( m_chk1 == 1){
				if(fc2){
					fc2.fullCalendar('rerenderEvents')
					$('#fullcalendar_div2').fullCalendar( 'addEventSource', events2 )
				}
				else {
					open_fc2(events2)
				}
			}
		})
	})
})
</script>
처음 불러올때 살짝 시간차가 걸리기는 하는데, 제대로 불러오는걸 볼 수 있다.