Versions Compared

Old Version 1

changes.mady.by.user Hugo

Saved on

compared with

New Version Current

changes.mady.by.user Iris Huang

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Panel
borderColorGreen
borderWidth1
titleBGColor#ddffcc
borderStylesolid
titleDefinition定义

日历菜单在应用程序的用户视图中显示日/周/月日历视图。

  1. 以日历日/周/月视图格式显示您自己的数据记录。为此，您需要将存储日历记录的表单和字段ID映射到日历插件属性页面。您可以 从Joget Marketplace 下载示例  日历应用程序。

  2. 日历菜单插件还可以连接到Google API，在相同的日历日/周/月视图中显示您最喜欢的国家的公共假日。您需要一个Google日历API密钥，以下是更多详细信息。

The Calendar Menu displays a day/week/month calendar view in your App's Userview.

  1. 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
borderColorpurple
borderWidth1
titleBGColor#ddccff
borderStylesolid
titleNew Feature新功能

这是Joget Workflow v6中的一个新功能。This is a new feature in Joget Workflow v6.

Info
titleCheck out the Sample App

Check out the sample Calendar Menu App in Joget Marketplace for demonstration.

Image Removed

Figure 1: Calendar Menu

Image Removed

Figure 2: Properties - General

NameDescription
Custom ID

Item link slug. Optional field.

Info
titleUnique field
 Value defined here must be unique to the rest of the Userview Menus as the first matching name will be called upon.
LabelMenu label. Mandatory field.
Page TitleCalendar page title
Data Binder

List of 列表绑定器 will be shown to source entries data from.

Auto Handle Date Range

Enable to auto handle date range or disable to manually use #requestParam.start# and #requestParam.end# in your binder configuration.

Date format is yyyy-MM-dd.

Image Removed

查看示例应用程序

查看Joget Marketplace中的示例日历菜单应用程序 进行演示。

Image Added

图1：日历菜单

Image Added

 

图2：属性 

名称
描述
自定义ID

物品链接slu </s>。可选字段。

独特的领域

 
 在这里定义的值必须是唯一的用户视图菜单的其余部分，因为第一个匹配的名称将被调用。
标签菜单标签。必填项。
页面标题日历页面标题
数据粘结剂

列表列表绑定器将示出从源条目数据。

自动处理日期范围

启用自动处理日期范围或禁用手动使用您的资料夹配置＃requestParam.start＃和＃requestParam.end＃。

日期格式是yyyy-MM-dd。

Image Added

名称描述
事件ID（列ID）定义个人日历条目ID。表单字段ID预计在这里。
事件标题（列ID）日历项目标题。表单字段ID预计在这里。
全天（列ID，布尔值）预计真/假值。表单字段ID在这里。
从日期（列ID）日历输入日期的值。表单字段ID预计在这里。
从时间（列ID）日历输入时间从价值。表单字段ID预计在这里。
截止日期（列ID）日历输入日期的值。表单字段ID预计在这里。
到时间（列ID）日历输入时间的价值。表单字段ID预计在这里。
日期格式Java中的日期格式预计在这里。例如yyyy-MM-dd。
事件URL （列ID）日历条目网址。表单字段ID预计在这里。
颜色（列ID）日历条目 CSS颜色代码。表单字段ID预计在这里。
CSS类（列ID）日历条目CSS类。表单字段ID预计在这里。
其他数据额外的数据被添加到日历条目。
NameDescription
Event ID (column ID)Defines individual calendar entry ID. Form field ID is expected here.
Event Title (column ID)Calendar entry title. Form field ID is expected here.
All Day (column ID, boolean value)true/false value is expected. Form field ID is expected here.
From Date (column ID)Calendar entry date from value. Form field ID is expected here.
From Time (column ID)Calendar entry time from value. Form field ID is expected here.
To Date (column ID)Calendar entry date to value. Form field ID is expected here.
To Time (column ID)Calendar entry time to value. Form field ID is expected here.
Date FormatDate Format in Java is expected here. e.g. yyyy-MM-dd.
Event Url (column ID)Calendar entry URL. Form field ID is expected here.
Color (column ID)Calendar entry CSS color code. Form field ID is expected here.
CSS Class (column ID)Calendar entry CSS Class. Form field ID is expected here.
Additional DataAdditional Data to be added to the calendar entry.

 

NameDescription
Google Calendar Integration Google日历集成 -
Additional Data

Configurations to load calendar entries from Google Calendar.

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

其他数据

用于从Google日历加载日历条目的配置。

如果您希望日历菜单插件连接到Google日历，请注意

  1. 您的应用程序发送给Google Calendar API的每个请求都必须包含授权令牌。令牌还标识您的应用程序给谷歌。以下是获取Google Calendar API密钥的步骤：
    • 转到Google Developer Console并创建一个新项目（可能需要一秒钟）。
    • 一旦进入项目，请转到侧边栏上的API＆auth> API。
    • 在列表中找到“Calendar API”并将其打开。
    • 在边栏上，点击API和身份验证>凭证。
    • 在“公共API访问”部分，点击“创建新密钥”。
    • 选择“浏览器键”。
    • 如果您知道哪些域名将托管您的日历，请将其输入框中。否则，请留空。您可以随时更改。
    • 您的新API密钥将会出现。开始工作之前可能需要一两秒钟。
    • 将您的API密钥复制并粘贴到“日历”菜单属性“配置日历菜单>数据文件夹>高级”页面中。
  2. 让Google日历公开的步骤：
    • 在Google日历界面中，找到左侧的“我的日历”区域。
    • 将鼠标悬停在所需的日历上，然后点击向下的箭头。
    • 将出现一个菜单。点击“日历设置”。
    • 选中“使这个日历公开”。
    • 确保“仅共享我的空闲/忙碌信息”未选中。
    • 点击“保存”。
    • 获取您的Google日历ID：
    • 在Google日历界面中，找到左侧的“我的日历”区域。
    • 将鼠标悬停在所需的日历上，然后点击向下的箭头。
    • 将出现一个菜单。点击“日历设置”。
    • 在屏幕的“日历地址”部分，您将看到您的日历ID。它会看起来像“abcd1234 @ 
  3. 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.
    • 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.
    • Copy and paste your API key into the Calendar menu properties "Configure Calendar Menu>Data Binder>Advanced" page.
  4. 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:
    • 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@group.calendar.google.com".
    • Copy and paste your API key into the Calendar menu properties "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.
Custom Header (HTML)
Custom header in HTML to show on the top of the calendar.
    •  ”。
    • 将您的API密钥复制并粘贴到“日历”菜单属性“配置日历菜单>数据文件夹>高级”页面中。
    • 您可以在Google Calendar API  网站上阅读更多内容  。
事件渲染回调（Javascript）
自定义的Javascript代码。
渲染回调后的事件（Javascript）
自定义的Javascript代码。
所有渲染回调后的事件（Javascript）
自定义的Javascript代码。
事件点击回叫（Javascript）

自定义的Javascript代码。

Code Block
titleSample Code to open up form view in a popup dialog
linenumberstrue
var popupActionDialog = new PopupDialog("calendarDisplayForm?id="+event.id+"&embed=true");
popupActionDialog.init();
时间显示格式
Refer to https://fullcalendar.io/docs/date-formatting-string for formats.
自定义标题（HTML）
HTML中的自定义标题显示在日历的顶部。
自定义页脚（HTML）
HTML中的自定义页脚显示在日历的底部。
Custom Footer (HTML)
Custom footer in HTML to show on the bottom of the calendar.
Panel
borderColorpurple
borderWidth1
titleBGColor#ddccff
borderStylesolid
titlePerformance性能

您可以在此UserView元素中配置“ 性能”设置，以允许缓存现有内容以提高性能和加载速度。使用Userview缓存进行性能改进，了解更多信息。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.