1 files changed, 105 insertions, 0 deletions
diff --git a/view/tpl/cal_calendar.tpl b/view/tpl/cal_calendar.tpl
new file mode 100755
index 000000000..93ebaa235
--- /dev/null
+++ b/view/tpl/cal_calendar.tpl
@@ -0,0 +1,105 @@
+<script>
+var calendar;
+
+$(document).ready(function() {
+	var calendarEl = document.getElementById('calendar');
+	calendar = new FullCalendar.Calendar(calendarEl, {
+		plugins: [ 'dayGrid' ],
+		eventSources: [ {{$sources}} ],
+
+		timeZone: '{{$timezone}}',
+
+		locale: '{{$lang}}',
+
+		eventTextColor: 'white',
+		header: false,
+
+		height: 'auto',
+
+		firstDay: {{$first_day}},
+
+		monthNames: aStr['monthNames'],
+		monthNamesShort: aStr['monthNamesShort'],
+		dayNames: aStr['dayNames'],
+		dayNamesShort: aStr['dayNamesShort'],
+		allDayText: aStr['allday'],
+
+		eventClick: function(info) {
+			var event_id = info.event._def.extendedProps.item.id;
+			showEvent(event_id);
+		},
+
+		loading: function(isLoading, view) {
+			$('#events-spinner').show();
+			$('#today-btn > i').hide();
+			if(!isLoading) {
+				$('#events-spinner').hide();
+				$('#today-btn > i').show();
+			}
+		}
+
+	});
+
+	calendar.render();
+
+	$('#title').text(calendar.view.title);
+
+	$('#today-btn').on('click', function() {
+		calendar.today();
+		$('#title').text(calendar.view.title);
+	});
+
+	$('#prev-btn').on('click', function() {
+		calendar.prev();
+		$('#title').text(calendar.view.title);
+	});
+
+	$('#next-btn').on('click', function() {
+		 calendar.next();
+		 $('#title').text(calendar.view.title);
+	});
+
+	$(document).on('click','#fullscreen-btn', updateSize);
+	$(document).on('click','#inline-btn', updateSize);
+
+});
+
+function showEvent(event_id) {
+	$.get(
+		'cal/{{$nick}}?id='+event_id,
+		function(data){
+			$.colorbox({ scrolling: false, html: data, onComplete: function() { $.colorbox.resize(); }});
+		}
+	);
+}
+
+function changeView(action, viewName) {
+	calendar.changeView(viewName);
+	$('#title').text(calendar.view.title);
+	$('#view_selector').html(views[calendar.view.type]);
+	return;
+}
+
+function updateSize() {
+	calendar.updateSize();
+}
+</script>
+
+<div class="generic-content-wrapper">
+	<div class="section-title-wrapper">
+		<div class="float-right">
+			<div class="btn-group">
+				<button id="prev-btn" class="btn btn-outline-secondary btn-sm" title="{{$prev}}"><i class="fa fa-backward"></i></button>
+				<button id="today-btn" class="btn btn-outline-secondary btn-sm" title="{{$today}}"><div id="events-spinner" class="spinner s"></div><i class="fa fa-bullseye" style="display: none; width: 1rem;"></i></button>
+				<button id="next-btn" class="btn btn-outline-secondary btn-sm" title="{{$next}}"><i class="fa fa-forward"></i></button>
+			</div>
+			<button id="fullscreen-btn" type="button" class="btn btn-outline-secondary btn-sm" onclick="makeFullScreen();"><i class="fa fa-expand"></i></button>
+			<button id="inline-btn" type="button" class="btn btn-outline-secondary btn-sm" onclick="makeFullScreen(false);"><i class="fa fa-compress"></i></button>
+		</div>
+		<h2 id="title"></h2>
+		<div class="clear"></div>
+	</div>
+	<div class="section-content-wrapper-np">
+		<div id="calendar"></div>
+	</div>
+</div>