วันนี้จะทำ Pop Up Calendar แบบนี้

aspnet-popupcalendar-10

เมื่อคลิกที่ปุ่ม ก็จะโชว์ปฏิทิน แบบนี้

aspnet-popupcalendar-11

เตรียมพร้อมก่อนใช้งาน

  1. ก่อนอื่น ต้องดาวโหลด Control Set จากเว็บนี้  eworldui.net เมื่อดาวโหลดมาเสร็จแล้วก็ install โลดดดดดดด
  2. aspnet-popupcalendar-01

  3. เมื่อ install เสร็จแล้วก็เปิด Visual Studio ขึ้นมา มองไปที่ toolbox แล้ว คลิกขวา เลือก Add Tab เพื่อสร้าง Tab สำหรับเก็บ Control ของ eWorldUI (จะไม่ Add Tab ก็ได้นะ แต่ทำไว้เพื่อความสะดวกในการใช้งานในครั้งต่อๆ ไป)
  4. aspnet-popupcalendar-02

  5. พิมพ์ชื่อ Tab ว่า  eWorldUI

  6. aspnet-popupcalendar-03

  7. เลือก Tab eWorldUI แล้วคลิกขวา Choose Items
  8. aspnet-popupcalendar-04

  9. เลือก Items ที่มี Namespac ว่า eWorld.UI ทั้งหมด (คลิก Namespace ก็ได้เพื่อให้เรียงตามตัวอักษร) จากนั้นกด OK

  10. aspnet-popupcalendar-05

  11. จะเห็นว่าที่ Toolbox ของเราจะมีเพิ่มขึ้นมามากมาย (แต่ในที่นี้จะแนะนำแค่ CalendarPopup อย่างเดียว อิอิ)

  12. aspnet-popupcalendar-06

  13. ต่อมา ไปที่ Solution Explorer คลิกขวาที่ชื่อ Project จากนั้นเลือก Add Reference

  14. aspnet-popupcalendar-07

  15. เลือก Excentrics World Controls

  16. aspnet-popupcalendar-08

  17. แค่นี้ก็พร้อมใช้งานแล้ว


ใช้งาน CalendarPopup (Design)

  1. ลาก CalendarPopup มาจาก Toolbox จะได้ดังนี้
  2. aspnet-popupcalendar-09

  3. ลอง Run ดูจะได้แบบนี้
  4. aspnet-popupcalendar-10

  5. ลองคลิกที่ปุ่ม … จะได้แบบนี้
  6. aspnet-popupcalendar-11

  7. โอ้ววว เสร็จแล้ว pop up calendar ที่ต้องการ

(ไม่ต้องเขียนเองให้เมื่อยตุ้ม…)


ใช้งาน CalendarPopup (Coding)

หลังจากมี Design ของ CalendarPopup แล้ว ต่อมาเราก็จะมาเขียนโค้ดเพื่อนำไปใช้งาน


เป้าหมายคือ เมื่อเลือกวันที่เสร็จแล้ว กด OK ให้โชว์วันที่ที่เลือกไว้ (ง่ายๆ ก่อน)

  1. หน้า Design เพิ่มเติมนิดหน่อยแบบนี้
  2. aspnet-popupcalendar-12

  3. Double Click ที่ปุ่ม OK เพื่อเขียนโค้ด
  4. Dim myDate As Date
    myDate = CalendarPopup1.SelectedDate
    lblDate.Text = myDate.ToString()

  5. ลอง Run ดู จะได้แบบนี้
  6. aspnet-popupcalendar-13

ไม่เพียงแค่โชว์ Date ได้เท่านั้น ลอง CalendarPopup1.SelectedDate แล้วจุด ดูจะขึ้น Property มา สามารถเลือกได้ทั้ง Day, Month, Year, DayOfWeak เป็นต้น

ลองเล่นดูเพิ่มเติม และแล้ววันนี้ก็สร้าง Pop Up Calendar ได้ตามความต้องการ

ต้องขอบคุณพี่ดิว สำหรับคำแนะนำ ^^”