ESH/calendar.php

<?php  include('techsyn_header.php'); ?>
<!-- Main Content Container for side bar and body-->
<div class="main-container ace-save-state" id="main-container">
		<script type="text/javascript">
			try{ace.settings.loadState('main-container')}catch(e){}
		</script>
<?php  include('techsyn_sidebar.php'); ?> 
<?php  $query = "select * from event_master  ";
  if (!$result = @mysqli_query($conn,$query)) {
            exit(mysqli_error($conn));
        }
	$data = array();
	$i=0;
	if(mysqli_num_rows($result) > 0) {
        while ($row = mysqli_fetch_assoc($result)) {
            $data[$i]['title'] = $row['event_name'];
            $data[$i]['start'] = $row['event_start_date_time'];
            $data[$i]['className'] =$row['class_name'];
            $i++;
            
        }
    } ?>   

<!--breadcrumb-->
<div class="main-content">
    <div class="main-content-inner">
        <div class="breadcrumbs ace-save-state" id="breadcrumbs">
            <ul class="breadcrumb">
                <li>
                    <i class="ace-icon fa fa-home home-icon"></i>
                    <a href="#">Home</a>
                </li>
                <li class="#">Stock Level</li>
            </ul>
        </div>
        <!-- End of breadcrumb -->
           
         <div class="page-content">
		<div id="flexigridDiv" class="table-responsive" style="margin-left:3px">
						<div class="page-header">
							<h1>
								OHC Calendar
								
							</h1>
						</div><!-- /.page-header -->

						<div class="row">
							<div class="col-xs-12">
								<!-- PAGE CONTENT BEGINS -->
								<div class="row">
									<div class="col-sm-11">
										<div class="space"></div>

										<div id="calendar"></div>
									</div>

								
								</div>

								<!-- PAGE CONTENT ENDS -->
							</div><!-- /.col -->
						</div><!-- /.row -->
					</div><!-- /.page-content -->
					</div>
				</div>
			</div><!-- /.main-content -->
           
           
				<form name="f1" method="post" action=""  id="flex_form_checkup">
					<div id="flex1" style="width:100%">
					</div>
					<input type="hidden" name="flex_checkup_id" id="flex_checkup_id"/>
						<input type="hidden" name="emp_id_history" id="emp_id_history"/>
					
				</form>	
           
		<!-- bootstrap & fontawesome -->
		  
	<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="assets/font-awesome/4.5.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="assets/css/bootstrap-datetimepicker.min.css" />
<link rel="stylesheet" href="assets/css/bootstrap-datepicker3.min.css" />
<link rel="stylesheet" href="assets/css/bootstrap-timepicker.min.css" />
<link rel="stylesheet" href="assets/css/daterangepicker.min.css" />
<link rel="stylesheet" href="assets/css/bootstrap-datetimepicker.min.css" />
<link rel="stylesheet" href="assets/css/bootstrap-colorpicker.min.css" />
		<!-- page specific plugin styles -->
		<link rel="stylesheet" href="assets/css/jquery-ui.custom.min.css" />
		<link rel="stylesheet" href="assets/css/fullcalendar.min.css" />

		<!-- text fonts -->
		<link rel="stylesheet" href="assets/css/fonts.googleapis.com.css" />

		<!-- ace styles -->
		<link rel="stylesheet" href="assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />

		<!--[if lte IE 9]>
			<link rel="stylesheet" href="assets/css/ace-part2.min.css" class="ace-main-stylesheet" />
		<![endif]-->
		<link rel="stylesheet" href="assets/css/ace-skins.min.css" />
		<link rel="stylesheet" href="assets/css/ace-rtl.min.css" />
         

		<!-- page specific plugin styles -->
	
<script src="assets/js/jquery-ui.custom.min.js"></script>
<script src="assets/js/jquery.ui.touch-punch.min.js"></script>
<script src="assets/js/chosen.jquery.min.js"></script>
<script src="assets/js/spinbox.min.js"></script>
<script src="assets/js/bootstrap-datepicker.min.js"></script>
<script src="assets/js/bootstrap-timepicker.min.js"></script>
<script src="assets/js/jquery.dataTables.min.js"></script>
<script src="assets/js/jquery.dataTables.bootstrap.min.js"></script>
<script src="assets/js/dataTables.buttons.min.js"></script>
<script src="assets/js/buttons.flash.min.js"></script>
<script src="assets/js/buttons.html5.min.js"></script>
<script src="assets/js/buttons.print.min.js"></script>
<script src="assets/js/buttons.colVis.min.js"></script>
<script src="assets/js/dataTables.select.min.js"></script>


<script src="assets/js/moment.min.js"></script>
<script src="assets/js/daterangepicker.min.js"></script>
<script src="assets/js/bootstrap-datetimepicker.min.js"></script>
<script src="assets/js/bootstrap-colorpicker.min.js"></script>
<script src="assets/js/jquery.knob.min.js"></script>
<script src="assets/js/autosize.min.js"></script>
<script src="assets/js/jquery.inputlimiter.min.js"></script>
<script src="assets/js/jquery.maskedinput.min.js"></script>
<script src="assets/js/bootstrap-tag.min.js"></script>
<script src="assets/js/ace-elements.min.js"></script>

		<script src="assets/js/fullcalendar.min.js"></script>
		<script src="assets/js/bootbox.js"></script>


		<!-- inline scripts related to this page -->
		<script type="text/javascript">
			jQuery(function($) {
				

/* initialize the external events
	-----------------------------------------------------------------*/

	$('#external-events div.external-event').each(function() {

		// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
		// it doesn't need to have a start or end
		var eventObject = {
			title: $.trim($(this).text()) // use the element's text as the event title
		};

		// store the Event Object in the DOM element so we can get to it later
		$(this).data('eventObject', eventObject);

		// make the event draggable using jQuery UI
		$(this).draggable({
			zIndex: 999,
			revert: true,      // will cause the event to go back to its
			revertDuration: 0  //  original position after the drag
		});
		
	});




	/* initialize the calendar
	-----------------------------------------------------------------*/
	 /*/var eventData=[];
	   eventData=<?php   echo json_encode($data)?>*/
	    
	 
	var date = new Date();
	var d = date.getDate();
	var m = date.getMonth();
	var y = date.getFullYear();


	var calendar = $('#calendar').fullCalendar({
		//isRTL: true,
		//firstDay: 1,// >> change first day of week 
		
		buttonHtml: {
			prev: '<i class="ace-icon fa fa-chevron-left"></i>',
			next: '<i class="ace-icon fa fa-chevron-right"></i>'
		},
	
		header: {
			left: 'prev,next today',
			center: 'title',
			right: 'agendaDay,agendaWeek,month,'
		},
		defaultView: 'agendaDay',
		eventSources: ['select_checkup_event.php','select_training_event.php','select_opd_event.php','select_cal_event.php']
		,
		
		/**eventResize: function(event, delta, revertFunc) {

			alert(event.title + " end is now " + event.end.format());

			if (!confirm("is this okay?")) {
				revertFunc();
			}

		},*/
		
		editable: true,
		eventResize:function(event){
              // $.fullCalendar.formatDate(event.start,"Y-MM-DD HH:mm:ss");
               var start=moment(event.start).format('YYYY-MM-DDTHH:mm:ssZ');
               var end=moment(event.end).format('YYYY-MM-DDTHH:mm:ssZ');
                
               // var end=$.fullCalendar.formatDate(event.end,"Y-MM-DD HH:mm:ss");
                
                var tiltle=event.title;
                var id=event.id;
                $.ajax({
    				url : 'event_save.php',
    				type : "POST",
    				data :{event_name:tiltle,start_date_time:start,end_date_time:end,event_id:id} ,
    			
    				dataType:'json',
    				async:false,
    				success : function(data) {
        				//calendar.fullCalendar('refetchEvents');
        				BootstrapDialog.alert('Saved Successfully');
    				},error:function(data){

    				}

                });
		},
		eventDrop:function(event){
			 var start=moment(event.start).format('YYYY-MM-DDTHH:mm:ssZ');
             var end=moment(event.end).format('YYYY-MM-DDTHH:mm:ssZ');
              
             // var end=$.fullCalendar.formatDate(event.end,"Y-MM-DD HH:mm:ss");
              
              var title=event.title;
              var id=event.id;
              $.ajax({
  				url : 'event_save.php',
  				type : "POST",
  				data :{event_name:title,start_date_time:start,end_date_time:end,event_id:id} ,
  			
  				dataType:'json',
  				async:false,
  				success : function(data) {
      				calendar.fullCalendar('refetchEvents');
      				BootstrapDialog.alert('Saved Successfully');
  				},error:function(data){

  				}

              });
		},
		
		droppable: true, // this allows things to be dropped onto the calendar !!!
		drop: function(date) { // this function is called when something is dropped
		
			// retrieve the dropped element's stored Event Object
			var originalEventObject = $(this).data('eventObject');
			var $extraEventClass = $(this).attr('data-class');
			
			
			// we need to copy it, so that multiple events don't have a reference to the same object
			var copiedEventObject = $.extend({}, originalEventObject);
			
			// assign it the date that was reported
			copiedEventObject.start = date;
			copiedEventObject.allDay = false;
			if($extraEventClass) copiedEventObject['className'] = [$extraEventClass];
			
			// render the event on the calendar
			// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
			$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
			
			// is the "remove after drop" checkbox checked?
			if ($('#drop-remove').is(':checked')) {
				// if so, remove the element from the "Draggable Events" list
				$(this).remove();
			}
			
		}
		,
		selectable: true,
		selectHelper: true,
		eventLimit:true,
		select: function(event,start, end, allDay) {

			var modal="<div class=\"modal fade\" id=\"modal-add-event\" name=\"modal-add-event\" role=\"dialog\" aria-hidden=\"true\">"
				modal+="<form role=\"form\" id=\"event_form\" name=\"event_form\" action=\"#\" method=\"post\">"
					modal+="<div class=\"modal-dialog\">"
						modal+="<div class=\"modal-content\">"
							modal+="<div class=\"modal-header\">"
								modal+="<button type=\"button\" class=\"close\" data-dismiss=\"modal\"></button>"
								modal+="<h4 class=\"modal-title\">Add Event </h4>"
							modal+="</div>"

							modal+="<div class=\"modal-body\">"
								modal+="<div class=\"row\">"
									modal+="<div class=\"col-sm-6\">"
										modal+="<div class=\"form-group\">"
											modal+="<label for=\"role\">Event Type</label>"
												modal+="<select autofocus=\"autofocus\" class=\"form-control\" name=\"event_type\" id=\"event_type\"  required ><option value=\"checkup\">Checkup</option> <option value=\"opd\">OPD</option> <option value=\"injury\">Injury</option></select>"
										modal+="</div>"
										
									modal+="</div>"
								
										modal+="<div class=\"col-sm-6\">"
											modal+="<div class=\"form-group\">"
												modal+="<label for=\"end_date_time\">Start Date Time</label>"
												modal+="<input id=\"start_date_time\" name=\"start_date_time\" type=\"datetime-local\" class=\"form-control\" />"
												

												modal+="</div>"

										modal+="</div>"
									
										modal+="</div>"
											modal+="<div class=\"row\">"
												modal+="<div class=\"col-sm-6\">"

													modal+="<div class=\"form-group\">"
														modal+="<label for=\"end_date_time\">End Date Time</label>"
														modal+="<input id=\"end_date_time\" name=\"end_date_time\" type=\"datetime-local\" class=\"form-control\" />"
														

														modal+="</div>"

														

												modal+="</div>"
													modal+="<div class=\"col-sm-6\">"
														modal+="<div class=\"form-group\">"
															modal+="<label for=\"role\">Employee</label>"
																modal+="<select autofocus=\"autofocus\" class=\"form-control\" name=\"emp_name\" id=\"emp_name\"  required ><option>--Select Employee--</option> <?php  echo generateOption('employee',"CONCAT(fname,' ',lname)",'id'); ?></select>"
														modal+="</div>"
														
													modal+="</div>"
												modal+="</div>"
							
													modal+="<div class=\"modal-footer\" style=\"margin-top:30px\">"
														modal+="<button type=\"submit\" class=\"btn btn-sm btn-success\" onclick=\"save_event()\"><i class=\"ace-icon fa fa-check\"></i> Save</button>"
														modal+="<button type=\"button\" class=\"btn btn-sm btn-danger\" onclick=\"delete_cal_event()\" data-action=\"delete\"><i class=\"ace-icon fa fa-trash-o\"></i> Delete Event</button>"
														modal+="<button type=\"button\" class=\"btn btn-sm\" data-dismiss=\"modal\"><i class=\"ace-icon fa fa-times\"></i> Cancel</button>"
															modal+=" </div>"

						modal+="</div>"
					modal+="</div></form>"
			modal+="</div>"


var modal = $(modal).appendTo('body');
			var modal = $(modal).appendTo('body');

		//	$("#event_id").val(calEvent.id)				
	modal.find('form').on('submit', function(ev){
		ev.preventDefault();

		calEvent.title = $(this).find("input[type=text]").val();
		var event_name=calEvent.title;
	//	alert(calEvent.title);
		calEvent.className = $(this).find("input[type=hidden]").val();
		calendar.fullCalendar('updateEvent', calEvent);
		modal.modal("hide");
	});
	modal.find('button[data-action=delete]').on('click', function() {
		calendar.fullCalendar('removeEvents' , function(ev){
			return (ev._id == calEvent._id);
		})
		modal.modal("hide");
	});

	
		
			 //window.location.reload();
	
	
	
	modal.modal('show').on('hidden', function(){
		modal.remove();
	});
	

			
			
		/*	bootbox.prompt("New Event :", function(title) {
				var start=moment(start).format('YYYY-MM-DDTHH:mm:ssZ');
	             var end=moment(end).format('YYYY-MM-DDTHH:mm:ssZ');
	              
	             // var end=$.fullCalendar.formatDate(event.end,"Y-MM-DD HH:mm:ss");
	              
	            
	            
	              $.ajax({
	  				url : 'event_save.php',
	  				type : "POST",
	  				data :{event_name:title,start_date_time:start,end_date_time:end} ,
	  			
	  				dataType:'json',
	  				async:false,
	  				success : function(data) {
	      				calendar.fullCalendar('refetchEvents');
	      				BootstrapDialog.alert('Save Successfully');
	  				},error:function(data){

	  				}

	              });*/
				/*if (title !== null) {
					calendar.fullCalendar('renderEvent',
						{
							title: title,
							start: start,
							end: end,
							allDay: allDay,
							className: 'label-info'
						},
						true // make the event "stick"
					);
				}*/
			//});
			

			calendar.fullCalendar('unselect');
		}
		,
		eventClick: function(calEvent, jsEvent, view) {
			var start=moment(calEvent.start).format('YYYY-MM-DDTHH:mm');
		     var end="";
		     if(calEvent.end!=null)
		    end=moment(calEvent.end).format('YYYY-MM-DDTHH:mm');
			//alert(start);
			//display a modal
			//alert(calEvent.eventName);
			if(calEvent.eventName=="appointment"){
				var appointmentId = calEvent.appointment_id;
				var emp_id = calEvent.emp_id;
				if(calEvent.type=="O"){
				window.location = 'view_opd.php?appointmentId='+appointmentId+'&flex_opd_id='+emp_id+'';
				}
				else if(calEvent.type=="I"){
					window.location = 'view_injury.php?appointmentId='+appointmentId+'&flex_opd_id='+emp_id+'';
					}
				}
			else if(calEvent.type=="checkup"){
				var checkupId = calEvent.checkup_id;
				var emp_id = calEvent.emp_id;
				open_checkup(checkupId,emp_id);
				}
			else{
			var modal="<div class=\"modal fade\" id=\"modal-add-ailment-system\" name=\"modal-add-ailment-system\" role=\"dialog\" aria-hidden=\"true\">"

				modal+="<form role=\"form\" id=\"event_form\" name=\"event_form\" action=\"#\" method=\"post\">"

					modal+="<div class=\"modal-dialog\">"

						modal+="<div class=\"modal-content\">"

							modal+="<div class=\"modal-header\">"

								modal+="<button type=\"button\" class=\"close\" data-dismiss=\"modal\"></button>"

								modal+="<h4 class=\"modal-title\"> Event </h4>"

							modal+="</div>"



							modal+="<div class=\"modal-body\">"

								modal+="<div class=\"row\">"

									modal+="<div class=\"col-sm-6\">"

										modal+="<div class=\"form-group\">"

											modal+="<label for=\"role\"> Event Name</label><input type=\"hidden\" autofocus=\"autofocus\" name=\"class_name\" id=\"class_name\"  value=\""+calEvent.className+"\" >" 

												modal+="<input type=\"text\" autofocus=\"autofocus\" class=\"form-control\" readonly value=\""+calEvent.title+"\" name=\"event_name\" id=\"event_name\" placeholder=\"Enter Event Name\" required />"

										modal+="</div>"

									modal+="</div>"

										modal+="<div class=\"col-sm-6\">"

											modal+="<div class=\"form-group\">"

												modal+="<label for=\"role\">Start Date Time</label>"

													modal+="<input type=\"hidden\" name=\"event_id\" value=\""+calEvent.id+"\" id=\"event_id\"><input type=\"datetime-local\" autofocus=\"autofocus\" class=\"form-control\" name=\"start_date_time\" readonly id=\"start_date_time\" value=\""+start+"\" required />"

											modal+="</div>"

										modal+="</div>"

									

										modal+="</div>"

											modal+="<div class=\"row\">"

												modal+="<div class=\"col-sm-6\">"

													modal+="<label for=\"end_date_time\">End Date Time</label>"



												

														modal+="<input id=\"end_date_time\" name=\"end_date_time\" readonly type=\"datetime-local\" value=\""+end+"\" class=\"form-control\" />"

														



												modal+="</div>"
													modal+="<div class=\"col-sm-6\">"
														modal+="<div class=\"form-group\">"
															modal+="<label for=\"role\">Employee</label>"
																modal+="<input type=\"text\" class=\"form-control\" readonly name=\"emp_name\" value=\""+calEvent.emp_name+"\" id=\"emp_name\" >"
														modal+="</div>"
														
													modal+="</div>"
													
												modal+="</div>"

							

													modal+="<div class=\"modal-footer\" style=\"margin-top:30px\">"

														/* modal+="<button type=\"submit\" class=\"btn btn-sm btn-success\" onclick=\"save_event()\"><i class=\"ace-icon fa fa-check\"></i> Save</button>" */

														modal+="<button type=\"button\" class=\"btn btn-sm btn-danger\" onclick=\"delete_cal_event()\" data-action=\"delete\"><i class=\"ace-icon fa fa-trash-o\"></i> Delete Event</button>"

														modal+="<button type=\"button\" class=\"btn btn-sm\" data-dismiss=\"modal\"><i class=\"ace-icon fa fa-times\"></i> Cancel</button>"

															modal+=" </div>"



						modal+="</div>"

					modal+="</div></form>"

			modal+="</div>"



		
			var modal = $(modal).appendTo('body');

					$("#event_id").val(calEvent.id)				
			modal.find('form').on('submit', function(ev){
				ev.preventDefault();

				calEvent.title = $(this).find("input[type=text]").val();
				var event_name=calEvent.title;
			//	alert(calEvent.title);
				calEvent.className = $(this).find("input[type=hidden]").val();
				calendar.fullCalendar('updateEvent', calEvent);
				modal.modal("hide");
			});
			modal.find('button[data-action=delete]').on('click', function() {
				calendar.fullCalendar('removeEvents' , function(ev){
					return (ev._id == calEvent._id);
				})
				modal.modal("hide");
			});
		
			
				
					 //window.location.reload();
			
			
			
			modal.modal('show').on('hidden', function(){
				modal.remove();
			});

			$.ajax({
				url : 'select_event_by_id.php',
				type : "POST",
				data :{event_id:calEvent.id} ,
			
				dataType:'json',
				async:false,
				success : function(data) {

					 if(data!=null){
						 var start_date=event_start_date_time;
						
						 $("#start_date_time").val(dateFormater(start_date))
						 
						// alert($("#start_date_time").val());
						
	                   $("#end_date_time").val(dateFormater(data.event_end_date_time))
	                   //alert(dateFormater(start_date));
					 }
	  
				},
				error : function(data) {
					BootstrapDialog.alert('Error Fetching Details');
					return;
				}
		});

		}
			//console.log(calEvent.id);
			//console.log(jsEvent);
			//console.log(view);

			// change the border color just for fun
			//$(this).css('border-color', 'red');

		}
		
	});


})

		 function myDateFormaterTime(myDate){

					 $('#start_date_time3').datetimepicker({
						 format: 'DD/MM/YYYY h:mm A',//use this option to display seconds
						 defaultDate: new Date(myDate),
						
						
						 
						});
					
				
			}

function dateFormater(date){

		if(date!=undefined){
			 var d=new Date(date);
			   var y=d.getFullYear();
			   var d1=d.getDate();
			   var m=d.getMonth()+1;
			   var mm=d.getMinutes();
			   var h=d.getHours();
			   if(parseInt(m)<10)
				   m="0"+m;
			   if(parseInt(d1)<10)
				   d1="0"+d1;
			   if(parseInt(d.getHours())<10)
				    h="0"+h;
			   if(parseInt(d.getMinutes())<10)
				   mm="0"+mm;
			   

			   
                 var k=y+"-"+m+"-"+d1+"T"+h+":"+mm;
                 //alert(k);
				   return k;

		}		
  
   
   
     
				     
			}

function save_event(){
	$.ajax({
				url : 'event_save.php',
				type : "POST",
				data : $('#event_form').serialize(),
				success : function(data) {
					//calendar.fullCalendar('refetchEvents');
				BootstrapDialog.show({
				message: 'Details Updated Successfully.',
				buttons: [ {
                label: 'OK',
                action: function(dialogItself){
                    dialogItself.close();
					//window.location.reload();
                }
            }]
        });

			       
			       
				       

				       
					
					//window.location.reload();
					
					return;
				},
				error : function(data) {
					BootstrapDialog.alert('Error Updating Details');
					return;
				}
		});
		 //window.location.reload();
}
			
			
			function delete_cal_event(){
				$.ajax({
							url : 'delete_calender_event.php',
							type : "POST",
							data :{event_id:$("#event_id").val()},
							success : function(data) {
							BootstrapDialog.show({
							message: 'Delete Event Calender Successfully.',
							buttons: [ {
			                label: 'OK',
			                action: function(dialogItself){
			                    dialogItself.close();
								window.location.reload();
			                }
			            }]
			        });
								
								//window.location.reload();
								
								return;
							},
							error : function(data) {
								BootstrapDialog.alert('Error in Deleting Event In Calender');
								return;
							}
					});
					 //window.location.reload();
			}


function open_checkup(checkupId,empId) {
	
	//window.location = 'checkup.php?checkup_id='+checkupId+'';
			//alert(id);
if(checkupId!=null && checkupId!=''){
	$("#flex_checkup_id").val(checkupId);
	$("#emp_id_history").val(empId);
	$("#flex_form_checkup").attr('method', 'POST');
	$("#flex_form_checkup").attr('action', 'checkup_from_before.php');
	$("#flex_form_checkup").submit();
}
	
}
$(document).one('ajaxloadstart.page', function(e) {
	autosize.destroy('textarea[class*=autosize]')
	
	$('.limiterBox,.autosizejs').remove();
	$('.daterangepicker.dropdown-menu,.colorpicker.dropdown-menu,.bootstrap-datetimepicker-widget.dropdown-menu').remove();
});





</script>