Page History

Panel

borderColor	Green
borderWidth	1
titleBGColor	#ddffcc
borderStyle	solid
title	Definition

The Calendar Menu displays a day/week/month calendar view in your เมนูปฏิทิน จะแสดงมุมมองปฏิทินวัน/สัปดาห์/เดือนใน App's Userview.

แสดงข้อมูลของคุณในรูปแบบ วัน/สัปดาห์/เดือน สำหรับการทำงานนี้คุณจำเป็นต้องแมปฟอร์มและ Field IDs ที่จัดเก็บปฏิทินลงในหน้าคุณสมบัติของปลั๊กอินปฏิทิน คุณสามารถดาวน์โหลดตัวอย่าง calendar app จาก Joget Marketplace
ปลั๊กอินเมนูปฏิทินยังสามารถเชื่อมต่อกับ Google API เพื่อแสดงวันหยุดราชการของประเทศที่คุณต้อการภายในปฏิทิน วัน/สัปดาห์/เดือน เดียวกัน คุณจะต้องมีคีย์ของ Google Calendar API , รายละเอียดเพิ่มเติมด้านล่างDisplay your own data records in a calendar day/week/month view format. For this to work, you need to map the form and field IDs that stores the calendar records, into the Calendar plugin properties page. You can download a sample calendar app from Joget Marketplace.
The Calendar Menu plugin can also connect to Google API to display your favorite country's public holidays within the same calendar day/week/month view. You will need a Google Calendar API key for this, more details below.

Panel

borderColor	purple
borderWidth	1
titleBGColor	#ddccff
borderStyle	solid
title	New Feature

This is a new feature in เป็นรูปแบบใหม่ใน Joget Workflow v6.

Info

title	Check out the Sample App

Check out the sample ตรวจสอบตัวอย่าง Calendar Menu Appin Joget Marketplace for demonstration.ใน Joget Marketplace สำหรับการสาธิต

Figure รูปที่ 1: Calendar Menu

Figure รูปที่ 2: Properties - General

Name

ชื่อ

Description

คำอธิบาย
Custom ID	Item link slug.

Optional field.

ฟิลด์ตัวเลือก

Info

title	Unique field

Value defined here must be unique to the rest of the Userview Menus as the first matching name will be called upon.

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

Label

ชื่อเมนู ฟิลด์บังคับ

LabelMenu label. Mandatory field.

Page Title

Calendar page title

ชื่อหน้าปฏิทิน

Data Binder

List of Datalist Binder will be shown to source entries data from.

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

Auto Handle Date Range

Enable to auto handle date range or disable to manually use #requestParam

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

and

และ #requestParam.

end# in your binder configuration.Date format is

end# ในการกำหนดค่า Binder

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

Name

ชื่อ

Description

คำอธิบาย
Event ID (column ID)

Defines individual calendar entry ID. Form field ID is expected here.

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

Event Title (column ID)

Calendar entry title. Form field ID is expected here.

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

All Day (column ID, boolean value)

true/false value is expected. Form field ID is expected here.

ค่าจริง/เท็จ ID ของแบบฟอร์มที่คาดหวัง

From Date (column ID)

Calendar entry date from value. Form field ID is expected here.

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

From Time (column ID)

Calendar entry time from value. Form field ID is expected here.

ค่าเวลาในการป้อนปฏิทินจากค่า ID ของแบบฟอร์มที่คาดหวัง

To Date (column ID)

Calendar entry date to value. Form field ID is expected here.

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

To Time (column ID)

Calendar entry time to value. Form field ID is expected here.

ค่าเวลาในการป้อนปฏิทินเป็นค่า ID ของแบบฟอร์มที่คาดหวัง

Date Format

Date Format in Java is expected here. e.g.

รูปแบบวันที่ใน Java เช่น yyyy-MM-dd

.

Event Url (column ID)

Calendar entry

URL

. Form field ID is expected here.

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

Color (column ID)

Calendar entry CSS color code. Form field ID is expected here.

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

CSS Class (column ID)

Calendar entry CSS Class. Form field ID is expected here.

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

Additional Data

Additional Data to be added to the calendar entry.

...

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

Name

ชื่อ

Description

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

Configurations to load calendar entries from

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

.Notes if you want the Calendar Menu plugin to connect to

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

Every request your application sends to the

ทุกคำขอของคุณที่จะส่งไปยัง Google Calendar API

must include an authorization token. The token also identifies your application to Google. Here are the steps to obtain the Google Calendar API Key:

Go to the Google Developer Console and create a new project (it might take a second).

Once in the project, go to APIs & auth > APIs on the sidebar.

Find "Calendar API" in the list and turn it ON.

On the sidebar, click APIs & auth > Credentials.

ต้องมีโทเค็นการให้สิทธิ์ นอกจากนี้โทเค็นยังระบุแอปพลิเคชันของคุณให้กับ Google ด้วย ต่อไปนี้เป็นขั้นตอนในการขอรับคีย์ API ของ Google Calendar :

ไปที่ Google Developer Console และสร้างโครงการใหม่ (อาจใช้เวลาสักระยะหนึ่ง)
เมื่ออยู่ในโครงการ ไปที่ APIs & auth > Api บนแถบด้านข้าง
ค้นหา " Calendar API" ในรายการและเปิดใช้งาน
บนแถบด้านข้างให้คลิก Api & auth > Credentials
ในส่วน " Public API access " ให้คลิก

In the "Public API access" section, click

" Create new Key "

.

Choose

เลือก "Browser key"

.

If you know what domains will host your calendar, enter them into the box. Otherwise, leave it blank. You can always change it later.

Your new API key will appear. It might take second or two before it starts working.

หากคุณทราบว่าโดเมนใดที่จะโฮสต์ปฏิทินของคุณให้ใส่ลงในกล่องข้อความ มิฉะนั้นปล่อยให้ว่างไว้ คุณสามารถเปลี่ยนได้ในภายหลัง
คีย์ API ใหม่จะปรากฏขึ้น มันอาจจะใช้เวลาสักระยะก่อนที่จะเริ่มต้นการทำงาน
คัดลอกและวางคีย์ API ของคุณลงในหน้า คุณสมบัติเมนูปฏิทิน

Copy and paste your API key into the Calendar menu properties

" Configure Calendar Menu>Data Binder>Advanced "

page.Steps to enable your

ขั้นตอนในการเปิดใช้ Google Calendar

to be public

ของคุณให้เป็นสาธารณะ :

In the

ในส่วน Google Calendar interface

, locate the

ให้ค้นหาพื้นที่ " My calendars "

area on the left.

Hover over the calendar you need and click the downward arrow.

ทางด้านซ้าย
วางเมาส์เหนือปฏิทินที่คุณต้องการแล้วคลิกลูกศรลง
เมนูจะปรากฏขึ้น คลิก

A menu will appear. Click

" Calendar Settings "

.

Check

ตรวจสอบ " Make this calendar public "

.

Make sure

ตรวจสอบให้แน่ใจว่า " Share only my free/busy information "

is unchecked.

ไม่ถูกเลือก

Click

คลิก "Save"

.

Obtain your Google Calendar's ID:

การรับ Google Calendar’s ID ของคุณ
ในส่วน

In the

Google Calendar interface

, locate the

ให้ค้นหาพื้นที่ " My calendars "

area on the left.

Hover over the calendar you need and click the downward arrow.

ทางด้านซ้าย
วางเมาส์เหนือปฏิทินที่คุณต้องการแล้วคลิกลูกศรลง
เมนูจะปรากฏขึ้น คลิก

A menu will appear. Click

" Calendar settings "

.

In the

ในส่วน " Calendar Address "

section of the screen, you will see your Calendar ID. It will look something like "abcd1234@

ของหน้าจอ คุณจะเห็น Calendar ID ของคุณ มันจะมีลักษณะบางอย่างเช่น "abcd1234 @group.calendar.google.com"

.

Copy and paste your API key into the Calendar menu properties

คัดลอกและวางคีย์ API ของคุณลงในหน้า คุณสมบัติเมนูปฏิทิน " Configure Calendar Menu>Data Binder>Advanced "

page.You can read more at

คุณสามารถอ่านเพิ่มเติมได้ที่ไซต์ Google Calendar API

site.

Event Rendering Callback (Javascript)

Custom

รหัส Javascript

code.

ที่กำหนดเอง

Event After Rendering Callback (Javascript)

Custom

รหัส Javascript

code.

ที่กำหนดเอง

Event After All Rendering Callback (Javascript)

Custom

รหัส Javascript

code.

ที่กำหนดเอง

Event Click Callback (Javascript)

Custom

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

Code Block

title	Sample Code to open up form view in a popup dialog
linenumbers	true

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)

Custom header in HTML to show on the top of the calendar.

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

Custom Footer (HTML)

Custom footer in HTML to show on the bottom of the calendar.

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

Panel

borderColor	purple
borderWidth	1
titleBGColor	#ddccff
borderStyle	solid
title	Performance

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

อ่านเพิ่มเติมที่ You can configure the Performance settings in this Userview Element which allows one to cache existing content for improved performance and loading speed. Read more at Performance Improvement with Userview Caching.

...

Page tree

Versions Compared

Old Version 1

New Version Current

Key