Your search did not match any results.

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.

Backend API
@model IEnumerable<DevExtreme.MVC.Demos.Models.WorkoutAppointment> @(Html.DevExtreme().Scheduler() .DataSource(Model) .TimeZone("America/Los_Angeles") .TextExpr("Text") .StartDateExpr("StartDate") .EndDateExpr("EndDate") .Views(new[] { SchedulerViewType.Month }) .CurrentView(SchedulerViewType.Month) .CurrentDate(new DateTime(2021, 6, 2, 11, 30, 0)) .FirstDayOfWeek(FirstDayOfWeek.Monday) .StartDayHour(8) .EndDayHour(19) .ShowAllDayPanel(false) .Height(600) .Groups(new[] { "EmployeeID" }) .Resources(res => { res.Add() .FieldExpr("EmployeeID") .ColorExpr("Color") .DisplayExpr("Text") .ValueExpr("Id") .AllowMultiple(false) .Label("Employee") .DataSource(new[] { 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("dataCellTemplate")) .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) { let day = date.getDay(); return day === 0 || day === 6; } function getCurrentTraining(date, employeeID) { let result = (date + employeeID) % 3; let currentTraining = "training-background-" + result; return currentTraining; } function dataCellTemplate(cellData, index, container) { let employeeID = cellData.groups.EmployeeID; let currentTraining = getCurrentTraining(cellData.startDate.getDate(), employeeID); let 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') ); } </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 WorkoutAppointment : Appointment { public int EmployeeID { get; set; } } }
using System; using System.Collections.Generic; namespace DevExtreme.MVC.Demos.Models.SampleData { public partial class SampleData { public static readonly IEnumerable<WorkoutAppointment> Workouts = new[] { new WorkoutAppointment { Text = "Helen", EmployeeID = 2, StartDate = "2021-06-01T16:30:00.000Z", EndDate = "2021-06-01T18:30:00.000Z" }, new WorkoutAppointment { Text = "Helen", EmployeeID = 2, StartDate = "2021-06-10T16:30:00.000Z", EndDate = "2021-06-11T18:30:00.000Z" }, new WorkoutAppointment { Text = "Alex", EmployeeID = 1, StartDate = "2021-06-02T16:30:00.000Z", EndDate = "2021-06-02T18:30:00.000Z" }, new WorkoutAppointment { Text = "Alex", EmployeeID = 1, StartDate = "2021-06-11T19:00:00.000Z", EndDate = "2021-06-11T20:00:00.000Z" }, new WorkoutAppointment { Text = "Alex", EmployeeID = 2, StartDate = "2021-06-16T16:30:00.000Z", EndDate = "2021-06-16T18:30:00.000Z" }, new WorkoutAppointment { Text = "Stan", EmployeeID = 1, StartDate = "2021-06-07T16:30:00.000Z", EndDate = "2021-06-07T18:30:00.000Z" }, new WorkoutAppointment { Text = "Stan", EmployeeID = 1, StartDate = "2021-06-28T16:30:00.000Z", EndDate = "2021-06-28T18:30:00.000Z" }, new WorkoutAppointment { Text = "Stan", EmployeeID = 1, StartDate = "2021-06-30T16:30:00.000Z", EndDate = "2021-06-30T18:30:00.000Z" }, new WorkoutAppointment { Text = "Rachel", EmployeeID = 2, StartDate = "2021-06-04T16:30:00.000Z", EndDate = "2021-06-04T18:30:00.000Z" }, new WorkoutAppointment { Text = "Rachel", EmployeeID = 2, StartDate = "2021-06-07T16:30:00.000Z", EndDate = "2021-06-07T18:30:00.000Z", }, new WorkoutAppointment { Text = "Rachel", EmployeeID = 1, StartDate = "2021-06-21T16:30:00.000Z", EndDate = "2021-06-21T16:30:00.000Z" }, new WorkoutAppointment { Text = "Kelly", EmployeeID = 2, StartDate = "2021-06-15T16:30:00.000Z", EndDate = "2021-06-15T18:30:00.000Z" }, new WorkoutAppointment { Text = "Kelly", EmployeeID = 2, StartDate = "2021-06-29T16:30:00.000Z", EndDate = "2021-06-29T18:30:00.000Z" } }; } }
.dx-scheduler-group-header, .dx-scheduler-date-table-cell { position: relative; } .dx-scheduler-date-table-other-month.dx-scheduler-date-table-cell { opacity: 1; color: rgba(0, 0, 0, 0.3); } .dx-scheduler-date-table-cell .dx-template-wrapper { position: absolute; height: 100%; width: 100%; padding-right: 6px; } .avatar { width: 155px; float: left; overflow: hidden; position: relative; height: 125px; } .name { position: absolute; bottom: 0; left: 0; width: 100%; } .name h2 { color: #fff; font-size: 28px; text-align: left; padding: 0 0 5px 175px; margin: 0; } .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; } .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"); }