Backend API
@model IEnumerable<DevExtreme.NETCore.Demos.Models.Appointment>
@(Html.DevExtreme().ScrollView()
.ID("scroll")
.Content(
Html.DevExtreme().Draggable()
.ID("list")
.Group("appointmentsGroup")
.OnDragStart(
@<text>
function(e) {
e.cancel = true;
}
</text>
)
.OnInitialized(
@<text>
addTasks
</text>
)
.ToString()
)
)
@(Html.DevExtreme().Scheduler()
.ID("scheduler")
.DataSource(Model)
.TimeZone("America/Los_Angeles")
.TextExpr("Text")
.StartDateExpr("StartDate")
.EndDateExpr("EndDate")
.AllDayExpr("AllDay")
.Views(views =>
views.Add()
.Type(SchedulerViewType.Day)
.IntervalCount(3)
)
.CurrentDate(new DateTime(2021, 4, 26))
.StartDayHour(9)
.Height(600)
.AppointmentDragging(dragging => {
dragging.Group("appointmentsGroup");
dragging.OnRemove(
@<text>
function(e) {
e.component.deleteAppointment(e.itemData);
createItemElement(e.itemData);
}
</text>
);
dragging.OnAdd(
@<text>
function(e) {
e.component.addAppointment(e.itemData);
e.itemElement.remove();
}
</text>
);
})
)
<script>
var createItemElement = function(data) {
$("<div>")
.text(data.Text)
.addClass("item dx-card")
.appendTo("#list")
.dxDraggable({
group: "appointmentsGroup",
data: data,
clone: true,
onDragEnd: function(e) {
if (e.toData) {
e.cancel = true;
}
},
onDragStart: function(e) {
e.itemData = e.fromData;
}
})
}
var addTasks = function() {
tasks.forEach(function (task) {
createItemElement(task);
})
}
var tasks = [
{
Text: "New Brochures"
}, {
Text: "Brochure Design Review"
}, {
Text: "Upgrade Personal Computers"
}, {
Text: "Install New Router in Dev Room"
}, {
Text: "Upgrade Server Hardware"
}, {
Text: "Install New Database"
}, {
Text: "Website Re-Design Plan"
}, {
Text: "Create Icons for Website"
}, {
Text: "Submit New Website Design"
}, {
Text: "Launch New Website"
},
];
</script>
using Microsoft.AspNetCore.Mvc;
using DevExtreme.NETCore.Demos.Models.SampleData;
using DevExtreme.NETCore.Demos.ViewModels;
namespace DevExtreme.NETCore.Demos.Controllers {
public class SchedulerController : Controller {
public ActionResult DragAndDrop() {
return View(SampleData.DragAndDropAppointments);
}
}
}
using System;
using System.Text.Json.Serialization;
namespace DevExtreme.NETCore.Demos.Models {
public class Appointment {
[JsonPropertyName("AppointmentId")]
public int AppointmentId { get; set; }
[JsonPropertyName("Text")]
public string Text { get; set; }
[JsonPropertyName("Description")]
public string Description { get; set; }
[JsonPropertyName("StartDate")]
public string StartDate { get; set; }
[JsonPropertyName("EndDate")]
public string EndDate { get; set; }
[JsonPropertyName("AllDay")]
public bool AllDay { get; set; }
[JsonPropertyName("RecurrenceRule")]
public string RecurrenceRule { get; set; }
[JsonPropertyName("RecurrenceException")]
public string RecurrenceException { get; set; }
}
public class DisableDatesAppointment {
[JsonPropertyName("AppointmentId")]
public int AppointmentId { get; set; }
[JsonPropertyName("Text")]
public string Text { get; set; }
[JsonPropertyName("Description")]
public string Description { get; set; }
[JsonPropertyName("StartDate")]
public DateTime StartDate { get; set; }
[JsonPropertyName("EndDate")]
public DateTime EndDate { get; set; }
[JsonPropertyName("AllDay")]
public bool AllDay { get; set; }
[JsonPropertyName("RecurrenceRule")]
public string RecurrenceRule { get; set; }
[JsonPropertyName("RecurrenceException")]
public string RecurrenceException { get; set; }
}
}
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.NETCore.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<Appointment> Appointments = new[] {
new Appointment {
AppointmentId = 1,
Text = "Website Re-Design Plan",
StartDate = "2021-04-26T16:30:00.000Z",
EndDate = "2021-04-26T18:30:00.000Z"
},
new Appointment {
AppointmentId = 2,
Text = "Book Flights to San Fran for Sales Trip",
StartDate = "2021-04-26T19:00:00.000Z",
EndDate = "2021-04-26T20:00:00.000Z",
AllDay = true
},
new Appointment {
AppointmentId = 3,
Text = "Install New Router in Dev Room",
StartDate = "2021-04-26T21:30:00.000Z",
EndDate = "2021-04-26T22:30:00.000Z"
},
new Appointment {
AppointmentId = 4,
Text = "Approve Personal Computer Upgrade Plan",
StartDate = "2021-04-27T17:00:00.000Z",
EndDate = "2021-04-27T18:00:00.000Z"
},
new Appointment {
AppointmentId = 5,
Text = "Final Budget Review",
StartDate = "2021-04-27T19:00:00.000Z",
EndDate = "2021-04-27T20:35:00.000Z"
},
new Appointment {
AppointmentId = 6,
Text = "New Brochures",
StartDate = "2021-04-27T21:30:00.000Z",
EndDate = "2021-04-27T22:45:00.000Z"
},
new Appointment {
AppointmentId = 7,
Text = "Install New Database",
StartDate = "2021-04-28T16:45:00.000Z",
EndDate = "2021-04-28T18:15:00.000Z"
},
new Appointment {
AppointmentId = 8,
Text = "Approve New Online Marketing Strategy",
StartDate = "2021-04-28T19:00:00.000Z",
EndDate = "2021-04-28T21:00:00.000Z"
},
new Appointment {
AppointmentId = 9,
Text = "Upgrade Personal Computers",
StartDate = "2021-04-28T22:15:00.000Z",
EndDate = "2021-04-28T23:30:00.000Z"
},
new Appointment {
AppointmentId = 10,
Text = "Customer Workshop",
StartDate = "2021-04-29T18:00:00.000Z",
EndDate = "2021-04-29T19:00:00.000Z",
AllDay = true
},
new Appointment {
AppointmentId = 11,
Text = "Prepare 2021 Marketing Plan",
StartDate = "2021-04-29T18:00:00.000Z",
EndDate = "2021-04-29T20:30:00.000Z"
},
new Appointment {
AppointmentId = 12,
Text = "Brochure Design Review",
StartDate = "2021-04-29T21:00:00.000Z",
EndDate = "2021-04-29T22:30:00.000Z"
},
new Appointment {
AppointmentId = 13,
Text = "Create Icons for Website",
StartDate = "2021-04-30T17:00:00.000Z",
EndDate = "2021-04-30T18:30:00.000Z"
},
new Appointment {
AppointmentId = 14,
Text = "Upgrade Server Hardware",
StartDate = "2021-04-30T21:30:00.000Z",
EndDate = "2021-04-30T23:00:00.000Z"
},
new Appointment {
AppointmentId = 15,
Text = "Submit New Website Design",
StartDate = "2021-04-30T23:30:00.000Z",
EndDate = "2021-05-01T01:00:00.000Z"
},
new Appointment {
AppointmentId = 16,
Text = "Launch New Website",
StartDate = "2021-04-30T19:20:00.000Z",
EndDate = "2021-04-30T21:00:00.000Z"
}
};
}
}
#scroll, #list {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 240px;
}
.item {
color: var(--dx-color-text);
background-color: var(--dx-component-color-bg);
box-sizing: border-box;
padding: 10px 20px;
margin-bottom: 10px;
}
#scheduler {
margin-left: 270px;
}
.dx-draggable-source {
opacity: 0.5;
}
.dx-draggable-dragging > * {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 6px 8px rgba(0, 0, 0, 0.2);
}
Follow the steps below to implement this functionality:
-
Configure the Scheduler
In the appointmentDragging object, implement the onAdd function (in which you should add an appointment) and the onRemove function (in which you should delete an appointment and create a corresponding list item). -
Configure list items
Attach an instance of the Draggable component to every list item. The component has the data property that can contain custom data. In this demo, it is an appointment's subject. Implement the onDragStart function in which you should pass the subject to the Scheduler where it is used to add new appointments. -
Configure the list
Attach another Draggable instance to the list which only serves as the drop target. Implement the onDragStart function to ensure the list cannot be dragged. -
Add the controls to the same group
To enable drag and drop operations between the controls, assign the same value to the group property of the Scheduler's appointmentDragging object and both Draggable components.