<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='<?php echo base_url()  ?>assets/persian_full_calender/dist/fullcalendar.css' rel='stylesheet' />
<link href='<?php echo base_url()  ?>assets/persian_full_calender/dist/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='<?php echo base_url()  ?>assets/persian_full_calender/lib/moment/moment.js'></script>
<script src='<?php echo base_url()  ?>assets/persian_full_calender/lib/moment/moment-jalaali.js'></script>
<script src='<?php echo base_url()  ?>assets/persian_full_calender/lib/jquery/dist/jquery.js'></script>
<script src='<?php echo base_url()  ?>assets/persian_full_calender/dist/fullcalendar.js'></script>
<script src='<?php echo base_url()  ?>assets/persian_full_calender/lang/fa.js'></script>

<style>

	body {
		margin: 40px 10px;
		padding: 0;
		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
		font-size: 14px;
	}

	#calendar {
		max-width: 900px;
		margin: 0 auto;
	}
	#calendar{
		background: #fff;
	}
	.fc-button-group button{
		border: 0px solid #ccc !important;
		background: #57c8f2 !important;
		margin-top:10px !important;
		margin-left:5px !important;
		text-shadow:0px 0px 0px #ccc !important;
		color: #fff;
	}
	.fc-icon-left-single-arrow:after{
		content: ">";
		font-size:120%;
		top:0;
	}
	.fc-icon-right-single-arrow:after{
		content: "<";
		font-size:120%;
		top:0;
	}
	.fc-today-button{
		background: #ff6c60 !important;
		margin-left:5px !important;
		text-shadow:0px 0px 0px #ccc !important;
		color: #fff;
		border: 0px solid #ccc !important;
		margin-top:10px !important;
	}
	.fc-title {
font-size: 13px !important;
}
.fc-center{
	margin-top:8px !important;
}
</style>
		
</head>
<body>

	<div id='calendar'></div>

</body>
<script>

	

		$('#calendar').fullCalendar({
			header: {
				left: 'prev,next today,week',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			
			eventLimit:true,
			lang: 'fa',
			isJalaali: true,
			isRTL: true,
			editable: true,
			selectHelper:true,
			 dayClick: function(date, jsEvent, view) {
	
        //alert('Clicked on: ' + date.format());
		$dateen =date.format();
		$dateen =$dateen.replace(/۰/g, "0");
		$dateen = $dateen.replace(/۱/g, "1");
		$dateen =$dateen.replace(/۲/g, "2");
		$dateen =$dateen.replace(/۳/g, "3");
		$dateen =$dateen.replace(/۴/g, "4");
		$dateen =$dateen.replace(/۵/g, "5");
		$dateen =$dateen.replace(/۶/g, "6");
		$dateen =$dateen.replace(/۷/g,"7");
		$dateen =$dateen.replace(/۸/g,"8");
		$dateen =$dateen.replace(/۹/g,"9");
		$dateen = $dateen.replace(/-/g, "");
		<?php $whatday = ""; ?>
					<?php if (@$day_work != ""){
						
						$work_days = explode(",", $day_work);
					for($i=0;$i<7;$i++){
							if(!in_array("".$i, $work_days)){
								$whatday .= $i . ",";
							}
						
					}
					$whatday = rtrim($whatday,",");
						
					?>
					 
					<?php } ?>
		$day = [<?php echo $whatday; ?>];
					
		//$day = [4,5];
		
		for($i=0;$i<$day.length;$i++){

			if (date.day() == $day[$i]) {
				
				return false;
			}
		}
		 $(".add_pationt").css({"display":"block"}).attr({"data_date":$dateen});
		//alert(view.dayGrid);
       // alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
		//alert(view.title)
		var keys = Object.keys(view);
		var getKeys = function(obj){
   var keys = [];
   for(var key in obj){
      keys.push(key);
   }
   return keys;
}
        console.log(getKeys(view));

        // change the day's background color just for fun
        //$(this).css('background-color', 'red');
		$cellname = $(this);

    },
	  eventClick: function(calEvent, jsEvent, view) {

        //alert('Event: ' + calEvent.start.format('H:mm'));
        //alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
		$dateen2 = calEvent.start.format('MM-DD-YYYY');
		$dateen2 = $dateen2.replace(/۰/g, "0");
		$dateen2 = $dateen2.replace(/۱/g, "1");
		$dateen2 =$dateen2.replace(/۲/g, "2");
		$dateen2 =$dateen2.replace(/۳/g, "3");
		$dateen2 =$dateen2.replace(/۴/g, "4");
		$dateen2 =$dateen2.replace(/۵/g, "5");
		$dateen2 =$dateen2.replace(/۶/g, "6");
		$dateen2 =$dateen2.replace(/۷/g,"7");
		$dateen2 =$dateen2.replace(/۸/g,"8");
		$dateen2 =$dateen2.replace(/۹/g,"9");
		$dateen = calEvent.start.format('H:mm');
		$dateen = $dateen.replace(/۰/g, "0");
		$dateen = $dateen.replace(/۱/g, "1");
		$dateen =$dateen.replace(/۲/g, "2");
		$dateen =$dateen.replace(/۳/g, "3");
		$dateen =$dateen.replace(/۴/g, "4");
		$dateen =$dateen.replace(/۵/g, "5");
		$dateen =$dateen.replace(/۶/g, "6");
		$dateen =$dateen.replace(/۷/g,"7");
		$dateen =$dateen.replace(/۸/g,"8");
		$dateen =$dateen.replace(/۹/g,"9");
		if ($(this).css('background-color') =="rgb(254, 168, 3)" || $(this).css('background-color') =="rgb(34, 177, 76)" || $(this).css('background-color') =="rgb(150, 12, 19)" ) {
			$(".setting input").val($dateen);
			$("#hidden_date").val($dateen2);
			$("#hidden_id").val(calEvent.id);
			$(".setting").css({"display":"block"});
		}
		
        // change the border color just for fun

    },
			 eventDrop: function(event, delta, revertFunc) {
				 $id = event.id;
				 $dateen =event.start.format();
		$dateen =$dateen.replace(/۰/g, "0");
		$dateen = $dateen.replace(/۱/g, "1");
		$dateen =$dateen.replace(/۲/g, "2");
		$dateen =$dateen.replace(/۳/g, "3");
		$dateen =$dateen.replace(/۴/g, "4");
		$dateen =$dateen.replace(/۵/g, "5");
		$dateen =$dateen.replace(/۶/g, "6");
		$dateen =$dateen.replace(/۷/g,"7");
		$dateen =$dateen.replace(/۸/g,"8");
		$dateen =$dateen.replace(/۹/g,"9");
		
				$("#ajaxupdater").val($id+":"+$dateen).click();
				$.post("<?php echo base_url(); ?>panel/update_appointment_date_ajax",{id:$id,date:$dateen},function(e){
										if (e=="welldone") {
											alert(e);
										}
										});
				 
			},
			events: [
				<?php foreach($calender_item as $value){ ?>
				{
					title: '<?php echo $value->po_name; ?>',
					start: '<?php echo $value->po_date_ISO8601; ?>',
					id:"<?php echo $value->id; ?>",
					<?php if($value->po_status == 1){ ?>
					color: 'rgb(254,168,3)',
					<?php }else if($value->po_status == 0){ ?>
					color: 'rgb(255,0,0)',
					<?php }else if($value->po_status == 3){ ?>
					color: 'rgb(34,177,76)',
					<?php	}else if ($value->po_status == 4){ ?>
					color: 'rgb(150,12,19)',
					<?php }else{ ?>
					color: 'rgb(156,226,67)',
					textColor:"#000",
					<?php } ?>
				},
				<?php } ?>
				

				// red areas where no events can be dropped
				{
					//start: '2017-W35-1',
					//end: '2017-W35-3',
					// start: '10:00', // a start time (10am in this example)
					//end: '14:00',
					<?php $whatday = ""; ?>
					<?php if (@$day_work != ""){
						
						$work_days = explode(",", $day_work);
					for($i=0;$i<7;$i++){
							if(!in_array("".$i, $work_days)){
								$whatday .= $i . ",";
							}
						
					}
					$whatday = rtrim($whatday,",");
						
					?>
					 
					<?php } ?>
					 dow: [<?php echo $whatday; ?>],
					
					overlap: false,
					rendering: 'background',
					color: '#ccc',
					wtype:"noaccess"
				},
				
			]
		});

	$(".fc-right").css({"visibility":"hidden"});

</script>
<script>

	
	
</script>
</html>
