Simple Array

Documentation

In this demo, the Scheduler widget visualizes data stored in an in-memory array. The widget is bound to this array using the dataSource option. Note that object structure complies with the Default Item Structure, that is, each object has the text, startDate and endDate fields.

Prev Demo Next Demo

jQuery

AngularJS

Angular

Vue

React

ASP.NET MVC

ASP.NET Core

@(Html.DevExtreme().Scheduler() .ID("scheduler") .DataSource(new JS("appointments")) .Views(new SchedulerViewType[] { SchedulerViewType.Week, SchedulerViewType.Month }) .CurrentView(SchedulerViewType.Week) .CurrentDate(new DateTime(2017, 5, 25)) .StartDayHour(9) .Height(600) ) <script src="~/Scripts/data/appointments.js"></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 SimpleArray() { return View(); } } }

var appointments = [ { "text": "Website Re-Design Plan", "startDate": "2017-05-22T06:30:00.000Z", "endDate": "2017-05-22T08:30:00.000Z" }, { "text": "Book Flights to San Fran for Sales Trip", "startDate": "2017-05-22T09:00:00.000Z", "endDate": "2017-05-22T10:00:00.000Z", "allDay": true }, { "text": "Install New Router in Dev Room", "startDate": "2017-05-22T11:30:00.000Z", "endDate": "2017-05-22T12:30:00.000Z" }, { "text": "Approve Personal Computer Upgrade Plan", "startDate": "2017-05-23T07:00:00.000Z", "endDate": "2017-05-23T08:00:00.000Z" }, { "text": "Final Budget Review", "startDate": "2017-05-23T09:00:00.000Z", "endDate": "2017-05-23T10:35:00.000Z" }, { "text": "New Brochures", "startDate": "2017-05-23T11:30:00.000Z", "endDate": "2017-05-23T12:45:00.000Z" }, { "text": "Install New Database", "startDate": "2017-05-24T06:45:00.000Z", "endDate": "2017-05-24T08:15:00.000Z" }, { "text": "Approve New Online Marketing Strategy", "startDate": "2017-05-24T09:00:00.000Z", "endDate": "2017-05-24T11:00:00.000Z" }, { "text": "Upgrade Personal Computers", "startDate": "2017-05-24T12:15:00.000Z", "endDate": "2017-05-24T13:30:00.000Z" }, { "text": "Customer Workshop", "startDate": "2017-05-25T08:00:00.000Z", "endDate": "2017-05-25T09:00:00.000Z", "allDay": true }, { "text": "Prepare 2015 Marketing Plan", "startDate": "2017-05-25T08:00:00.000Z", "endDate": "2017-05-25T10:30:00.000Z" }, { "text": "Brochure Design Review", "startDate": "2017-05-25T11:00:00.000Z", "endDate": "2017-05-25T12:30:00.000Z" }, { "text": "Create Icons for Website", "startDate": "2017-05-26T07:00:00.000Z", "endDate": "2017-05-26T08:30:00.000Z" }, { "text": "Upgrade Server Hardware", "startDate": "2017-05-26T11:30:00.000Z", "endDate": "2017-05-26T13:00:00.000Z" }, { "text": "Submit New Website Design", "startDate": "2017-05-26T13:30:00.000Z", "endDate": "2017-05-26T15:00:00.000Z" }, { "text": "Launch New Website", "startDate": "2017-05-26T09:20:00.000Z", "endDate": "2017-05-26T11:00:00.000Z" }];