Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
@model IEnumerable<DevExtreme.MVC.Demos.Models.Appointment>
@(Html.DevExtreme().Scheduler()
.ID("scheduler")
.DataSource(Model)
.TimeZone("America/Los_Angeles")
.Views(new[] {
SchedulerViewType.Day,
SchedulerViewType.Week
})
.CurrentView(SchedulerViewType.Week)
.CurrentDate(new DateTime(2021, 4, 29))
.StartDayHour(9)
.EndDayHour(19)
.Height(600)
.Editing(editing => {
editing.AllowAdding(true);
editing.AllowDeleting(true);
editing.AllowUpdating(true);
editing.AllowResizing(true);
editing.AllowDragging(true);
})
.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="options-container">
<div class="option">
@(Html.DevExtreme().CheckBox()
.Text("Allow adding")
.Value(true)
.OnValueChanged(@<text>
function(e) {
getSchedulerInstance().option("editing.allowAdding", e.value);
}
</text>)
)
</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.Text("Allow deleting")
.Value(true)
.OnValueChanged(@<text>
function(e) {
getSchedulerInstance().option("editing.allowDeleting", e.value);
}
</text>)
)
</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.Text("Allow updating")
.Value(true)
.OnValueChanged(@<text>
function(e) {
getSchedulerInstance().option("editing.allowUpdating", e.value);
$("#allow-resizing").dxCheckBox("instance").option("disabled", !e.value);
$("#allow-dragging").dxCheckBox("instance").option("disabled", !e.value);
}
</text>)
)
</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.ID("allow-resizing")
.Text("Allow resizing")
.Value(true)
.OnValueChanged(@<text>
function(e) {
getSchedulerInstance().option("editing.allowResizing", e.value);
}
</text>)
)
</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.ID("allow-dragging")
.Text("Allow dragging")
.Value(true)
.OnValueChanged(@<text>
function(e) {
getSchedulerInstance().option("editing.allowDragging", e.value);
}
</text>)
)
</div>
</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.MVC.Demos.Models.SampleData;
using DevExtreme.MVC.Demos.ViewModels;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class SchedulerController : Controller {
public ActionResult Editing() {
return View(SampleData.Appointments);
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.MVC.Demos.Models {
public class Appointment {
public int AppointmentId { get; set; }
public string Text { get; set; }
public string Description { get; set; }
public string StartDate { get; set; }
public string EndDate { get; set; }
public bool AllDay { get; set; }
public string RecurrenceRule { get; set; }
public string RecurrenceException { get; set; }
}
public class DisableDatesAppointment {
public int AppointmentId { get; set; }
public string Text { get; set; }
public string Description { get; set; }
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
public bool AllDay { get; set; }
public string RecurrenceRule { get; set; }
public string RecurrenceException { get; set; }
}
}
using System;
using System.Collections.Generic;
namespace DevExtreme.MVC.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"
}
};
}
}
.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%;
}
.options-container {
display: flex;
align-items: center;
}
These operations raise events that you can handle with the following functions:
In this demo, we configured the handlers to display a toast message after a user performs an edit operation.
Users can edit appointment data in the appointment details form. To open it, they need to double-click the appointment. You can use the onAppointmentFormOpening function to customize the form.