Drag and drop external events to now-calendar component

RamNithinD
Tera Contributor

3 weeks ago

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
  • 439 Views
2 REPLIES 2

Mark Manders
Giga Patron

3 weeks ago

Just like OOB cards not being 'draggable', the OOB calendar component is not 'droppable', so that also requires a custom calendar component. But you mention that you "have to use now-calendar component". Why is that? Because if there is a reason for that and you can't build a custom one, the requirement just won't fly.


Please mark any helpful or correct solutions as such. That helps others find their solutions.
Mark
0 Helpfuls

RamNithinD
Tera Contributor
In response to Mark Manders

3 weeks ago

Hi Mark,

OOB calendar component accepts external drops. We have seen this in CSM/FSM dispatcher workspace. In this workspace they are using OOB now-calendar component. I am attaching dispatcher workspace image for reference. In the left container there are work order task cards. Here these cards can be dragged and dropped into the calendar component and be assigned to a technician. To acheieve this functionality ServiceNow built a custom "Field Service Card" component. This is developed by Servicenow only for FSM workspace. We need to something very similar to this. Since we cannot use this "Field Service Card" compnent, we have to develop a component simliar to this. 

We can develop our own custom calendar component as you said, but we have to do more work for that. We saw this working in FSM workspace and thought of similar functionality using now-calendar component. Using OOB calendar component will greatly reduce our workload.

Preview file
219 KB
0 Helpfuls