Viewing file:  calendar_dashboard.php (24.01 KB) -rw-r--r--
Select action/file-type:
 (+) |  (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
<?php
ob_start();
session_start();
require_once('includes/db.php');
require_once('includes/f_thaidate.php');
if (!$_SESSION['fullname']) {
header("location: index.php");
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Admin Dashboard : Coopshop2565</title>
<meta charset="utf-8">
<meta content="ie=edge" http-equiv="x-ua-compatible">
<meta content="template language" name="keywords">
<meta content="Autosoft" name="author">
<meta content="Admin dashboard Autosoft" name="description">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="img/favicon_autosoft.png" rel="shortcut icon">
<link href="https://fonts.googleapis.com/css?family=Prompt:300,400,600,700,800%7CShadows+Into+Light%7CPlayfair+Display:400" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" type="text/css">
<link href="css/main.css?version=4.4.0" rel="stylesheet">
<link href="bower_components/select2/dist/css/select2.min.css" rel="stylesheet">
<link href="bower_components/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">
<link href="bower_components/dropzone/dist/dropzone.css" rel="stylesheet">
<link href="bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet">
<link href="bower_components/fullcalendar/dist/fullcalendar.min.css" rel="stylesheet">
<link href="bower_components/perfect-scrollbar/css/perfect-scrollbar.min.css" rel="stylesheet">
<link href="bower_components/slick-carousel/slick/slick.css" rel="stylesheet">
<style>
.table .ui-sortable-helper {
background: #FFF;
box-shadow: 0px 0px 5px #000000;
width: 100%;
}
</style>
</head>
<body class="menu-position-side menu-side-left full-screen">
<div class="all-wrapper solid-bg-all">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div>
<div class="layout-w">
<!--------------------
START - Mobile Menu
-------------------->
<?php //include ('includes/mobile_menu.php');
?>
<!--------------------
START - Main Menu
-------------------->
<?php include('includes/main_menu.php'); ?>
<!--------------------
END - Main Menu
-------------------->
<div class="content-w">
<!--------------------
START - Top Bar
-------------------->
<?php include('includes/top_setting.php'); ?>
<!--------------------
END - Top Bar
-------------------->
<div class="content-i">
<div class="content-box">
<div class="row pt-12">
<div class="col-sm-12 col-xxxl-12">
<div class="element-wrapper">
<h4 class="element-header">
ระบบปฏิทินกิจกรรม : Calendar Dashboard
</h4>
<script>
// $(document).ready(function(e) {
// $('#sortable tbody').sortable({
// handle: 'i.fa-arrows-alt',
// placeholder: "ui-state-highlight",
// //opacity: 0.9,
// update: function() {
// var order = $('#sortable tbody').sortable('toArray', {
// attribute: 'data-sort-id'
// });
// console.log(order.join(','));
// sortOrder = order.join(',');
// $.post(
// 'action-form.ajax.php', {
// 'action': 'updateSortedRows',
// 'sortOrder': sortOrder,
// 'tables': 'tbl_banner'
// },
// function(data) {
// var a = data.split('|***|');
// if (a[1] == "update") {
// $('#msg').html(a[0]);
// }
// }
// );
// }
// });
// $("#sortable").disableSelection();
// $('[data-toggle="tooltip"]').tooltip();
// });
</script>
<div class="element-box">
<div class="table-responsive">
<div id="msg"></div>
<div id="fullCalendarCurrent"></div>
<!-- MODAL ADD -->
<!-- Bootstrap Modal -->
<div class="modal fade" id="eventModal" tabindex="-1" role="dialog" aria-labelledby="eventModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="eventModalLabel">Add Event</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="eventForm">
<div class="form-group">
<label for="eventTitle">Event Title</label>
<input type="text" class="form-control" id="eventTitle" required>
</div>
<div class="form-group">
<label for="eventDetail">Event Detail</label>
<textarea class="form-control" id="eventDetail" rows="3" required></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="saveEvent">Save Event</button>
</div>
</div>
</div>
</div>
<!-- MODAL ADD -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/popper.js/dist/umd/popper.min.js"></script>
<script src="bower_components/moment/moment.js"></script>
<script src="bower_components/chart.js/dist/Chart.min.js"></script>
<script src="bower_components/select2/dist/js/select2.full.min.js"></script>
<script src="bower_components/jquery-bar-rating/dist/jquery.barrating.min.js"></script>
<script src="bower_components/ckeditor/ckeditor.js"></script>
<script src="bower_components/bootstrap-validator/dist/validator.min.js"></script>
<script src="bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="bower_components/ion.rangeSlider/js/ion.rangeSlider.min.js"></script>
<script src="bower_components/dropzone/dist/dropzone.js"></script>
<script src="bower_components/editable-table/mindmup-editabletable.js"></script>
<script src="bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script src="bower_components/fullcalendar/dist/fullcalendar.min.js"></script>
<script src="bower_components/fullcalendar/dist/locale/th.js"></script>
<script src="bower_components/perfect-scrollbar/js/perfect-scrollbar.jquery.min.js"></script>
<script src="bower_components/tether/dist/js/tether.min.js"></script>
<script src="bower_components/slick-carousel/slick/slick.min.js"></script>
<script src="bower_components/bootstrap/js/dist/util.js"></script>
<script src="bower_components/bootstrap/js/dist/alert.js"></script>
<script src="bower_components/bootstrap/js/dist/button.js"></script>
<script src="bower_components/bootstrap/js/dist/carousel.js"></script>
<script src="bower_components/bootstrap/js/dist/collapse.js"></script>
<script src="bower_components/bootstrap/js/dist/dropdown.js"></script>
<script src="bower_components/bootstrap/js/dist/modal.js"></script>
<script src="bower_components/bootstrap/js/dist/tab.js"></script>
<script src="bower_components/bootstrap/js/dist/tooltip.js"></script>
<script src="bower_components/bootstrap/js/dist/popover.js"></script>
<script src="js/demo_customizer.js?version=4.4.0"></script>
<script src="js/main.js?version=4.4.0"></script>
<script>
$(document).ready(function() {
function convertToBuddhistYear(date, format) {
var buddhistDate = moment(date).add(543, 'years');
return buddhistDate.format(format);
}
if ($("#fullCalendarCurrent").length) {
var calendar, d, date, m, y;
date = new Date();
d = date.getDate();
m = date.getMonth();
y = date.getFullYear();
calendar = $("#fullCalendarCurrent").fullCalendar({
header: {
left: "prev,next today",
center: "title",
right: "month,agendaWeek,agendaDay"
},
locale: 'th',
selectable: true,
selectHelper: true,
select: function select(start, end, allDay) {
$('#eventModal').modal('show');
$('#saveEvent').off('click').on('click', function() {
var title = $('#eventTitle').val();
var detail = $('#eventDetail').val();
if (title) {
var eventData = {
title: title,
start: start,
end: end,
description: detail,
color: '#D4AC0D' // สีที่ต้องการ เช่น 'red', '#ff0000', 'rgb(255, 0, 0)'
};
console.log(JSON.parse(JSON.stringify(eventData)))
// calendar.fullCalendar('renderEvent', {
// title: title,
// start: start,
// end: end,
// allDay: allDay,
// description: detail,
// color: '#D4AC0D' // สีที่ต้องการ เช่น 'red', '#ff0000', 'rg
// }, true);
// $('#eventModal').modal('hide');
// ส่งข้อมูลไปยังฐานข้อมูลที่ต้องการ
$.ajax({
url: 'api_calendar/add_calendar.php', // เปลี่ยนเป็น URL ของ API ที่ต้องการส่งข้อมูลไป
type: 'POST',
// contentType: 'application/json',
data: JSON.parse(JSON.stringify(eventData)),
success: function(response) {
console.log('Event added successfully:', response);
// ส่งเหตุการณ์ให้ FullCalendar เพื่อ render อีกครั้ง
calendar.fullCalendar('renderEvent', eventData, true);
$('#eventModal').modal('hide');
},
error: function(xhr, status, error) {
console.error('Error adding event:', error);
alert('เกิดข้อผิดพลาดในการเพิ่มเหตุการณ์');
}
});
}
});
calendar.fullCalendar('unselect');
},
editable: true,
// events: [{
// title: "Long Event",
// start: new Date(y, m, 3, 12, 0),
// end: new Date(y, m, 7, 14, 0)
// }, {
// title: "Lunch",
// start: new Date(y, m, d, 12, 0),
// end: new Date(y, m, d + 2, 14, 0),
// allDay: false
// }, {
// title: "Click for Google",
// start: new Date(y, m, 28),
// end: new Date(y, m, 29),
// url: "http://google.com/"
// }],
events: function(start, end, timezone, callback) {
// ดึงข้อมูลเหตุการณ์จากฐานข้อมูลของคุณ
$.ajax({
url: 'api_calendar/show_calendar.php', // เปลี่ยนเป็น URL ของ API ที่ดึงข้อมูลเหตุการณ์
type: 'POST',
data: JSON.parse(JSON.stringify({
start,
end
})),
success: function(response) {
var events = response; // ข้อมูลเหตุการณ์ที่ได้รับ
// แปลงข้อมูลเหตุการณ์เป็นรูปแบบที่ FullCalendar ต้องการ
var formattedEvents = events.map(function(event) {
return {
id: event.id,
title: event.title,
start: event.start,
end: event.end,
description: event.description,
color: event.color
};
});
callback(formattedEvents);
},
error: function(xhr, status, error) {
console.error('Error fetching events:', error);
alert('เกิดข้อผิดพลาดในการดึงข้อมูลเหตุการณ์');
}
});
},
eventResize: function(event, delta, revertFunc) {
// แก้ไขขนาดของเหตุการณ์ (ยาวหรือสั้น)
var eventData = {
id: event.id,
start: event.start.format(), // แปลงเป็น ISO 8601
end: event.end.format() // แปลงเป็น ISO 8601
};
// ส่งข้อมูลการแก้ไขไปยังฐานข้อมูล
$.ajax({
url: 'api_calendar/update_date_calendar.php', // URL ของ API ที่รองรับการอัพเดตเหตุการณ์
type: 'POST',
data: JSON.parse(JSON.stringify(eventData)),
success: function(response) {
console.log('Event updated successfully:', response);
},
error: function(xhr, status, error) {
console.error('Error updating event:', error);
revertFunc(); // ย้อนกลับการเปลี่ยนแปลงในกรณีเกิดข้อผิดพลาด
alert('เกิดข้อผิดพลาดในการแก้ไขเหตุการณ์');
}
});
},
eventDrop: function(event, delta, revertFunc) {
// เมื่อย้ายเหตุการณ์ไปที่อื่น
var eventData = {
id: event.id,
start: event.start.format(), // แปลงเป็น ISO 8601
end: (event.end == null) ? null : event.end.format() // แปลงเป็น ISO 8601 (ถ้ามี)
};
// ส่งข้อมูลการย้ายไปยังฐานข้อมูล
$.ajax({
url: 'api_calendar/update_date_calendar.php', // URL ของ API ที่รองรับการอัพเดตเหตุการณ์
type: 'POST',
data: JSON.parse(JSON.stringify(eventData)),
success: function(response) {
console.log('Event updated successfully:', response);
},
error: function(xhr, status, error) {
console.error('Error updating event:', error);
revertFunc(); // ย้อนกลับการเปลี่ยนแปลงในกรณีเกิดข้อผิดพลาด
alert('เกิดข้อผิดพลาดในการย้ายเหตุการณ์');
}
});
}
});
}
});
</script>
</body>
</html>
|