FullCalendar อยากส่งค่า Event ID เพื่อเช็ค State ของ Checkbox(Bootstrap Toggle)
ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา FullCalendar อยากส่งค่า Event ID เพื่อเช็ค State ของ Checkbox(Bootstrap Toggle)
FullCalendar อยากส่งค่า Event ID เพื่อเช็ค State ของ Checkbox(Bootstrap Toggle)
Copy
สวัสดีครับ พอดีผมทำ 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">×</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
26-01-2018
20:19:20
คำแนะนำ และการใช้งาน
สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก
- ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
สนับสนุนเว็บไซต์เรา จ่ายด้วย 
Author Ninenik Narkdee
2024 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา
โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ