allo/resources/views/customer-service/view_calendar.blade.php

@extends('customer-service.layout.master')
@section('ptitle','Customer Service')
@section('page_title', 'Dashboard')
@section('subpage', 'Graph & Summary Report')
@section('img_profile', asset($user->StaffDetail->user_pic))
@section('login_name', $user->StaffDetail->name )
@section('last_login', $user->last_login_at )

@section('content')
<div class="fluid">
	
	<!-- Calendar -->
	<div class="widget grid2 widgetH"></div>
	<div class="widget grid8">
		<div class="whead"><h6 id="title">Calendar</h6></div>
		<div id="calendar_cs"></div>
	</div>
	<div class="widget grid2 widgetH"></div>

</div>
@endsection

@section('external_js')
	<script type="text/javascript">
		$(document).ready(function(){

			$("#default").show();
			$("#new").hide();

			var today = "{{ $today }}";

			$('#calendar_cs').fullCalendar({
				header: {
					left: 'prev,next,today',
					center: 'title',
					right: 'month,agendaWeek,agendaDay,listWeek'
				},
				defaultView: 'month',
				defaultDate: today,
				navLinks: true, // can click day/week names to navigate views
				firstDay: 1,
				eventLimit: true, // allow "more" link when too many events
				events: {
					url: "{{ url('/customer-service/get-all-calendar') }}",
					type: 'POST',
					data: function () { // a function that returns an object
						return {
							"company": $('#cid').val(),
							"status": $('#wstatus').val(),
							"customer": $('#filterByC').val(),
							"_token": "{{ csrf_token() }}"
						};
					},
					error: function() {
						alert('there was an error while fetching events!');
					},
				},
				eventClick: function(event) {
					if (event.url) {
						window.open(event.url);
						return false;
					}
				},
				selectable:false,
				editable:false,
			});

			$('#cid,#wstatus').on('change',function(){

				$('#calendar_cs').fullCalendar('refetchEvents');

				$.ajax({
					url: "{{ url('/customer-service/get-company-color') }}",
					type: 'POST',
					data: { "company": $('#cid').val(), "_token": "{{ csrf_token() }}" },
				}).done(function(company_label) {

					$('.fc-widget-header').css({"background":company_label[0].bg,"color":company_label[0].text});
					$('.fc-widget-header a[data-goto]').css({"background": company_label[0].bg,"color":company_label[0].text});
					document.getElementById("title").innerHTML = 'Calendar '+ company_label[0].name;

				});

			});

			$('#filterByC').on('change', function() {

				if(this.value == ''){
					$("#default").show();
					$("#new").hide();
					$('#calendar_cs').fullCalendar('refetchEvents');
				}else if(this.value == 'New Customer'){
					$("#default").hide();
					$("#new").show();
					$('#calendar_cs').fullCalendar('refetchEvents');
				}
			});
		});
	</script>
@endsection