Schedule Table

The Schedule Table component allows users to view and manage schedules. It provides a tabular interface for scheduling with capabilities to create, edit, and delete schedule entries depending on configuration settings.

Parameters

Parameter	Type	Description	Required
action	String / Object	Can be initialize to initialize a new component or an object to call an action on a component.	Yes
token	String	Authentication token to authorize the component.	Yes
settings	Object	JSON object containing configuration settings for the Schedule Table component.	No
arguments	Array	JSON object containing additional arguments for the Schedule Table component.	No

Actions

Action	Description	Arguments	Settings
initialize	Initializes the component.		settings JSON object of new configuration settings.
updateSettings	Updates the component's settings.		settings JSON object of new configuration settings.

Configuration Settings

Setting	Type	Description	Default
allowCreate	boolean	Enables UI elements for creating new schedule entries.	true
allowEdit	boolean	Enables UI elements for editing existing schedule entries.	true
allowDelete	boolean	Enables UI elements for deleting schedule entries.	false

Initialize

To load the Schedule Table component in your application, you need to embed the component's iframe in your HTML. The iframe's src attribute should be set to https://api.recrubo.app/public/v2/embed/component/schedule-table.

Example

<iframe id="scheduleTableFrame" src="https://api.recrubo.app/public/v2/embed/component/schedules-table"></iframe>

<script type="text/javascript">
const scheduleTable = document.querySelector('#scheduleTableFrame')

scheduleTable.onload = (evt) => {
    const scheduleTableSettings = {
        action: 'initialize',
        token: 'XX-XX-XX-XX-XX',
        settings: {
            scheduleTable: {
                allowCreate: true,
                allowEdit: true,
                allowDelete: false
            }
        }
    }

    scheduleTable.contentWindow.postMessage(scheduleTableSettings, 'https://recrubo.app')
}
</script>

Events

The Schedule Table component triggers events that your application can listen for and handle appropriately.

Created Event

The created event is triggered when a new schedule entry is created. This event provides the ID of the newly created schedule.

Example of handling the event

<script type="text/javascript">
window.addEventListener('message', function(event) {
    // Verify the origin of the message
    if (event.origin !== 'https://recrubo.app') return;
    
    const data = event.data;
    
    // Check if this is a created event from the schedule table component
    if (data.component === 'scheduleTable' && data.event === 'created') {
        console.log('New schedule created with ID:', data.scheduleId);
        // Handle the new schedule creation in your application
    }
});
</script>

All events from the Schedule Table component will include a component field with the value 'scheduleTable' and an event field specifying the type of event (e.g., 'created').