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).
<div class="view-type"> <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> @(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") .AllDayExpr("AllDay") .RecurrenceRuleExpr("RecurrenceRule") .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"> <h4>Editing Options</h4> @(Html.DevExtreme().CheckBox() .Text("Allow adding") .Value(true) .OnValueChanged(@<text> function(data) { getSchedulerInstance().option("editing.allowAdding", data.value); } </text>) ) @(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>) ) @(Html.DevExtreme().CheckBox() .Text("Allow deleting") .Value(true) .OnValueChanged(@<text> function(data) { getSchedulerInstance().option("editing.allowDeleting", data.value); } </text>) ) @(Html.DevExtreme().CheckBox() .ID("allow-resizing") .Text("Allow resizing") .Value(true) .OnValueChanged(@<text> function(data) { getSchedulerInstance().option("editing.allowResizing", data.value); } </text>) ) @(Html.DevExtreme().CheckBox() .ID("allow-dragging") .Text("Allow dragging") .Value(true) .OnValueChanged(@<text> function(data) { getSchedulerInstance().option("editing.allowDragging", data.value); } </text>) ) </div> <script> function getSchedulerInstance() { return $("#scheduler").dxScheduler("instance"); } </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 Overview() { return View(); } } }
using System; using System.Collections.Generic; using System.Linq; using Microsoft.AspNetCore.Mvc; using DevExtreme.NETCore.Demos.Models; using Microsoft.AspNetCore.Http; using Microsoft.Extensions.Caching.Memory; using DevExtreme.AspNet.Mvc; using DevExtreme.AspNet.Data; using Newtonsoft.Json; namespace DevExtreme.NETCore.Demos.Controllers.ApiControllers { [Route("api/[controller]")] public class SchedulerDataController : Controller { InMemoryAppointmentsDataContext _data; public SchedulerDataController(IHttpContextAccessor httpContextAccessor, IMemoryCache memoryCache) { _data = new InMemoryAppointmentsDataContext(httpContextAccessor, memoryCache); } [HttpGet] public object Get(DataSourceLoadOptions loadOptions) { return DataSourceLoader.Load(_data.Appointments, loadOptions); } [HttpPost] public IActionResult Post(string values) { var newAppointment = new Appointment(); JsonConvert.PopulateObject(values, newAppointment); if(!TryValidateModel(newAppointment)) return BadRequest(ModelState.GetFullErrorMessage()); _data.Appointments.Add(newAppointment); _data.SaveChanges(); return Ok(); } [HttpPut] public IActionResult Put(int key, string values) { var appointment = _data.Appointments.First(a => a.AppointmentId == key); JsonConvert.PopulateObject(values, appointment); if(!TryValidateModel(appointment)) return BadRequest(ModelState.GetFullErrorMessage()); _data.SaveChanges(); return Ok(); } [HttpDelete] public void Delete(int 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.NETCore.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.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", 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 Microsoft.AspNetCore.Http; using Microsoft.Extensions.Caching.Memory; using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Models { public class InMemoryAppointmentsDataContext { IHttpContextAccessor _contextAccessor; IMemoryCache _memoryCache; public InMemoryAppointmentsDataContext(IHttpContextAccessor contextAccessor, IMemoryCache memoryCache) { _contextAccessor = contextAccessor; _memoryCache = memoryCache; } public ICollection<Appointment> Appointments { get { var session = _contextAccessor.HttpContext.Session; var key = session.Id + "_Appointments"; if(_memoryCache.Get(key) == null) { _memoryCache.Set<ICollection<Appointment>>(key, SampleData.SampleData.Appointments, new MemoryCacheEntryOptions { SlidingExpiration = TimeSpan.FromMinutes(10) }); session.SetInt32("dirty", 1); } return _memoryCache.Get<ICollection<Appointment>>(key); } } public void SaveChanges() { foreach(var appointment in Appointments.Where(a => a.AppointmentId == 0)) { appointment.AppointmentId = Appointments.Max(a => a.AppointmentId) + 1; } } } }
.options { margin-top: 25px; } .options > .dx-checkbox { margin-right: 20px; } .options > h4, .view-type { margin-bottom: 10px; } .view-type > span { position: relative; top: 2px; margin-right: 10px; } .view-type > .dx-selectbox { display: inline-block; vertical-align: middle; }