Editing
Documentation
This example demonstrates appointment editing. You can add, update and delete appointments, as well as modify them by dragging or resizing. Toggle the check boxes under the Scheduler to define which editing features are enabled.
jQuery
AngularJS
Angular
ASP.NET MVC
ASP.NET Core
@model IEnumerable<DevExtreme.NETCore.Demos.Models.Appointment>
@(Html.DevExtreme().Scheduler()
.ID("scheduler")
.DataSource(Model)
.Views(new SchedulerViewType[] {
SchedulerViewType.Day,
SchedulerViewType.Week
})
.CurrentView(SchedulerViewType.Week)
.CurrentDate(new DateTime(2017, 5, 22))
.StartDayHour(9)
.EndDayHour(19)
.Height(600)
.TextExpr("Text")
.StartDateExpr("StartDate")
.EndDateExpr("EndDate")
.AllDayExpr("AllDay")
.OnAppointmentAdded(@<text>
function(e) {
showToast("Added", e.appointmentData.Text, "success");
}
</text>)
.OnAppointmentUpdated(@<text>
function(e) {
showToast("Updated", e.appointmentData.Text, "info");
}
</text>)
.OnAppointmentDeleted(@<text>
function(e) {
showToast("Deleted", e.appointmentData.Text, "warning");
}
</text>)
)
<div class="options">
<div class="caption">Options</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.Text("Allow adding")
.Value(true)
.OnValueChanged(@<text>
function(data) {
getSchedulerInstance().option("editing.allowAdding", data.value);
}
</text>)
)
</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.Text("Allow deleting")
.Value(true)
.OnValueChanged(@<text>
function(data) {
getSchedulerInstance().option("editing.allowDeleting", data.value);
}
</text>)
)
</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.Text("Allow updating")
.Value(true)
.OnValueChanged(@<text>
function(data) {
var value = data.value;
getSchedulerInstance().option("editing.allowUpdating", value);
$("#allow-resizing").dxCheckBox("instance").option("disabled", !value);
$("#allow-dragging").dxCheckBox("instance").option("disabled", !value);
}
</text>)
)
</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.ID("allow-resizing")
.Text("Allow resizing")
.Value(true)
.OnValueChanged(@<text>
function(data) {
getSchedulerInstance().option("editing.allowResizing", data.value);
}
</text>)
)
</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.ID("allow-dragging")
.Text("Allow dragging")
.Value(true)
.OnValueChanged(@<text>
function(data) {
getSchedulerInstance().option("editing.allowDragging", data.value);
}
</text>)
)
</div>
</div>
<script>
function getSchedulerInstance() {
return $("#scheduler").dxScheduler("instance");
}
function showToast(event, value, type) {
DevExpress.ui.notify(event + " \"" + value + "\"" + " task", type, 800);
}
</script>
using DevExtreme.NETCore.Demos.Models.SampleData;
using DevExtreme.NETCore.Demos.ViewModels;
using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.NETCore.Demos.Controllers {
public class SchedulerController : Controller {
public ActionResult Editing() {
return View(SampleData.Appointments);
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using Newtonsoft.Json;
namespace DevExtreme.NETCore.Demos.Models {
public class Appointment {
[JsonProperty(PropertyName = "AppointmentId")]
public int AppointmentId { get; set; }
[JsonProperty(PropertyName = "Text")]
public string Text { get; set; }
[JsonProperty(PropertyName = "Description")]
public string Description { get; set; }
[JsonProperty(PropertyName = "StartDate")]
public DateTime StartDate { get; set; }
[JsonProperty(PropertyName = "EndDate")]
public DateTime EndDate { get; set; }
[JsonProperty(PropertyName = "AllDay")]
public bool AllDay { get; set; }
[JsonProperty(PropertyName = "RecurrenceRule")]
public string RecurrenceRule { get; set; }
}
}
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.NETCore.Demos.Models.SampleData {
public partial class SampleData {
public static List<Appointment> Appointments {
get {
return new List<Appointment> {
new Appointment {
AppointmentId = 1,
Text = "Website Re-Design Plan",
StartDate = new DateTime(2017, 5, 22, 9, 30, 0),
EndDate = new DateTime(2017, 5, 22, 11, 30, 0)
},
new Appointment {
AppointmentId = 2,
Text = "Book Flights to San Fran for Sales Trip",
StartDate = new DateTime(2017, 5, 22, 12, 0, 0),
EndDate = new DateTime(2017, 5, 22, 13, 0, 0),
AllDay = true
},
new Appointment {
AppointmentId = 3,
Text = "Install New Router in Dev Room",
StartDate = new DateTime(2017, 5, 22, 14, 30, 0),
EndDate = new DateTime(2017, 5, 22, 15, 30, 0)
},
new Appointment {
AppointmentId = 4,
Text = "Approve Personal Computer Upgrade Plan",
StartDate = new DateTime(2017, 5, 23, 10, 0, 0),
EndDate = new DateTime(2017, 5, 23, 11, 0, 0)
},
new Appointment {
AppointmentId = 5,
Text = "Final Budget Review",
StartDate = new DateTime(2017, 5, 23, 12, 0, 0),
EndDate = new DateTime(2017, 5, 23, 13, 35, 0)
},
new Appointment {
AppointmentId = 6,
Text = "New Brochures",
StartDate = new DateTime(2017, 5, 23, 14, 30, 0),
EndDate = new DateTime(2017, 5, 23, 15, 45, 0)
},
new Appointment {
AppointmentId = 7,
Text = "Install New Database",
StartDate = new DateTime(2017, 5, 24, 9, 45, 0),
EndDate = new DateTime(2017, 5, 24, 11, 15, 0)
},
new Appointment {
AppointmentId = 8,
Text = "Approve New Online Marketing Strategy",
StartDate = new DateTime(2017, 5, 24, 12, 0, 0),
EndDate = new DateTime(2017, 5, 24, 14, 0, 0)
},
new Appointment {
AppointmentId = 9,
Text = "Upgrade Personal Computers",
StartDate = new DateTime(2017, 5, 24, 15, 15, 0),
EndDate = new DateTime(2017, 5, 24, 16, 30, 0)
},
new Appointment {
AppointmentId = 10,
Text = "Customer Workshop",
StartDate = new DateTime(2017, 5, 25, 11, 0, 0),
EndDate = new DateTime(2017, 5, 25, 12, 0, 0),
AllDay = true
},
new Appointment {
AppointmentId = 11,
Text = "Prepare 2015 Marketing Plan",
StartDate = new DateTime(2017, 5, 25, 11, 0, 0),
EndDate = new DateTime(2017, 5, 25, 13, 30, 0)
},
new Appointment {
AppointmentId = 12,
Text = "Brochure Design Review",
StartDate = new DateTime(2017, 5, 25, 14, 0, 0),
EndDate = new DateTime(2017, 5, 25, 15, 30, 0)
},
new Appointment {
AppointmentId = 13,
Text = "Create Icons for Website",
StartDate = new DateTime(2017, 5, 26, 10, 0, 0),
EndDate = new DateTime(2017, 5, 26, 11, 30, 0)
},
new Appointment {
AppointmentId = 14,
Text = "Upgrade Server Hardware",
StartDate = new DateTime(2017, 5, 26, 14, 30, 0),
EndDate = new DateTime(2017, 5, 26, 16, 0, 0)
},
new Appointment {
AppointmentId = 15,
Text = "Submit New Website Design",
StartDate = new DateTime(2017, 5, 26, 16, 30, 0),
EndDate = new DateTime(2017, 5, 26, 18, 0, 0)
},
new Appointment {
AppointmentId = 16,
Text = "Launch New Website",
StartDate = new DateTime(2017, 5, 26, 12, 20, 0),
EndDate = new DateTime(2017, 5, 26, 14, 0, 0)
}
};
}
}
}
}
.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
margin-top: 20px;
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option {
margin-top: 10px;
display: inline-block;
width: 19%;
}