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 171.96.189.xxx 26-01-2018 20:19:20

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

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


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


    ( หรือ เข้าใช้งานผ่าน Social Login )

 ความคิดเห็นที่ 1
 แนะนำไม่ถูก ลองดูผ่านคู่มือดู น่าจะส่งค่าผ่าน javascript 

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


ninenik 223.24.51.xxx 26-01-2018






เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ