PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


FullCalendar อยากส่งค่า Event ID เพื่อเช็ค State ของ Checkbox(Bootstrap Toggle)

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา FullCalendar อยากส่งค่า Event ID เพื่อเช็ค State ของ Checkbox(Bootstrap Toggle)

FullCalendar อยากส่งค่า Event ID เพื่อเช็ค State ของ Checkbox(Bootstrap Toggle)

สวัสดีครับ พอดีผมทำ fullcalendar อยากให้เวลาคลิ๊กดูแต่ละ event
อยากให้ State ของ checkbox bootstrap toggle เป็นไปตาม field ในฐานข้อมูลครับ
คือ ถ้า field notify มีค่าเป็น on ให้ทำการ checked ถ้าเป็น off ก็ไม่ต้อง checked

** ผมจะส่ง id ไปยัง Modal Edit ยังไงได้บ้างครับ

<?php
require_once('bdd.php');

$sql = "SELECT id, title, start, end, color, notify FROM events ";

$req = $bdd->prepare($sql);
$req->execute();

$events = $req->fetchAll();
//print_r($events);
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>OSEC Calendar</title>
	
	<!-- Switch -->
	<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
	<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

    <!-- Custom CSS -->
    <style type="text/css">

</head>

<body>

    <!-- Page Content -->
    	<div class="container-fluid" style="margin-bottom: 30px;">		  
	
	<!-- Calendar -->
	 	<div class="row">
			<div class="col-md-12">
				<div id="calendar" class="col-centered">
			</div>
		</div>
	<!-- End Calendar -->
		 
		<!-- Modal Edit -->
		<div class="modal fade" id="ModalEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" role="document">
			<div class="modal-content">
			<form class="form-horizontal" method="POST" action="editEventTitle.php">
			  <div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="myModalLabel">แก้ไขกิจกรรม</h4>
			  </div>
			  <div class="modal-body">

				<div class="row">
					<div class="col-md-12">
						<div class="col-md-12">
							<div class="form-group">
								<label for="title">การแจ้งเตือน  :</label>
								<div>
									<input type="checkbox" id="toggle-trigger" name="notify_update" 
									<?php 
									$notify = "on";

									if($notify == "on"){ 
										echo "checked"; 
									} 
									?> 
									data-toggle="toggle" data-on="แจ้งเตือน" data-off="ไม่แจ้งเตือน" data-onstyle="success" data-offstyle="danger">
								</div>
	
							</div>
						</div>
				  </div>
				</div>

				  <input type="hidden" name="id" class="form-control" id="id">
				
			  </div>
			  <div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">ยกเลิก</button>
				<button type="submit" class="btn btn-primary">บันทึกกิจกกรรม</button>
			  </div>
			</form>
			</div>
		  </div>
		</div>

    </div>
    <!-- /.container -->

	<script type="text/javascript">

	$(document).ready(function() {
		
		$('#calendar').fullCalendar({
			header: {
			left: 'prev,next today',
			center: 'title',
			right: 'month,listDay,listWeek,listMonth'
		},
			buttonText: {
				today: 'วันนี้',
				month: 'เดือน',
				week: 'สัปดาห์',
				day: 'วัน',
				listMonth:'รายการ'

			},
			locale: 'th',
			contentHeight: 'parent',
			timezone: 'Asia/Bangkok',
			timeFormat: 'HH:mm น.',
			allDayText: 'ตลอดวัน',
			displayEventEnd: {
				month: true,
				basicWeek: true,
			"default": true
			},
			//defaultDate: '2016-01-12',
			allday: true,
			editable: true,
			eventLimit: true, // allow "more" link when too many events
			selectable: true,
			selectHelper: true,
			select: function(start, end) 
			{
				$('#ModalAdd #datetimepicker1').val(moment(start).format('YYYY-MM-DD HH:mm:ss'));
				$('#ModalAdd #datetimepicker2').val(moment(end).format('YYYY-MM-DD HH:mm:ss'));
				$('#ModalAdd').modal('show');
			},
			eventMouseover: function (event, jsEvent) {
					$(this).popover({
					  title: event.name,
                      placement: 'auto',
                      trigger: 'hover',
                      delay: { show: 200, hide: 100 },
                      animation: true,
                      container: '#calendar',
                      html: true,
                      content: event.title
					}).popover('toggle');
				},
				timezone: 'local',
			eventRender: function(event, element) {

				eventsdate = moment(event.start).format('HH:mm a');
         		eventedate = moment(event.end).format('HH:mm a');
				
				element.bind('dblclick', function() {
					$('#ModalEdit #id').val(event.id);
					$('#ModalEdit #title').val(event.title);
					$('#ModalEdit #color').val(event.color);
					$('#ModalEdit #start').val(moment(event.start).format('YYYY-MM-DD HH:mm:ss'));
					$('#ModalEdit #end').val(moment(event.end).format('YYYY-MM-DD HH:mm:ss'));
					$('#ModalEdit').modal('show');
           
				});
			},
			eventDrop: function(event, delta, revertFunc) { // si changement de position

				edit(event);

			},
			eventResize: function(event,dayDelta,minuteDelta,revertFunc) { // si changement de longueur

				edit(event);

			},
			events: [
			<?php foreach($events as $event): 
			
				$start = explode(" ", $event['start']);
				$end = explode(" ", $event['end']);
				if($start[1] == '00:00:00'){
					$start = $start[0];
				}else{
					$start = $event['start'];
				}
				if($end[1] == '00:00:00'){
					$end = $end[0];
				}else{
					$end = $event['end'];
				}
			?>
				{
					id: '<?php echo $event['id']; ?>',
					title: '<?php echo $event['title']; ?>',
					start: '<?php echo $start; ?>',
					end: '<?php echo $end; ?>',
					color: '<?php echo $event['color']; ?>',
				},
			<?php endforeach; ?>
			]
		});
		
		function edit(event){
			start = event.start.format('YYYY-MM-DD HH:mm:ss');
			if(event.end){
				end = event.end.format('YYYY-MM-DD HH:mm:ss');
			}else{
				end = start;
			}
			
			id =  event.id;
			
			Event = [];
			Event[0] = id;
			Event[1] = start;
			Event[2] = end;
			
			$.ajax({
			 url: 'editEventDate.php',
			 type: "POST",
			 data: {Event:Event},
			 success: function(rep) {
					if(rep == 'OK'){
						//alert('Saved');
					}else{
						alert('Could not be saved. try again.'); 
					}
				}
			});
		}
		
	});

</script>

</body>

</html>


โดย:  Pramuan.pao IP: 171.96.189.xxx วันที่: 26-01-2018 เวลา: 20:19:20

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 1
 แนะนำไม่ถูก ลองดูผ่านคู่มือดู น่าจะส่งค่าผ่าน javascript 

https://getbootstrap.com/docs/4.0/components/buttons/#toggle-states


โดย:  Ninenik IP: 223.24.51.xxx วันที่: 26-01-2018