|
 |
| |
สอบถามเรื่่องการ ใช้งาน PHP ดึงข้อมุล Event จากฐานข้อมูลมาลงให้ javascript |
| |
 |
|
|
 |
 |
|
ผมไปเจอ jquery plungin Calendar Event มาครับเลยเห็นว่าน่าจะดึงข้อมูลจากฐานข้อมูลมาแสดงได้ด้วย แต่เวลาแอดEvent มันจะทําใน javascript ผมเลยไม่รู้จะดึงด้วย php ยังไงครับ
index.php
Code (PHP)
<!DOCTYPE html>
<!--[if IE 9]><html class="no-js ie9"><![endif]-->
<!--[if gt IE 9]><!--><html class="no-js"><!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexible Calendar</title>
<meta name="description" content="Flexible Calendar with jQuery and CSS3" />
<meta name="keywords" content="responsive, calendar, jquery, plugin, full page, flexible, javascript, css3, media queries" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/calendar.css" />
<link rel="stylesheet" type="text/css" href="css/custom_1.css" />
<script src="js/modernizr.custom.63321.js"></script>
</head>
<body>
<div class="container">
<div class="custom-calendar-wrap custom-calendar-full">
<div class="custom-header clearfix">
<h2>Flexible Calendar <span><span>Demo 1</span> | <a href="index2.html">Demo 2</a>| <a href="index3.html">Demo 3</a></span></h2>
<h3 class="custom-month-year">
<span id="custom-month" class="custom-month"></span>
<span id="custom-year" class="custom-year"></span>
<nav>
<span id="custom-prev" class="custom-prev"></span>
<span id="custom-next" class="custom-next"></span>
<span id="custom-current" class="custom-current" title="Got to current date"></span> </nav>
</h3>
</div>
<div id="calendar" class="fc-calendar-container"></div>
</div>
</div><!-- /container -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.calendario.js"></script>
<script type="text/javascript" src="js/data.js"></script>
<script type="text/javascript">
$(function() {
var cal = $( '#calendar' ).calendario( {
onDayClick : function( $el, $contentEl, dateProperties ) {
for( var key in dateProperties ) {
console.log( key + ' = ' + dateProperties[ key ] );
}
},
caldata : codropsEvents
} ),
$month = $( '#custom-month' ).html( cal.getMonthName() ),
$year = $( '#custom-year' ).html( cal.getYear() );
$( '#custom-next' ).on( 'click', function() {
cal.gotoNextMonth( updateMonthYear );
} );
$( '#custom-prev' ).on( 'click', function() {
cal.gotoPreviousMonth( updateMonthYear );
} );
$( '#custom-current' ).on( 'click', function() {
cal.gotoNow( updateMonthYear );
} );
function updateMonthYear() {
$month.html( cal.getMonthName() );
$year.html( cal.getYear() );
}
// you can also add more data later on. As an example:
/*
someElement.on( 'click', function() {
cal.setData( {
'03-01-2013' : '<a href="#">testing</a>',
'03-10-2013' : '<a href="#">testing</a>',
'03-12-2013' : '<a href="#">testing</a>'
} );
// goes to a specific month/year
cal.goto( 3, 2013, updateMonthYear );
} );
*/
});
</script>
</body>
</html>
ไฟล์นี้เป็นตัวที่แอดข้อมูล Eventครับ ที่จะต้องให้สามารถดึงข้อมูลจาก ฐานข้อมุลมาแสดงได้ครับ
date.js
Code (JavaScript)
var codropsEvents = {
'01-15-2013' : '<a href="http://soraya.in.th/2012/11/27/using-transparency-in-web-design-dos-and-donts/">เทคนิคที่นักออกแบบไม่ควรพลาดการใช้ความโปร่งใสเพื่อออกแบบเว็บไซต์</a>',
'11-21-2012' : '<a href="http://soraya.in.th/2012/11/25/three-script-updates/">ปรับปรุงใหม่ 3 เทคนิคการสร้างแกลลอรี่และSWATCH BOOK ด้วยCSS3 และ jQuery</a>',
};
Tag : PHP
|
|
|
 |
 |
 |
 |
| Date :
2013-01-22 09:19:47 |
By :
kenghockey |
View :
1265 |
Reply :
6 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
ดูแล้วไม่ค่อยเข้าใจครับ แต่ก้ขอบคุณมากครับ ใครพอช่วยเหลือตัว fullcalendar หรือตัวที่โพสต์ช่วยทีครับ
แบบงานคือ
1.admin ข้อมูลลงฐานข้อมุล แล้วสามารถกําหนวันที่มี Eventได้ครับ
2.ผู้ใช้ ดุว่าวันไหนมีเทรนนิ่งที่ต้องการบ้างครับ ก็คลิกเข้าไปดูข้อมูลการเทรนนิ่งได้ครับ
ขอบคุณครับ ผมกําลัง งมมาเป็นเดือนแหละ
|
| |
|
|
| |
| Date :
2013-01-22 11:02:28 |
By :
kenghockey |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ไฟล์ไหนที่เป็นไฟล์ ดึงข้อมูลเนื้อหน้า มาแสดงที่หน้า calendar อ่าครับ
|
| |
|
|
| |
| Date :
2013-01-22 17:54:15 |
By :
kenghockey |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ไฟล์ getCalendar2.php เป็นการเรียกไฟล์จาก DB
ส่วนที่แสดงอยู่ในไฟล์ index.php
ตรงที่เขียนว่า
<!-- ส่วนที่เรียกปฎิทินมาวาง -->
<div align="center" id="calendar"></div>
<!-- ส่วนที่เรียกปฎิทินมาวาง -->
การเรียกค่าก็ตาม script ด้านบน ๆ
Code (PHP)
<script type="text/javascript">
$(function(){
$('#calendar').fullCalendar({
header: {
left: 'month,agendaWeek,agendaDay',
center: 'title',
right: 'prev,next today'
},
//editable: true, ??????????????????
theme:true,
events: "getCalendar2.php?gData=1",
loading: function(bool) {
if (bool) $('#loading').show();
else $('#loading').hide();
}
});
});
</script>
|
| |
|
|
| |
| Date :
2013-01-22 20:01:12 |
By :
apisitp |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
เดี๋ยววันอาทิตย์ จะลองประยุกต์ใช้ดูครับ ต่องขอบคุณมากนะครับ
ช่วงนี้งาน บริษัทเค้าขอมา ทำไม่ได้เดี๋ยวโดนไล่ออก
|
| |
|
|
| |
| Date :
2013-01-23 07:13:50 |
By :
kenghockey |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 02
|
