Your search did not match any results.
Scheduler

Overview

Documentation
The Scheduler widget allows you to replicate the functionality found in today’s most popular web-based calendar/scheduling apps. The widget displays appointments across the timetable and allows a user to quickly change between different timetable views using the View Selector and navigate to the required date using the Date Navigator. The widget also allows a user to create, modify and delete appointments. In this demo, appointments are associated with resources (based on resource association, appointments are colored differently).
@(Html.DevExtreme().Scheduler() .ID("scheduler") .DataSource(d => d.WebApi().Controller("SchedulerData").Key("AppointmentId")) .Views(new SchedulerViewType[] { SchedulerViewType.Agenda, SchedulerViewType.Month, SchedulerViewType.Week, SchedulerViewType.WorkWeek, SchedulerViewType.Day }) .CurrentView(SchedulerViewType.WorkWeek) .CurrentDate(new DateTime(2015, 5, 25)) .UseDropDownViewSwitcher(false) .FirstDayOfWeek(FirstDayOfWeek.Monday) .StartDayHour(8) .EndDayHour(19) .Width("100%") .Height(600) .TextExpr("Text") .StartDateExpr("StartDate") .EndDateExpr("EndDate") .RecurrenceRuleExpr("RecurrenceRule") .AllDayExpr("AllDay") .DescriptionExpr("Description") .Resources(res => { res.Add() .FieldExpr("OwnerId") .AllowMultiple(true) .Label("Owner") .DataSource(new object[] { new { id = 1, text = "Samantha Bright", color = "#cb6bb2" }, new { id = 2, text = "John Heart", color = "#56ca85" }, new { id = 3, text = "Todd Hoffman", color = "#1e90ff" }, new { id = 4, text = "Sandra Johnson", color = "#ff9747" } }); }) ) <div class="options"> <div class="caption">Options</div> <div class="option switcher-mode"> <span>View Switcher Mode</span> @(Html.DevExtreme().SelectBox() .DataSource(new string[] { "Tabs", "Drop-Down Menu" }) .Width(200) .Value("Tabs") .OnValueChanged(@<text> function(data) { getSchedulerInstance().option("useDropDownViewSwitcher", data.value === "Drop-Down Menu"); } </text>) ) </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 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() .Text("Allow deleting") .Value(true) .OnValueChanged(@<text> function(data) { getSchedulerInstance().option("editing.allowDeleting", data.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"); } </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 Overview() { return View(); } } }
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.MVC.Demos.Models; using Newtonsoft.Json; using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Net.Http; using System.Net.Http.Formatting; using System.Web.Http; namespace DevExtreme.MVC.Demos.Controllers.ApiControllers { public class SchedulerDataController : ApiController { InMemoryAppointmentsDataContext _data = new InMemoryAppointmentsDataContext(); [HttpGet] public HttpResponseMessage Get(DataSourceLoadOptions loadOptions) { return Request.CreateResponse(DataSourceLoader.Load(_data.Appointments, loadOptions)); } [HttpPost] public HttpResponseMessage Post(FormDataCollection form) { var values = form.Get("values"); var newAppointment = new Appointment(); JsonConvert.PopulateObject(values, newAppointment); Validate(newAppointment); if(!ModelState.IsValid) return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState.GetFullErrorMessage()); _data.Appointments.Add(newAppointment); _data.SaveChanges(); return Request.CreateResponse(HttpStatusCode.Created); } [HttpPut] public HttpResponseMessage Put(FormDataCollection form) { var key = Convert.ToInt32(form.Get("key")); var values = form.Get("values"); var appointment = _data.Appointments.First(a => a.AppointmentId == key); JsonConvert.PopulateObject(values, appointment); Validate(appointment); if(!ModelState.IsValid) return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState.GetFullErrorMessage()); _data.SaveChanges(); return Request.CreateResponse(HttpStatusCode.OK); } [HttpDelete] public void Delete(FormDataCollection form) { var key = Convert.ToInt32(form.Get("key")); var appointment = _data.Appointments.First(a => a.AppointmentId == key); _data.Appointments.Remove(appointment); _data.SaveChanges(); } } }
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 int[] OwnerId { get; set; } public DateTime StartDate { get; set; } public DateTime EndDate { get; set; } public string RecurrenceRule { get; set; } public bool AllDay { get; set; } public string Description { get; set; } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.MVC.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", OwnerId = new int[] { 4 }, StartDate = new DateTime(2015, 5, 25, 9, 30, 0), EndDate = new DateTime(2015, 5, 25, 11, 30, 0) }, new Appointment { AppointmentId = 2, Text = "Book Flights to San Fran for Sales Trip", OwnerId = new int[] { 2 }, StartDate = new DateTime(2015, 5, 25, 12, 0, 0), EndDate = new DateTime(2015, 5, 25, 13, 0, 0), AllDay = true }, new Appointment { AppointmentId = 3, Text = "Install New Router in Dev Room", OwnerId = new int[] { 1 }, StartDate = new DateTime(2015, 5, 25, 14, 30, 0), EndDate = new DateTime(2015, 5, 25, 15, 30, 0) }, new Appointment { AppointmentId = 4, Text = "Approve Personal Computer Upgrade Plan", OwnerId = new int[] { 3 }, StartDate = new DateTime(2015, 5, 26, 10, 0, 0), EndDate = new DateTime(2015, 5, 26, 11, 0, 0) }, new Appointment { AppointmentId = 5, Text = "Final Budget Review", OwnerId = new int[] { 1 }, StartDate = new DateTime(2015, 5, 26, 12, 0, 0), EndDate = new DateTime(2015, 5, 26, 13, 35, 0) }, new Appointment { AppointmentId = 6, Text = "New Brochures", OwnerId = new int[] { 4 }, StartDate = new DateTime(2015, 5, 26, 14, 30, 0), EndDate = new DateTime(2015, 5, 26, 15, 45, 0) }, new Appointment { AppointmentId = 7, Text = "Install New Database", OwnerId = new int[] { 2 }, StartDate = new DateTime(2015, 5, 27, 9, 45, 0), EndDate = new DateTime(2015, 5, 27, 11, 15, 0) }, new Appointment { AppointmentId = 8, Text = "Approve New Online Marketing Strategy", OwnerId = new int[] { 3, 4 }, StartDate = new DateTime(2015, 5, 27, 12, 0, 0), EndDate = new DateTime(2015, 5, 27, 14, 0, 0) }, new Appointment { AppointmentId = 9, Text = "Upgrade Personal Computers", OwnerId = new int[] { 2 }, StartDate = new DateTime(2015, 5, 27, 15, 15, 0), EndDate = new DateTime(2015, 5, 27, 16, 30, 0) }, new Appointment { AppointmentId = 10, Text = "Customer Workshop", OwnerId = new int[] { 3 }, StartDate = new DateTime(2015, 5, 28, 11, 0, 0), EndDate = new DateTime(2015, 5, 28, 12, 0, 0), AllDay = true }, new Appointment { AppointmentId = 11, Text = "Prepare 2015 Marketing Plan", OwnerId = new int[] { 1, 3 }, StartDate = new DateTime(2015, 5, 28, 11, 0, 0), EndDate = new DateTime(2015, 5, 28, 13, 30, 0) }, new Appointment { AppointmentId = 12, Text = "Brochure Design Review", OwnerId = new int[] { 4 }, StartDate = new DateTime(2015, 5, 28, 14, 0, 0), EndDate = new DateTime(2015, 5, 28, 15, 30, 0) }, new Appointment { AppointmentId = 13, Text = "Create Icons for Website", OwnerId = new int[] { 3 }, StartDate = new DateTime(2015, 5, 29, 10, 0, 0), EndDate = new DateTime(2015, 5, 29, 11, 30, 0) }, new Appointment { AppointmentId = 14, Text = "Upgrade Server Hardware", OwnerId = new int[] { 4 }, StartDate = new DateTime(2015, 5, 29, 14, 30, 0), EndDate = new DateTime(2015, 5, 29, 16, 0, 0) }, new Appointment { AppointmentId = 15, Text = "Submit New Website Design", OwnerId = new int[] { 1 }, StartDate = new DateTime(2015, 5, 29, 16, 30, 0), EndDate = new DateTime(2015, 5, 29, 18, 0, 0) }, new Appointment { AppointmentId = 16, Text = "Launch New Website", OwnerId = new int[] { 2 }, StartDate = new DateTime(2015, 5, 29, 12, 20, 0), EndDate = new DateTime(2015, 5, 29, 14, 0, 0) }, new Appointment { AppointmentId = 17, Text = "Stand-up meeting", OwnerId = new int[] { 1, 2, 3, 4 }, StartDate = new DateTime(2015, 5, 25, 9, 0, 0), EndDate = new DateTime(2015, 5, 25, 9, 15, 0), RecurrenceRule = "FREQ=DAILY;BYDAY=MO,TU,WE,TH,FR;UNTIL=20150530" } }; } } } }
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace DevExtreme.MVC.Demos.Models { public class InMemoryAppointmentsDataContext { const string SessionKey = "3d3a745e-803e-49a8-989f-8dad7d5fdaa9"; public ICollection<Appointment> Appointments { get { var session = HttpContext.Current.Session; if(session[SessionKey] == null) session[SessionKey] = SampleData.SampleData.Appointments; return (ICollection<Appointment>)session[SessionKey]; } } public void SaveChanges() { foreach(var appointment in Appointments.Where(a => a.AppointmentId == 0)) { appointment.AppointmentId = Appointments.Max(a => a.AppointmentId) + 1; } } } }
.options { padding: 20px; background-color: #f5f5f5; margin-top: 20px; } .caption { font-size: 18px; font-weight: 500; } .option { margin-top: 10px; display: inline-block; width: 19%; } .switcher-mode { width: 100%; } .option > span { margin-right: 10px; } .option > .dx-selectbox { display: inline-block; vertical-align: middle; }