Drag and drop external events to now-calendar component

RamNithinD
Tera Contributor

yesterday

Hi, 

Our team is deveoping a custom workspace for a client. Here we have to use now-calendar component. There will be 2 containers one will have task cards which are in open state and the other will be OOB now-calendar component. we can create new events using new button in now-calendar component. But the client is asking for drag and drop feature. He wants to drag the task card into calendar timeframe. This action should make task assigned to a particular person and he should work on that task in a particular time frame. Now OOB cards available doesn't have drag functionality. So we had to develop draggable custom cards which will hold task data and drop it to the calendar component. Now we have developed a sample card component which can be dragged. But we are unable to drop it to the calendar compoent. We are not sure how to add the drop functionality. Please help us add the drop functionality. 

Below are the files for sample card component I have developed for testing in my PDI.

code in index.js file

 

import {createCustomElement} from '@servicenow/ui-core';
import snabbdom from '@servicenow/ui-renderer-snabbdom';
import styles from './styles.scss';

const view = (state, {updateState,dispatch}
) => {
    console.log(state.properties.title);
   
    const {
        properties: {
            title,
            incidentData
        }
    } = state;
    const resolve = (number) =>{
        dispatch('INCIDENT_DRAG', {data: number});
    }

    return(
    <div className="incident-card" draggable="true"
            on-dragstart={() => {
                dispatch('INCIDENT_DRAG_START', {
                    data: incidentData[0]
                });
            }}>
            <h1 className="card-title">{title}</h1>

            <div className="incident-number">
                {incidentData[0].u_number.value}
            </div>

            <p className="incident-description">
                <span className="label">Start Time:</span>
                {' '}
                {incidentData[0].u_start_time.value}
            </p>
      <p className="incident-description">
                <span className="label">End Time:</span>
                {' '}
                {incidentData[0].u_end_time.value}
            </p>
        </div>
);
}

createCustomElement('x-1341934-dpird-customcard', {
       renderer: {type: snabbdom},
    view,
    styles,
    properties:{"title": {default:'demo123'},"incidentData": {default: [{
      "_row_data": {
        "displayValue": "WOT003",
        "uniqueValue": "814a0db393340790de9dfcf08bba10e8"
      },
      "u_assigned_to": {
        "displayValue": "Abraham Lincoln",
        "value": "a8f98bb0eb32010045e1a5115206fe3a"
      },
      "u_end_time": {
        "displayValue": "2026-05-20 08:01:22",
        "value": "2026-05-20 15:01:22"
      },
      "u_number": {
        "displayValue": "WOT003",
        "value": "WOT003"
      },
      "u_start_time": {
        "displayValue": "2026-05-20 07:01:12",
        "value": "2026-05-20 14:01:12"
      }
    }]}}
});
 
 
style.css
 
.incident-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    width: 350px;

    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.1),
        0 10px 15px rgba(0, 0, 0, 0.08);

    border-left: 6px solid #1d4ed8;

    font-family: Arial, sans-serif;
}

.card-title {
    margin: 0;
    font-size: 24px;
    color: #111827;
}

.incident-number {
    margin-top: 16px;
    display: inline-block;

    background: #2563eb;
    color: white;

    padding: 8px 14px;
    border-radius: 8px;

    font-weight: bold;
    font-size: 15px;
}

.incident-description {
    margin-top: 18px;
    color: #4b5563;
    line-height: 1.6;
    font-size: 15px;
}

.label {
    font-weight: 600;
    color: #111827;
}
 
 
now-ui.json
 
{
  "components": {
    "x-1341934-dpird-customcard": {
      "innerComponents": [],
      "uiBuilder": {
        "associatedTypes": [
          "global.core",
          "global.landing-page"
        ],
        "label": "MY Card",
        "tileIcon": "./tile-icon/generic-tile-icon.svg",
        "description": "A Custom Card for DPiRD",
        "category": "primitives"
      },
      "actions":[
        {
          "description":"dragging card",
          "label": "Incident drag start",
          "name": "INCIDENT_DRAG_START",
          "action":"INCIDENT_DRAG_START",
          "payload":[]
        }
      ],
      "properties": [
        {
          "name": "title",
          "label": "Table Title",
          "fileType": "string"
        },
         {
          "name": "incidentData",
          "label": "Incident data object",
          "fileType": "string"
        }
      ]
    }
  },
  "scopeName": "x_1341934_servic_1"
}
 
I have dispatched a custom event which will have card data. I am getting the task information in event handler client script. But I am not able to link or drop it to the calendar component. Can anyone help me with this issue?






0 Helpfuls
  • 98 Views
0 REPLIES 0