เริ่มแรกก็แค่ ดึง CSS กับตัว JavaScript Library ของตัว YUI Calendar มาใช้ครับ
1. เพิ่ม CSS ของ YUI (ด้านล่างเป็น yui-sam-skin)
| <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/calendar/assets/skins/sam/calendar.css"> |
2. เพิ่ม YUI Library (ต้องการ)
| <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> |
3. YUI Library (ไฟล์หลัก)
| <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/calendar/calendar-min.js"></script> |
4. กำหนดค่า class ให้กับ parent node ที่บรรจุปฎิทิน ในตัวอย่างผมกำหนดไว้ที่ body ครับ
| <body class="yui-sam-skin"> |
5. เพิ่มส่วนจะนำปฎิทิน ไปแสดง
| <div id="calContainer"></div> |
6. เพิ่ม JavaScript ที่ใช้แสดงผลปฎิทิน
| var cal = new YAHOO.widget.Calendar("calContainer"); cal.render(); |
7. เสร็จแล้วก็จะได้หน้าตาคล้ายกันแบบนี้ครับ อันนี้ผมปรับแต่นิดหน่อยให้เป็นภาษาไทย นอกจากนี้ยังมีพวกเหตุการณ์ (event) ให้ใช้ตอน user เลือกวันที่ด้วยครับ ใครสนใจโหลดโค้ดตัวอย่างด้านล่างไปเล่นได้ครับ (ตัวอย่างมีแค่ Navigator ครับ ยังไม่ได้ map event)
ตัวอย่าง : Sky Drive
เพิ่มเติม :
0 comments:
Post a Comment