Your search did not match any results.
Scheduler

Overview

DevExtreme ASP.NET MVC Scheduler is a jQuery-powered control for managing events and appointments. Its key features include data binding to Web API and MVC controllers, integration with online services, appointment editing and grouping, time zones support, and many more. You can choose between Razor C# and Razor VB syntax and use lambda expressions when configuring it.

@model IEnumerable<DevExtreme.MVC.Demos.Models.Workout> @(Html.DevExtreme().Scheduler() .DataSource(Model) .TextExpr("Text") .StartDateExpr("StartDate") .EndDateExpr("EndDate") .Views(new SchedulerViewType[] { SchedulerViewType.Month }) .CurrentView(SchedulerViewType.Month) .CurrentDate(new DateTime(2016, 8, 2, 11, 30, 0)) .FirstDayOfWeek(FirstDayOfWeek.Monday) .StartDayHour(8) .EndDayHour(19) .ShowAllDayPanel(false) .Height(600) .Groups(new string[] { "EmployeeID" }) .Resources(res => { res.Add() .FieldExpr("EmployeeID") .ColorExpr("Color") .DisplayExpr("Text") .ValueExpr("Id") .AllowMultiple(false) .Label("Employee") .DataSource(new object[] { new { Id = 1, Text = "John Heart", Color = "#56ca85", Avatar = "../../Content/images/gym/coach-man.png", Age = 27, Discipline = "ABS, Fitball, StepFit" }, new { Id = 2, Text = "Sandra Johnson", Color = "#ff9747", Avatar = "../../Content/images/gym/coach-woman.png", Age = 25, Discipline = "ABS, Fitball, StepFit" } }); }) .DataCellTemplate(new JS(@" function dataCellTemplate(cellData, index, container) { var employeeID = cellData.groups.EmployeeID, currentTraining = getCurrentTraining(cellData.startDate.getDate(), employeeID); var wrapper = $('<div>') .toggleClass('employee-weekend-' + employeeID, isWeekEnd(cellData.startDate)).appendTo(container) .addClass('employee-' + employeeID) .addClass('dx-template-wrapper'); wrapper.append($('<div>') .text(cellData.text) .addClass(currentTraining) .addClass('day-cell') ); }")) .ResourceCellTemplate(@<text> <div> <div class="name" style="background-color: <%= data.Color %>;"> <h2><%= data.Text %></h2> </div> <div class="avatar" title="<%= data.Text %>"> <img src="<%= data.Avatar %>" alt=""/> </div> <div class="info" style="color: <%= data.Color %>;"> Age: <%= data.Age %> <br /> <b><%= data.Discipline %></b> </div> </div> </text>) ) <script> function isWeekEnd(date) { var day = date.getDay(); return day === 0 || day === 6; } function getCurrentTraining(date, employeeID) { var result = (date + employeeID) % 3, currentTraining = "training-background-" + result; return currentTraining; } </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(SampleData.Workouts); } } }
using System; namespace DevExtreme.MVC.Demos.Models { public class Workout { public string Text { get; set; } public int EmployeeID { get; set; } public DateTime StartDate { get; set; } public DateTime EndDate { get; set; } } }
using System; using System.Collections.Generic; namespace DevExtreme.MVC.Demos.Models.SampleData { public partial class SampleData { public static List<Workout> Workouts { get { return new List<Workout> { new Workout { Text = "Helen", EmployeeID = 2, StartDate = new DateTime(2016, 8, 2, 9, 30, 0), EndDate = new DateTime(2016, 8, 2, 11, 30, 0) }, new Workout { Text = "Helen", EmployeeID = 2, StartDate = new DateTime(2016, 8, 11, 9, 30, 0), EndDate = new DateTime(2016, 8, 12, 11, 30, 0) }, new Workout { Text = "Alex", EmployeeID = 1, StartDate = new DateTime(2016, 8, 3, 9, 30, 0), EndDate = new DateTime(2016, 8, 3, 11, 30, 0) }, new Workout { Text = "Alex", EmployeeID = 1, StartDate = new DateTime(2016, 8, 12, 12, 0, 0), EndDate = new DateTime(2016, 8, 12, 13, 0, 0) }, new Workout { Text = "Alex", EmployeeID = 2, StartDate = new DateTime(2016, 8, 17, 9, 30, 0), EndDate = new DateTime(2016, 8, 17, 11, 30, 0) }, new Workout { Text = "Stan", EmployeeID = 1, StartDate = new DateTime(2016, 8, 8, 9, 30, 0), EndDate = new DateTime(2016, 8, 8, 11, 30, 0) }, new Workout { Text = "Stan", EmployeeID = 1, StartDate = new DateTime(2016, 8, 29, 9, 30, 0), EndDate = new DateTime(2016, 8, 29, 11, 30, 0) }, new Workout { Text = "Stan", EmployeeID = 1, StartDate = new DateTime(2016, 8, 31, 9, 30, 0), EndDate = new DateTime(2016, 8, 31, 11, 30, 0) }, new Workout { Text = "Rachel", EmployeeID = 2, StartDate = new DateTime(2016, 8, 5, 9, 30, 0), EndDate = new DateTime(2016, 8, 5, 11, 30, 0) }, new Workout { Text = "Rachel", EmployeeID = 2, StartDate = new DateTime(2016, 8, 8, 9, 30, 0), EndDate = new DateTime(2016, 8, 8, 11, 30, 0) }, new Workout { Text = "Rachel", EmployeeID = 1, StartDate = new DateTime(2016, 8, 22, 9, 30, 0), EndDate = new DateTime(2016, 8, 22, 11, 30, 0) }, new Workout { Text = "Kelly", EmployeeID = 2, StartDate = new DateTime(2016, 8, 16, 9, 30, 0), EndDate = new DateTime(2016, 8, 16, 11, 30, 0) }, new Workout { Text = "Kelly", EmployeeID = 2, StartDate = new DateTime(2016, 8, 30, 9, 30, 0), EndDate = new DateTime(2016, 8, 30, 11, 30, 0) } }; } } } }
.dx-scheduler-group-header { position: relative; } .dx-scheduler-date-table-other-month.dx-scheduler-date-table-cell { opacity: 1; color: rgba(0, 0, 0, 0.3); } .dx-template-wrapper { position: relative; height: 100%; } .avatar { width: 155px; float: left; overflow: hidden; position: relative; height: 125px; } .name { position: absolute; bottom: 0; left: 0; width: 100%; } .name h2 { color: #fff; text-align: left; padding: 0 0 5px 175px; margin: 0; } .dx-theme-material .name h2 { font-size: 28px; } .info { width: auto; text-align: left; height: 100%; font-size: 11pt; font-weight: normal; padding: 25px 20px; color: #707070; } .dx-color-scheme-contrast .info { color: #FFF; } .userInfo div { margin: 20px; } .day-cell { width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; } .employee-1 { background-color: rgba(86, 202, 133, 0.1); } .employee-2 { background-color: rgba(255, 151, 71, 0.1); } .employee-weekend-1 { background-color: rgba(86, 202, 133, 0.2); } .employee-weekend-2 { background-color: rgba(255, 151, 71, 0.2); } .training-background-0 { background-image: url("../../images/gym/icon-abs.png"); } .training-background-1 { background-image: url("../../images/gym/icon-step.png"); } .training-background-2 { background-image: url("../../images/gym/icon-fitball.png"); }