We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Create a new event by drag & drop from outside scheduler

Thread ID:





146676 Aug 13,2019 06:13 PM UTC Feb 20,2020 05:21 AM UTC Blazor 8
Tags: Scheduler
Asked On August 13, 2019 06:13 PM UTC


How would I go about creating a new event by dragging and dropping from control external to the scheduler.
For example I would want to drag and drop a person from a list into a slot on the week view in the scheduler and add an event with the start time of the slot dropped into, I would set the end time based on a default of adding 1 hour to the start time.
So I have a list of names in a control on the page, I start the drag operation by creating a new event object with some of the details required (name), when I drop into a slot on the scheduler I would complete the required details with the start time of the slot dropped into and set the end time, then add that event to my datasource.
I can see documentation to acheive this with ASP.NET Core, but how do I do it in Blazor? Is it possible? Is it a feature on the roadmap?
The ASP.NET Core example I would like to emulate is https://ej2.syncfusion.com/aspnetcore/Schedule/ExternalDragDrop#/material


Balaji Paramesvaran [Syncfusion]
Replied On August 14, 2019 01:43 PM UTC

Hi Matthew,

Yes, we can able to drag and drop from one component to another. Right now we are facing an issue on sample side. We have logged the below bug report for the case and the fix will be included in our biweekly release on end of August 2019.




Balaji Paramesvaran [Syncfusion]
Replied On September 10, 2019 12:07 PM UTC

Hi Matthew, 
Thank you for the patience 
We have achieved your requirement “Drag and Drop event from external source to scheduler” and the sample can be downloaded from the following link. 
Please try out the above sample and confirm whether it comes to close your requirement. 


Replied On September 11, 2019 12:08 PM UTC

Hi Matthew, 
Thank you for the patience 
We have achieved your requirement “Drag and Drop event from external source to scheduler” and the sample can be downloaded from the following link. 
Please try out the above sample and confirm whether it comes to close your requirement. 


Hi Balaji,

Many thanks for looking into this for me.
The sample you have provided works exactly as I need. I now need to integrate with my app and test again (I have custom data and I have implemented my own popup).
Looking good though

Thanks again

Nevitha Ravi [Syncfusion]
Replied On September 11, 2019 01:08 PM UTC

Hi Matthew, 

You are most Welcome. 

We are glad that our solution fulfills your requirement and please let us know if you need any further assistance. 


Alagumeena Kalaiselvan [Syncfusion]
Replied On February 19, 2020 11:22 AM UTC

Hi Aurelie, 

Thanks for your update! 

We have checked your query “How to display treeview in horizontal manner while using external drag and drop of scheduler” and regret to let you know it is not feasible to display elements in horizontal orientation for Treeview and Listbox components. So, we suggest you bind the drag and drop actions on HTML elements using our essential JS2 draggable library. Here, we have prepared a sample based on your requirement and refer below steps 

Step 1: “Define your custom elements in the `~/index.razor` file” 

@using Newtonsoft.Json; 
@using Syncfusion.EJ2.Blazor 
@using Syncfusion.EJ2.Blazor.Schedule 
@using Syncfusion.EJ2.Blazor.DropDowns 
<div id="waiting-list" style="display:flex;width:100%;"> 
    @foreach (var data in WaitingListData) 
        <div class="drop-item"> 
<div class="row"> 
    <div class="col-lg-8 e-droppable"> 
        <EjsSchedule ID="schedule" @ref="ScheduleRef" TValue="AppointmentData" Height="650px" SelectedDate="@(new DateTime(2018, 5, 5))"> 
            <ScheduleGroup Resources="@GroupData"></ScheduleGroup> 
                <ScheduleResource DataSource="@Consultants" Field="ConsultantID" Title="Consultant" Name="Consultants" TextField="text" IdField="id" ColorField="color"></ScheduleResource> 
            <ScheduleEventSettings DataSource="@DataSource"> 
    // Reference for Schedule 
    EjsSchedule<AppointmentData> ScheduleRef; 
    IJSRuntime JsRuntime { get; set; } 
    protected override void OnAfterRender(bool firstRender) 
        JsRuntime.InvokeAsync<string>("renderList.onList", "waiting-list", "schedule"); 
   public class EmployeeData 
        public int Id { get; set; } 
        public string Name { get; set; } 
    .drop-item { 
        border: 1px solid #cecece; 
        cursor: move; 
        user-select: none; 
        color: #6a77a7; 
        touch-action: none; 
        z-index: 1; 
        width: 100px; 
        background: antiquewhite; 
        margin: 5px; 

Step 2:  Refer “~/drag.js” file and place the below code to handle drag and drop over the custom element 

window.renderList = { 
    onList: function (controlName) { 
        var dragElement = document.getElementById('waiting-list'); 
        for (var i = 0; i < dragElement.childElementCount; i++) { 
            new ej.base.Draggable(dragElement.children[i], 
                    clone: false, 
                    dragArea: document.querySelector(".e-schedule"), 
                    dragStart: function (e) { // Triggers while dragging of an element 
                    enableTailMode: true, 
                    cursorAt: { left: -30, top: -20 }, 
                    dragStop: function (e) { // Triggers while dropping of an element 
                        if (e.target && e.target.classList.contains("e-work-cells")) { 
                            var draggedElement = e.element; 
                            var scheduleObj = document.querySelector('.e-schedule').ej2_instances[0]; 
                            var cellData = scheduleObj.getCellDetails(e.target);  // To Get appointment data 
                            scheduleObj.openEditor(cellData, "Add");  // To display editor window 

Also, you can download this sample from the following link 

Kindly let us know, If you need further assistance 


Vengatesh Maniraj [Syncfusion]
Replied On February 20, 2020 05:21 AM UTC

Hi Aurelie,  
Thanks for the update. 
We are happy that you have found the solution. 
Please let us know if you need any other assistance. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon