Definition

เมนูปฏิทิน จะแสดงมุมมองปฏิทินวัน/สัปดาห์/เดือนใน App's Userview

  1. แสดงข้อมูลของคุณในรูปแบบ วัน/สัปดาห์/เดือน สำหรับการทำงานนี้คุณจำเป็นต้องแมปฟอร์มและ Field IDs ที่จัดเก็บปฏิทินลงในหน้าคุณสมบัติของปลั๊กอินปฏิทิน คุณสามารถดาวน์โหลดตัวอย่าง calendar app จาก Joget Marketplace
  2. ปลั๊กอินเมนูปฏิทินยังสามารถเชื่อมต่อกับ Google API เพื่อแสดงวันหยุดราชการของประเทศที่คุณต้อการภายในปฏิทิน วัน/สัปดาห์/เดือน เดียวกัน คุณจะต้องมีคีย์ของ Google Calendar API , รายละเอียดเพิ่มเติมด้านล่าง
New Feature

เป็นรูปแบบใหม่ใน Joget Workflow v6

Check out the Sample App

ตรวจสอบตัวอย่าง Calendar Menu App ใน Joget Marketplace สำหรับการสาธิต


รูปที่ 1: Calendar Menu

รูปที่ 2: Properties - General

ชื่อคำอธิบาย
Custom ID

Item link slug. ฟิลด์ตัวเลือก

Unique field

ตัวแปลที่กำหนดจะต้องไม่ซ้ำกันกับส่วนอื่นของ Userview เนื่องจากจะทำการเรียกใช้ซ้ำ

Labelชื่อเมนู ฟิลด์บังคับ
Page Titleชื่อหน้าปฏิทิน
Data Binder

รายการของ ตัวยึดข้อมูลดาตาลิสต์ (Datalist Binder) จะแสดงข้อมูลจากรายการแหล่งที่มา

Auto Handle Date Range

เปิดใช้งานการจัดการช่วงวันที่โดยอัตโนมัติหรือปิดใช้งานด้วยตนเอง ใช้#requestParam.start# และ #requestParam.end# ในการกำหนดค่า Binder

รูปแบบวันที่คือ yyyy-MM-dd.


ชื่อคำอธิบาย
Event ID (column ID)กำหนด ID รายการปฏิทินแต่ละตัว ID ของแบบฟอร์มที่คาดหวัง
Event Title (column ID)ชื่อเรื่องของรายการปฏิทิน ID ของแบบฟอร์มที่คาดหวัง
All Day (column ID, boolean value)ค่าจริง/เท็จ ID ของแบบฟอร์มที่คาดหวัง
From Date (column ID)ค่าวันที่ของรายการปฏิทินจากค่า ID ของแบบฟอร์มที่คาดหวัง
From Time (column ID)ค่าเวลาในการป้อนปฏิทินจากค่า ID ของแบบฟอร์มที่คาดหวัง
To Date (column ID)ค่าวันที่ของรายการปฏิทินเป็นค่า ID ของแบบฟอร์มที่คาดหวัง
To Time (column ID)ค่าเวลาในการป้อนปฏิทินเป็นค่า ID ของแบบฟอร์มที่คาดหวัง
Date Formatรูปแบบวันที่ใน Java เช่น yyyy-MM-dd
Event Url (column ID)URL รายการปฏิทิน ID ของแบบฟอร์มที่คาดหวัง
Color (column ID)รายการปฏิทิน รหัสสี CSS ID ของแบบฟอร์มที่คาดหวัง
CSS Class (column ID)

คลาส CSS รายการปฏิทิน ID ของแบบฟอร์มที่คาดหวัง

Additional Dataข้อมูลเพิ่มเติมที่จะเพิ่มลงในรายการปฏิทิน


ชื่อคำอธิบาย
Google Calendar Integration -
Additional Data

การกำหนดค่าเพื่อโหลดรายการปฏิทินจาก Google Calendar

หมายเหตุ ถ้าคุณต้องการปลั๊กอิน Calendar Menu เพื่อเชื่อมต่อกับ Google Calendar

  1. ทุกคำขอของคุณที่จะส่งไปยัง Google Calendar API ต้องมีโทเค็นการให้สิทธิ์ นอกจากนี้โทเค็นยังระบุแอปพลิเคชันของคุณให้กับ Google ด้วย ต่อไปนี้เป็นขั้นตอนในการขอรับคีย์ API ของ Google Calendar :
    • ไปที่ Google Developer Console และสร้างโครงการใหม่ (อาจใช้เวลาสักระยะหนึ่ง)
    • เมื่ออยู่ในโครงการ ไปที่ APIs & auth > Api บนแถบด้านข้าง
    • ค้นหา " Calendar API" ในรายการและเปิดใช้งาน
    • บนแถบด้านข้างให้คลิก Api & auth > Credentials
    • ในส่วน " Public API access " ให้คลิก " Create new Key "
    • เลือก "Browser key"
    • หากคุณทราบว่าโดเมนใดที่จะโฮสต์ปฏิทินของคุณให้ใส่ลงในกล่องข้อความ มิฉะนั้นปล่อยให้ว่างไว้ คุณสามารถเปลี่ยนได้ในภายหลัง
    • คีย์ API ใหม่จะปรากฏขึ้น มันอาจจะใช้เวลาสักระยะก่อนที่จะเริ่มต้นการทำงาน
    • คัดลอกและวางคีย์ API ของคุณลงในหน้า คุณสมบัติเมนูปฏิทิน " Configure Calendar Menu>Data Binder>Advanced "
  2. ขั้นตอนในการเปิดใช้ Google Calendar ของคุณให้เป็นสาธารณะ :
    • ในส่วน Google Calendar interface ให้ค้นหาพื้นที่ " My calendars " ทางด้านซ้าย
    • วางเมาส์เหนือปฏิทินที่คุณต้องการแล้วคลิกลูกศรลง
    • เมนูจะปรากฏขึ้น คลิก " Calendar Settings "
    • ตรวจสอบ " Make this calendar public "
    • ตรวจสอบให้แน่ใจว่า " Share only my free/busy information " ไม่ถูกเลือก
    • คลิก "Save"
    • การรับ Google Calendar’s ID ของคุณ
    • ในส่วน Google Calendar interface ให้ค้นหาพื้นที่ " My calendars " ทางด้านซ้าย
    • วางเมาส์เหนือปฏิทินที่คุณต้องการแล้วคลิกลูกศรลง
    • เมนูจะปรากฏขึ้น คลิก " Calendar settings "
    • ในส่วน " Calendar Address " ของหน้าจอ คุณจะเห็น Calendar ID ของคุณ มันจะมีลักษณะบางอย่างเช่น "abcd1234 @group.calendar.google.com"
    • คัดลอกและวางคีย์ API ของคุณลงในหน้า คุณสมบัติเมนูปฏิทิน " Configure Calendar Menu>Data Binder>Advanced "
    • คุณสามารถอ่านเพิ่มเติมได้ที่ไซต์ Google Calendar API
Event Rendering Callback (Javascript)
รหัส Javascript ที่กำหนดเอง
Event After Rendering Callback (Javascript)
รหัส Javascript ที่กำหนดเอง
Event After All Rendering Callback (Javascript)
รหัส Javascript ที่กำหนดเอง
Event Click Callback (Javascript)

รหัส Javascript ที่กำหนดเอง

Sample Code to open up form view in a popup dialog
var popupActionDialog = new PopupDialog("calendarDisplayForm?id="+event.id+"&embed=true");
popupActionDialog.init();
Time Display Format
อ้างอิงรูปแบบถึง https://fullcalendar.io/docs/date-formatting-string 
Custom Header (HTML)

ส่วนหัวที่กำหนดเองใน HTML เพื่อแสดงที่ด้านบนของปฏิทิน

Custom Footer (HTML)

ส่วนท้ายแบบกำหนดเองใน HTML เพื่อแสดงที่ด้านล่างของปฏิทิน

Performance

คุณสามารถกำหนดการตั้งค่าประสิทธิภาพใน Userview Element นี้ซึ่งอนุญาตให้มีการแคชเนื้อหาที่มีอยู่เพื่อปรับปรุงประสิทธิภาพและความเร็วในการโหลด

อ่านเพิ่มเติมที่ Performance Improvement with Userview Caching.




  • No labels