Skip to content

Schedule

The component displays data in a schedule formal, organizing the view into day, week, workweek (Monday to Friday), month and agenda formats. Schedule Component Web Screen

How to Create

  1. In the New Component Popup screen, select the Schedule type and click Next (Step 1).

  2. Enter the Component Name and specify the name to be displayed on the screen (either Symbolic String or Custom Name), then select the Business Object you have created and click Next.

  3. Choose the fields of the Business Object that will be displayed in the list. The fields shown are those included in the Business Object selected earlier, with CALS System Fields being selected by default.

Applicable List of Component Attributes

  1. Tab Pane Id: When the screen is composed of a Tab Component and the corresponding component is placed at the bottom, then Panel Id value of the Tab Component is registered and used to connect to the Tab.
  2. SQL Log Active: Component에 The component stores the SQL statements executed by the registered Lambda Serice(Load, Save, Delete) and saves the log values until the specified time(SQL Log Active End Time)
  3. Views: This attribute is unique to the calendar component. When each item (day, week, workweek, month, agenda) is checked, a selectable view appears at the top right of the schedule screen, allowing the screen to be configured according to the checked formats.
  4. Current View: Specifies the initial screen displayed when showing the Schedule Component. It allows you to set the view selected from the Views section.
  5. Data Format: This attribute exists only in the Schedule Component. The default value is yyyy-MM-dd, displaying dates in the format 1970-09-30, and it can be customized.
  6. Draggable: : Determines whether calendar data can be dragged. The default value is false. When set to true, you can register actions using the cell-drag service to enable dragging actions.
  7. Resizable: Determines whether calendar data can be resized. The default value is false, When set to true after registering the cell-drag service, cells can be resized.
  8. Category: This property allows you to specify the color of cells based on calendar data. The sub-property Field selects the field that determines the color, and Ref Code specifies the common code to associate with that field. Actual colors are defined in Style - Category Color.
  9. Collapse Disable: The component's content collapsing feature has a default value of N/A, allowing the user to open and close the screen. If changed to YES, the collapsing feature is disabled.
  10. Default Collapse State: When the Collapse Disabled attribute is active (Collapse Disabled = FALSE), users can collapse or expand the component's screen. The Default Collapse State attribute can be used to specify the default state, with the default value being N/A (Open), meaning the component is displayed in an expanded state. If set to Close, the component will be displayed in a collapsed state by default.
  11. Display Full Size Fixed: This setting determines whether the component is displayed in full size on the screen. Typically, Display Full Size Fixed is used when there is only a single component on the screen.
  12. Style – Size: Set the size of the component. Set the height in pixels and percent.
  13. Style – Category Color: This attribute, which exists only in the Schedule component, allows you to specify colors for each category. The color assignment is based on the code values from the Common Code.
  14. Style – Outline: This setting configures the outer border or outlibe type, of the component's list. If you set the type to Folder, the border of the list will change to a folder icon shape.
  • Available Controls
  1. ToolbarButton: A button control within the Toolbar Component.
  2. ScheduleItem: A control used in the Schedule Component, representing each calendar item displayed on the screen. ScheduleOtem has a Data Key property through which you can specify values such as Id, Subject, Start Time, End Time, Description, Step, Manager, and Type. These values determine the position of data within the calendar.

Available List of Services

NamePlatformDescription
loadCommonEvent that occurs when data loading
cell-clickWebThe service corresponds to the deletion button icon on the detailed popup that appears upon clicking when data is registered in the calendar.
cell-dbclickWebThe service primarily connects to entering and editing new data when double-clicking on the calendar box.
cell-dragWebThe service connects to saving date data by allowing registered data to be repositioned using DragDrop for location changes.
  1. Cell-click: Connect delete lambda to the service connected to the trash can icon in the picture below.

    [Image1. Connected icon to Cell-click]

    [Image2. Cell-click's service]

  2. Specify the calendar component as the component for deleting data within the calendar.

  3. Specify sysIds as the selectData parameter for the Delete lambda.

  4. Use the fixedDataSelect with componentId to specify the calendar componentId for data requery after deletion.

  5. Cell-dbclick: Double-click on a calendar box connect primarily to entering and editing new data. It also links to the edit icon as shown in [Figure 1]. Thus, double-click and edit icon are simultaneously applied.

    [Image1. Connected icon to cell-dbclick]

    [Image2. Service of cell-dbclick in calendar component]

    ① Register the Show Popup Action.

    ② Register the URL of the input form component for creating or editing in the Path.

    [Figure 3. controlId parameter of calendar cell-dbclick]

    ③ To bind data to the editing popup, the sys_id of the calendar component is stored and passed as the parameter key.

    [Image3. Load service information for new calendar popup form component.]

    ④ In the Check Action, the parameters registered in the path of the cell-dbclick service from the calendar component are received as urlParams to perform input validation.

    ⑤ If thre is a passed urlParam value, the key value of urlParamSelect for loading data in the component is queried based on the SYS ID of the component.

    [Image4. Add Component-Interface Action to the load of the popup Form Component]

    ⑥ Add Component-Interface to specify the start date, time, end time and time of the clicked point on the popup screen of the calendar.

    ⑦ Source Type: Set Source Type as urlParam and configure the Source Value with the following six values.

    • schedule_start_datetime
    • schedule_start_date
    • schedule_start_time
    • schedule_end_datetime
    • schedule_end_date
    • schedule_end_time

    ⑧ Target Type: After setting controlId, specify the Control will receive the entered Source Value of the popup Form Component.

    WARNING

    The source value that can be specified varies depending on the type of target control.

    • vQSText: date, datetime, time and others
    • vQSDatePicker: date, datetime
    • vQSDateTimePicker: date, datetime
    • vQSTimeSelect: time
  6. Cell-Drag: When dragging and dropping data in the calendar, implement a service to automatically save by updating the values of start-time and end-time to the datetime of the moved position.

    [Image1. Cell-drag service]

  7. Register a Save Action to allow the changed values to be saved.

  8. Specify the controlId as the sysId, which is the data key for the Save Action.