<link href="src/css/diary.css" rel="stylesheet">
<style>
.nice-event{background-color:#106B06}
</style>

<div id='loading'>loading...</div>

<div id='calendar'></div>
<script src="src/js/moment.js"></script>
<script src="src/js/diary.js"></script>
<script src='src/js/google-calendar.js'></script>
<script>

document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
height: 600,
themeSystem: 'bootstrap',
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridWeek,dayGridMonth,timeGridFourDay,listYear'
},
displayEventTime: false,
googleCalendarApiKey: 'AIzaSyBFvI1_FyhX6tgP7Hrj3L2beEDrLbp5YNg',
events: 'dd96mdgfov1lhut5iu2dk2brqg@group.calendar.google.com',

eventSources: [
{
googleCalendarId: 'kelsofield@gmail.com',
className: 'grey lighten-1'
}
],

views: {
timeGridFourDay: {
type: 'list',
duration: { days: 4 },
buttonText: '4 day'
}
},

eventClick: function(arg) {
 var win = window.open(arg.event.url, 'google-calendar-event', 'width=700,height=600');
var pollTimer = window.setInterval(function() {
if (win.closed !== false) { // !== is required for compatibility with Opera
window.clearInterval(pollTimer);
calendar.render();
}
}, 200);
arg.jsEvent.preventDefault() // don't navigate in main tab
},
dateClick: function(info) {
var sel=info.dateStr;
var set=sel.split("-")

var win = window.open('https://calendar.google.com/calendar/r/day/'+set[0]+'/'+set[1]+'/'+set[2], '', 'width=700,height=600');
var pollTimer = window.setInterval(function() {
if (win.closed !== false) {
window.clearInterval(pollTimer);
calendar.refetchEvents()
}
}, 200);
info.jsEvent.preventDefault() // don't navigate in main tab
},	  

loading: function(bool) {
document.getElementById('loading').style.display =
bool ? 'block' : 'none';
}

});

calendar.render();
});
$('#navBox').html('<li class="breadcrumb-item active">Integrated Diary</li>');
</script>
