ไอเอินบล๊อก

หลายคนคงเคยเห็นว่าหลายเว็บได้มีการนำเอาปฎิทินเข้าม่ใช้สำหรับการเลือกใช้งานวันที่ เพื่อให้ถูกต้องเหมาะสมและทำให้เกิดความสวยงาม แต่มันไม่ได้ง่ายสำหรับการทำแบบนี้ ซึ่งในวันนี้ผมจะมาแนะนำ plugins for rails สำหรับผู้ที่สนใจเพิ่มสีสรรให้กับเว็บไซต์ของตัวเองโดยการทำนั้นแทบเรียกได้ว่าเราเขียนโค้ดประมาณ 1 บรรทักเราจะได้ปฏิทินสวยๆ แบบในรูปไปไว้ในครอบครองแล้ว สำหรัวเจ้า plugins ตัวนี้มีชื่อว่า Calendariffic และเรื่องรูปแบบการแสดงผลของปฏิทินอันนี้สามารถแสดงผลได้หลายแบบมากมายตาม css ที่เราได้ตั้งค่าไว้เอาเป็นว่าเรามาเริ่มเพื่อที่จะใช้งานเจ้าปฎิทินตัวนี้เลยดีกว่าครับ

การติดตั้ง

สำหรับการติดตั้งให้ท่านเข้าไปดาวโหลดเจ้า plugins ตัวนี้ได้จาก http://agilewebdevelopment.com/plugins/calendariffic_0_1_0 ซึ่งการดาวโหลดทำได้หลายวิธีมากมายครับ แต่ขอแนะนำการใช้งาน svn ละกันครับ

svn checkout http://opensvn.csie.org/calendariffic/calendariffic/

เมื่อเราได้ folder calendariffic มาแล้วหากต้องการจะใช้งานร่วมกับ rails app ตัวไหนสามารถนำเอา folder นี้ไปวางไว้ใน vendor/plugins ของ application  ที่ต้องการได้เลยครับ จากนั้นให้เอา file .js 3 ไฟล์ต่อไปนี้ไปไว้ที่ public/javascript/calendariffic/ ‘calendar.js’, ‘calendar-setup.js’, and ‘calendar-en.js’ เมื่อเรียบร้อยแล้วเราจะสามารถเรียกใช้งาน calendariffic ได้เลยครับ

การใช้งาน

ก่อนอื่นในหน้าที่ต้องการเรียกใช้จำเป็นต้อง include javascript ด้วยครับ

<%= javascript_include_tag 'calendariffic/calendar.js', 'calendariffic/calendar-setup.js', 'calendariffic/lang/calendar-en.js' %>

เมื่อเราได้ทำการนำเอา javascript มาแล้วเราสามารถเลือกใช้งานลักษณะของ calendar ได้หลากหลายชนิดตาม css ที่มีอยู่ในส่วนของ /vendor/plugins/calendariffic/stylesheet/calendariffic ซึ่งให้เราทำการเลือกมาซักอันครับแล้วไปไปใส่ไว้ที่ public/stylesheet/calendariffic/ ในที่นี้ผมเลือก calendar-green.css ผมก็ต้องทำการ include css โดยเพิ่มโค้ดในส่วนด้านล่างนี้

<%= stylesheet_link_tag 'calendariffic/calendar-green.css' %>

หากทำตามนี้แล้วรูปหายหรือไม่ขึ้นให้นำเอารูปมาเก็บไว้ที่ในส่วนของ /stylesheet/calendariffic/ ด้วยครับ ในส่วนถัดไปจะเป็นการนำเอา calendarriffic มาใช้เพื่อให้ user ได้ทำการเลือกวันที่แล้วข้อมูลจะใส่ลงไปใน texbox ให้ครับ ซึ่งการเรียกใช้งานทำได้หลายวิธีลองศึกษาดูนะครับในที่นี้ขอยกตัวอย่างตามที่ได้ใช้งานละกันครับ

<input type="text" name="start_register" id="start_register" value="<%=@start_register%>" class="myfavoriteclass" /><img src="images/calendariffic/date.png" name="start_cal" id="start_cal" class="borderless" /><script language="javascript">set_cal('start_register', 'start_cal', '%m/%d/%Y');</script>

จากที่เรียกใช้งานจะมีรูปของปฎิทินเมื่อผู้ใช้ click ก็จะเกิด ปฎิทินขึ้นมาให้เลือกใช้งานและมี textbox เพื่อที่จะนำเอาค่าที่ได้จากการเลือกมาใส่ลงใน textbox นี้หากว่าท่านใดต้องการข้อมูลเพิ่มเติมสามารถเข้าดูได้ที่  http://agilewebdevelopment.com/plugins/calendariffic_0_1_0 จะมีตัวอย่างข้อมูลการใช้งานอยู่ครับ

58 views