Support > Repository > Screen function > Calendar view (modern)
ja | en

It is a JavaScript-based calendar view. Provides UI corresponding to drag & drop operation. R7.6

Here is an example of "schedule" model using modern calendar view.The standard is "month" display, but you can switch between "day" "4 days" "week".

Fig. 1 Modern calendar view month display
Figure 2 Modern Calendar View Weekly display
Figure 3 Modern Calendar View 4 Day Display
Figure 4 Modern Calendar View Date Display

When you press the title part with the mouse, a dialog showing the detailed information opens.From this dialog, you can perform "transition to detail screen", "transition to update screen", "delete".

Figure 5 Details dialog

Model definition

It shows the definition of the schedule model.The "start date time" and "end date time" items are "date and time type" respectively.

Figure 6 Definition of schedule model
Figure 7 Select date and time with details of date/time type

Setting the calendar view

Open "Screen> View> Calendar View".Check "Create screen" and set the page title.

"Display method" "modern" I will.

Figure 8 Setting Modern Calendar View

Assign item of model to item setting field.There are the following rules.

Setting value Type of corresponding item Description Required
Start date and time Date Time Based on this date information, display in calendar view.
End date and time Date Time Based on this date information, display in calendar view.Start date and time and end date and time can span multiple days.(From May 1st to May 5th, etc.)
title String, integer, model reference It is defined as an item to be displayed in the calendar view.
Person in charge String, integer, model reference It is defined as an item to be displayed in the calendar view. -
place -
Remarks -
URL -
All day Refer to Calendar All Day Flag Model If this value is set, it will be treated as an all day event.[To be described later] -
Be sure to set the start date and end date and time.(Both start and end settings are required.)

Menu setting

Prepare the "Schedule Calendar View" button in the menu.Here the background color is also changing.

Figure 9 Menu settings

You can specify the color of the model.This is an example of changing to "orange".

Figure 10 Changing the color of the model when displaying the calendar
Figure 11 Color changed

Definition method

Prepare the "ask" model.We will use calendar view.

Figure 12 Query model

In the calendar view of the previously prepared "schedule" model, specify the query model in "Simultaneously display model".(Please enter the model ID "ask".)

Figure 13 Setting to Display Query Model Simultaneously

Multiple models can also be specified.If more than one is specified, describe the model ID with ", (comma)" delimiter. Example: model A, model B

Example of execution

In the schedule calendar view, inquiry models are also displayed at the same time.Here, the display color is set for each model.

Figure 14 Displaying multiple models in the same calendar view

In the inquiry model, we do not specify a model to display at the same time.In this case, only the user (event model) is displayed in the calendar view of the event model.

Figure 15 Switch to single model display only

Definition method

You can specify the time display range (start time, end time) of the calendar.

Figure 16 Setting the time display range

Example of execution

It will be displayed in the range from the specified start time to the end time in "day" "4 days" "week" format.

Figure 17 Calendar view with specified time display range

You can drag and drop the schedule on the calendar.You can change the date and time.

Fig. 18 Drag and drop operation

Example of operation

We can make that event "all day".In the case of monthly units, the display method will change.

Figure 19 All day event display (monthly)

For weekly units, it is displayed at the top of the start time axis.

Figure 20 All day event display (weekly)

Setting method

Prepare the item to store the all day flag.

Figure 21 Prepare an item to store the all-day flag

Refer to the "Calendar all day flag" provided by the system.The input type should be either "list box", "radio button" or "check box".

Figure 22 Model reference setting for all day flag

Register data

When registering the target event, the start date time is 0 hour 0 minute as the starting point, the end date time is0:00 on the next dayPlease.In addition, please set the all day flag.

Figure 23 Setting the start and end of the all day event

"Portal> Calendar portlet (modern)Please read.

Transit to the new registration screen7.10

Double clicking on the calendar date opens a new registration dialog.

Figure 24 Dialog displayed when double-clicking a date
Figure 25 Select model and specify title and start/end date/time
Figure 26 New registration screen opens

Definition method

At the timing of the "initial value> at the time of registration screen display", specifies the formula for receiving the parameters to be passed from the dialog.The target corresponds to "start date and time" "end date and time" "title".

Specify the expression in Fig. 27 "When initial value> registration screen is displayed"

The expression is as follows.

item formula
Start date and time DATETIMEVALUE(REQUEST("jfcCalendarStartDateTime"))
End date and time DATETIMEVALUE(REQUEST("jfcCalendarEndDateTime"))
title REQUEST("jfcCalendarTitle")
All day flag
(When check box is selected)
IF(
NOT(ISBLANK(REQUEST("jfcCalendarAllDay"))),
ARRAY_INT(TOINT(REQUEST("jfcCalendarAllDay"))),
ARRAY_INT()
)
When checking the all day flag in the new registration dialog, the start date and time is 0:00.The end date and time will be the next day after the start date and time.

Modern calendar view internally uses the REST API.Therefore, you can use the ISREST function to set "to set initial values ​​of different search conditions in normal search screen and modern calendar view".

IF (ISREST (), search condition initial value in modern calendar view, search condition initial value on normal search screen)
This designation,Calendar portlet (modern)It will also be reflected.
Classic calendar viewIs not using the REST API, it can not make a decision with the ISREST function.insteadSCREENTYPE functionYou may want to use.

Example: Do not specify search conditions in modern calendar view

In the numeric type field, in the modern calendar view, search conditions are not specified, and when you specify the initial value 1 in the normal search screen, it becomes as follows.

IF(ISREST(),null,1)

Included holiday information

Wagby is Japan holiday information "JapanHolidays.ics" provided by mozilla Are bundled. It is described in iCalendar format.

When using another holiday file, please save it as customize/webpage/WEB-INF/JapanHoliday.ics.(The file name is fixed.) After saving, build will be reflected.

Set your own holiday

You can also set your own holiday information such as company's anniversary of founding."Calendar view (classic)> Handling of holidaysPlease read.

  • Items specified as "start date time" and "end date time" in the calendar view,"Save values ​​in database"You need to specify.
  • If items specified as "start date time" and "end date time" in the calendar view are derived by automatic calculation, move operation by drag & drop is invalid.

Classic calendar viewYou can convert the data registered in the modern calendar view.

Specific methods are "Support> import and export function utilization guide (R7)> Import data of classic calendar view into modern calendar viewPlease read.