Cell Templates
Documentation
This demo illustrates the ability of the Scheduler to customize the appearance of its cells. For this purpose the resourceCellTemplate and dataCellTemplate options are utilized.
jQuery
AngularJS
Angular
ASP.NET MVC
ASP.NET Core
@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("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) {
var day = date.getDay();
return day === 0 || day === 6;
}
function getCurrentTraining(index, employeeID) {
var currentTraining,
result = (index + employeeID) % 3;
switch(result) {
case 0:
currentTraining = "abs-background";
break;
case 1:
currentTraining = "step-background";
break;
case 2:
currentTraining = "fitball-background";
break;
default:
currentTraining = "";
}
return currentTraining;
}
function dataCellTemplate(cellData, index, container) {
var employeeID = cellData.groups.EmployeeID,
currentTraining = getCurrentTraining(index, employeeID);
if(isWeekEnd(cellData.startDate)) {
container.addClass("employee-weekend-" + employeeID);
}
return $("<div>")
.addClass("day-cell")
.addClass(currentTraining)
.addClass("employee-" + employeeID)
.text(cellData.text);
}
</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 CellTemplates() {
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-date-table-other-month.dx-scheduler-date-table-cell {
opacity: 1;
color: rgba(0, 0, 0, 0.3);
}
.dx-scheduler-group-header-content {
position: relative;
}
.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;
font-size: 28px;
font-weight: normal;
font-family: 'Helvetica Neue', 'Segoe UI', Helvetica, Verdana, sans-serif;
}
.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: 60px;
background-position: center bottom;
background-repeat: no-repeat;
}
.day-cell.employee-1{
background-color: rgba(86, 202, 133, 0.1);
}
.day-cell.employee-2{
background-color: rgba(255, 151, 71, 0.1);
}
.employee-weekend-1{
background-color: rgba(86, 202, 133, 0.1);
}
.employee-weekend-2{
background-color: rgba(255, 151, 71, 0.1);
}
.abs-background{
background-image: url("../../images/gym/icon-abs.png");
}
.step-background{
background-image: url("../../images/gym/icon-step.png");
}
.fitball-background{
background-image: url("../../images/gym/icon-fitball.png");
}