<!DOCTYPE html>
<html>
<head>
<title>Row Header Columns (JavaScript Scheduler)</title>
<!-- head -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- demo stylesheet -->
<link type="text/css" rel="stylesheet" href="../helpers/demo.css?v=2020.1.4266" />
<link type="text/css" rel="stylesheet" href="../helpers/media/layout.css?v=2020.1.4266" />
<link type="text/css" rel="stylesheet" href="../helpers/media/elements.css?v=2020.1.4266" />
<!-- helper libraries -->
<script src="../helpers/jquery-1.12.2.min.js" type="text/javascript"></script>
<!-- daypilot libraries -->
<script src="../js/daypilot-all.min.js?v=2020.1.4266" type="text/javascript"></script>
<!-- daypilot themes -->
<link type="text/css" rel="stylesheet" href="../themes/areas.css?v=2020.1.4266" />
<link type="text/css" rel="stylesheet" href="../themes/month_white.css?v=2020.1.4266" />
<link type="text/css" rel="stylesheet" href="../themes/month_green.css?v=2020.1.4266" />
<link type="text/css" rel="stylesheet" href="../themes/month_transparent.css?v=2020.1.4266" />
<link type="text/css" rel="stylesheet" href="../themes/month_traditional.css?v=2020.1.4266" />
<link type="text/css" rel="stylesheet" href="../themes/navigator_8.css?v=2020.1.4266" />
<link type="text/css" rel="stylesheet" href="../themes/navigator_white.css?v=2020.1.4266" />
<link type="text/css" rel="stylesheet" href="../themes/calendar_transparent.css?v=2020.1.4266" />
<link type="text/css" rel="stylesheet" href="../themes/calendar_white.css?v=2020.1.4266" />
<link type="text/css" rel="stylesheet" href="../themes/calendar_green.css?v=2020.1.4266" />
<link type="text/css" rel="stylesheet" href="../themes/calendar_traditional.css?v=2020.1.4266" />
<link type="text/css" rel="stylesheet" href="../themes/scheduler_8.css?v=2020.1.4266" />
<link type="text/css" rel="stylesheet" href="../themes/scheduler_white.css?v=2020.1.4266" />
<link type="text/css" rel="stylesheet" href="../themes/scheduler_green.css?v=2020.1.4266" />
<link type="text/css" rel="stylesheet" href="../themes/scheduler_blue.css?v=2020.1.4266" />
<link type="text/css" rel="stylesheet" href="../themes/scheduler_traditional.css?v=2020.1.4266" />
<link type="text/css" rel="stylesheet" href="../themes/scheduler_transparent.css?v=2020.1.4266" />
<!-- /head -->
</head>
<body>
<!-- top -->
<div id="header">
<div class="bg-help">
<div class="inBox">
<h1 id="logo"><a href='https://javascript.daypilot.org/'>DayPilot Pro for JavaScript</a> » <a
href='https://javascript.daypilot.org/demo/'>Demo</a></h1>
<p id="claim">JavaScript Calendar/Scheduling Components.</p>
<hr class="hidden" />
</div>
</div>
</div>
<div id="download">
<div style="float:left; width: 100px;"><a
href="https://javascript.daypilot.org/files/daypilot-pro-javascript-trial-2020.1.4266.zip"
class="inline-btn track-download"><span>Download</span></a></div>
<div style="margin-left: 110px;">
<div>Download a trial version (1.1 MB).</div>
<div><a href="https://javascript.daypilot.org/files/daypilot-pro-javascript-trial-2020.1.4266.zip"
class="track-download">daypilot-pro-javascript-trial-2020.1.4266.zip</a></div>
</div>
</div>
<div id="main">
<div id="tabs">
<!-- tabs -->
<div class="tabs-items">
<a class='tab' href='../index.html'><span>Home</span></a>
<a class='tab' href='../calendar/index.html'><span>Calendar</span></a>
<a class='tab' href='../month/index.html'><span>Month</span></a>
<a class='tab selected' href='../scheduler/index.html'><span>Scheduler</span></a>
<a class='tab' href='../gantt/index.html'><span>Gantt</span></a>
<a class='tab' href='../kanban/index.html'><span>Kanban</span></a>
</div>
<div class="header">
<div class="bg-help">A Time Line for Multiple Resources</div>
</div>
<!-- /tabs -->
</div>
<div id="container">
<div id="left" class="menu">
<div>
<!-- menu -->
<div class="menu-title">
Scheduler Demos
<span class="menu-title-icon">˅</span>
</div>
<div class="menu-body">
<div class="header">Main</div>
<div>
<a href='index.html'><span>JavaScript Scheduler</span></a>
</div>
<div class="header">Themes</div>
<div>
<a href='themetransparent.html'><span>Transparent</span></a>
</div>
<div>
<a href='themewhite.html'><span>White</span></a>
</div>
<div>
<a href='themegreen.html'><span>Green</span></a>
</div>
<div>
<a href='theme8.html'><span>Theme 8</span></a>
</div>
<div>
<a href='themetraditional.html'><span>Traditional</span></a>
</div>
<div>
<a href='themeblue.html'><span>Blue</span></a>
</div>
<div class="header">Controls</div>
<div>
<a href='messagebar.html'><span>Message Bar</span></a>
</div>
<div class="header">Navigation</div>
<div>
<a href='navigator.html'><span>Navigator</span></a>
</div>
<div>
<a href='nextprevious.html'><span>Next/Previous Buttons</span></a>
</div>
<div class="header">Grid</div>
<div>
<a href='cellcustomization.html'><span>Cell Customization</span></a>
</div>
<div>
<a href='cellwidth.html'><span>Cell Width</span></a>
</div>
<div>
<a href='autocellwidth.html'><span>Auto Cell Width</span></a>
</div>
<div>
<a href='crosshair.html'><span>Crosshair</span></a>
</div>
<div>
<a href='cellsdisabled.html'><span>Disabled Cells</span></a>
</div>
<div>
<a href='unavailable.html'><span>Highlighting Unavailable Cells</span></a>
</div>
<div>
<a href='highlighting.html'><span>Highlighting Weekends</span></a>
</div>
<div>
<a href='infinite.html'><span>Infinite Scrolling</span></a>
</div>
<div>
<a href='multirange.html'><span>Multi-Range Selecting</span></a>
</div>
<div>
<a href='scrolling.html'><span>Scrolling</span></a>
</div>
<div>
<a href='snaptogrid.html'><span>Snap to Grid</span></a>
</div>
<div>
<a href='timerangeselecting.html'><span>Time Range Selecting</span></a>
</div>
<div class="header">Timeline</div>
<div>
<a href='timeheaderactiveareas.html'><span>Active Areas</span></a>
</div>
<div>
<a href='timeheaders.html'><span>Time Headers</span></a>
</div>
<div>
<a href='hide.html'><span>Hiding Weekends</span></a>
</div>
<div>
<a href='hidingnonbusiness.html'><span>Hiding Non-Business Hours</span></a>
</div>
<div>
<a href='separators.html'><span>Separators</span></a>
</div>
<div>
<a href='scalehours.html'><span>Scale: Hours</span></a>
</div>
<div>
<a href='scaledays.html'><span>Scale: Days</span></a>
</div>
<div>
<a href='scaleweeks.html'><span>Scale: Weeks</span></a>
</div>
<div>
<a href='scalemonths.html'><span>Scale: Months</span></a>
</div>
<div>
<a href='scaleyears.html'><span>Scale: Years</span></a>
</div>
<div>
<a href='scalecustom.html'><span>Scale: Custom</span></a>
</div>
<div class="header">Export</div>
<div>
<a href='exportsvg.html'><span>SVG Export</span></a>
</div>
<div>
<a href='exportpng.html'><span>PNG Export</span></a>
</div>
<div>
<a href='exportjpg.html'><span>JPEG Export</span></a>
</div>
<div>
<a href='exportprint.html'><span>Printing</span></a>
</div>
<div class="header">Gantt</div>
<div>
<a href='gantt.html'><span>Gantt</span></a>
</div>
<div class="header">API</div>
<div>
<a href='angular2.html'><span>Angular</span></a>
</div>
<div>
<a href='angularjs.html'><span>AngularJS</span></a>
</div>
<div>
<a href='angularjsctrlas.html'><span>AngularJS (Controller As)</span></a>
</div>
<div>
<a href='jquery.html'><span>jQuery</span></a>
</div>
<div>
<a href='vuejs.html'><span>Vue.js</span></a>
</div>
<div>
<a href='react.html'><span>React</span></a>
</div>
<div class="header">View Types</div>
<div>
<a href='timesheet.html'><span>Timesheet</span></a>
</div>
<div class="header">Events</div>
<div>
<a href='asyncvalidation.html'><span>Asynchronous Validation</span></a>
</div>
<div>
<a href='groupconcurrent.html'><span>Group Concurrent Events</span></a>
</div>
<div>
<a href='dynamic.html'><span>Dynamic Event Loading</span></a>
</div>
<div>
<a href='eventareas.html'><span>Event Active Areas</span></a>
</div>
<div>
<a href='eventcontainers.html'><span>Event Containers</span> <span
class="new">NEW</span></a>
</div>
<div>
<a href='eventmenu.html'><span>Event Context Menu</span></a>
</div>
<div>
<a href='eventcopying.html'><span>Event Copying</span></a>
</div>
<div>
<a href='eventcustomization.html'><span>Event Customization</span></a>
</div>
<div>
<a href='eventdeleting.html'><span>Event Deleting</span></a>
</div>
<div>
<a href='eventfiltering.html'><span>Event Filtering</span></a>
</div>
<div>
<a href='eventheight.html'><span>Event Height</span></a>
</div>
<div>
<a href='eventinlineediting.html'><span>Event Inline Editing</span></a>
</div>
<div>
<a href='eventlinks.html'><span>Event Links</span></a>
</div>
<div>
<a href='eventloading.html'><span>Event Loading</span></a>
</div>
<div>
<a href='eventmoving.html'><span>Event Moving</span></a>
</div>
<div>
<a href='eventmovingnonbusiness.html'><span>Event Moving (Non-Business)</span></a>
</div>
<div>
<a href='eventmovingtwoschedulers.html'><span>Event Moving between Schedulers</span></a>
</div>
<div>
<a href='eventmultimoving.html'><span>Event Multi-Moving</span></a>
</div>
<div>
<a href='eventmultiresizing.html'><span>Event Multi-Resizing</span></a>
</div>
<div>
<a href='eventmultiselecting.html'><span>Event Multi-Selecting</span></a>
</div>
<div>
<a href='eventoverlapping.html'><span>Event Overlapping</span></a>
</div>
<div>
<a href='eventphases.html'><span>Event Phases</span></a>
</div>
<div>
<a href='eventsearching.html'><span>Event Searching</span></a>
</div>
<div>
<a href='eventselecting.html'><span>Event Selecting</span></a>
</div>
<div>
<a href='eventstackinglineheight.html'><span>Event Stacking Line Height</span></a>
</div>
<div>
<a href='eventversions.html'><span>Event Versions</span></a>
</div>
<div>
<a href='external.html'><span>External Drag and Drop</span></a>
</div>
<div>
<a href='eventsjoint.html'><span>Joint Events</span></a>
</div>
<div>
<a href='milestones.html'><span>Milestones</span></a>
</div>
<div>
<a href='eventcomplete.html'><span>Percent Complete</span></a>
</div>
<div>
<a href='eventrealtime.html'><span>Real-Time Drag and Drop Indicators</span></a>
</div>
<div class="header">Rows</div>
<div>
<a href='roweventheight.html'><span>Custom Event Height</span></a>
</div>
<div>
<a href='treedynamic.html'><span>Dynamic Tree Loading</span></a>
</div>
<div>
<a href='rowprogressive.html'><span>Progressive Rendering</span></a>
</div>
<div>
<a href='rowsfrozen.html'><span>Frozen Rows</span> <span class="new">NEW</span></a>
</div>
<div>
<a href='tree.html'><span>Resource Tree</span></a>
</div>
<div>
<a href='resourceutilization.html'><span>Resource Utilization</span></a>
</div>
<div>
<a href='rowcreating.html'><span>Row Creating</span></a>
</div>
<div>
<a href='rowediting.html'><span>Row Editing</span></a>
</div>
<div>
<a href='rowfiltering.html'><span>Row Filtering</span></a>
</div>
<div>
<a href='rowheaderactiveareas.html'><span>Row Header Active Areas</span></a>
</div>
<div>
<a href='rowheadercolumns.html'><span>Row Header Columns</span> <span
class="new">NEW</span></a>
</div>
<div>
<a href='rowheaderhiding.html'><span>Row Header Hiding</span></a>
</div>
<div>
<a href='rowheaderscrolling.html'><span>Row Header Scrolling</span></a>
</div>
<div>
<a href='rowmoving.html'><span>Row Moving</span></a>
</div>
<div>
<a href='rowselecting.html'><span>Row Selecting</span></a>
</div>
<div>
<a href='rowsorting.html'><span>Row Sorting</span> <span class="new">NEW</span></a>
</div>
<div class="header">Localization</div>
<div>
<a href='localization.html'><span>Localization</span></a>
</div>
</div>
<!-- /menu -->
</div>
</div>
<div id="content">
<div>
<!-- /top -->
<div class="note"><b>Note:</b> Read more about <a
href="https://doc.daypilot.org/scheduler/row-header-columns/">row header columns</a>
[doc.daypilot.org].</div>
<div class="note">Toggle "Size" column: <a href="#" id="toggle">Toggle</a></div>
<div class="space">Tabular mode:</div>
<div id="dp"></div>
<div class="space">Legacy mode:</div>
<div id="dp2"></div>
<script type="text/javascript">
var columnsFull = [
{ text: 'Name', display: "name" },
{ text: 'Floor', display: "location" },
{ text: 'Size', display: "size" }
];
var columnsShortened = [
{ text: 'Name', display: "name" },
{ text: 'Floor', display: "location" }
];
var dp = new DayPilot.Scheduler("dp");
// view
dp.startDate = new DayPilot.Date("2019-03-01");
dp.days = dp.startDate.daysInMonth();
dp.timeHeaders = [
{ groupBy: "Month" },
{ groupBy: "Day", format: "d" }
];
dp.rowHeaderColumns = columnsFull;
dp.rowHeaderColumnsMode = "Tabular";
dp.resources = [
{
id: "A", expanded: true, name: "Building A", children: [
{ id: "101", name: "Room 101", location: "Floor 1", size: "2 beds" },
{ id: "102", name: "Room 102", location: "Floor 1", size: "3 beds" },
{ id: "103", name: "Room 103", location: "Floor 1", size: "1 bed" },
{ id: "201", name: "Room 201", location: "Floor 2", size: "2 beds" },
]
},
{
id: "B", expanded: true, name: "Building B", children: [
{ id: "301", name: "Room 301", location: "Floor 1", size: "2 beds" },
{ id: "302", name: "Room 302", location: "Floor 1", size: "3 beds" },
{ id: "303", name: "Room 303", location: "Floor 1", size: "1 bed" },
{ id: "401", name: "Room 401", location: "Floor 2", size: "2 beds" },
]
},
];
dp.scale = "Manual";
dp.timeline = [];
// 31 day cells
for (var i = 0; i < 31; i++) {
var day = {};
day.start = dp.startDate.addDays(i).addHours(12);
day.end = day.start.addDays(1);
dp.timeline.push(day);
}
dp.treeEnabled = true;
var start = dp.timeline[0].start;
// generate and load events
for (var i = 1; i < 6; i++) {
var duration = Math.floor(Math.random() * 6) + 1; // 1 to 6
var end = start.addDays(duration);
var e = new DayPilot.Event({
start: start,
end: end,
id: DayPilot.guid(),
resource: "101",
text: "Reservation #" + i
});
dp.events.add(e);
start = end.addDays(1);
}
// event creating
dp.onTimeRangeSelected = function (args) {
var name = prompt("New event name:", "Event");
dp.clearSelection();
if (!name) return;
var e = new DayPilot.Event({
start: args.start,
end: args.end,
id: DayPilot.guid(),
resource: args.resource,
text: name
});
dp.events.add(e);
dp.message("Created");
};
dp.rowHeaderColumnsResizable = true;
dp.init();
function toggle() {
if (dp.rowHeaderColumns === columnsFull) {
dp.update({ rowHeaderColumns: columnsShortened });
}
else {
dp.update({ rowHeaderColumns: columnsFull });
}
}
$(document).ready(function () {
$("#toggle").click(function (ev) {
ev.preventDefault();
toggle();
})
});
</script>
<script>
var dp2 = new DayPilot.Scheduler("dp2", {
startDate: "2019-03-01",
days: 31,
scale: "Day",
timeHeaders: [
{ groupBy: "Month" },
{ groupBy: "Day", format: "d" }
],
rowHeaderColumns: [
{ title: 'Name', width: 100 },
{ title: 'Floor', width: 100 },
{ title: 'Size', width: 100 }
],
rowHeaderColumnsMode: "Legacy",
resources: [
{
name: "Building A", id: "A", expanded: true, children: [
{ name: "Room 101", id: "101", columns: [{ text: "Floor 1" }, { text: "2 beds" }] },
{ name: "Room 102", id: "102", columns: [{ text: "Floor 1" }, { text: "3 beds" }] },
{ name: "Room 103", id: "103", columns: [{ text: "Floor 1" }, { text: "1 bed" }] },
{ name: "Room 201", id: "201", columns: [{ text: "Floor 2" }, { text: "2 beds" }] }
]
}
],
treeEnabled: true,
onTimeRangeSelected: function (args) {
var name = prompt("New event name:", "Event");
dp2.clearSelection();
if (!name) return;
var e = new DayPilot.Event({
start: args.start,
end: args.end,
id: DayPilot.guid(),
resource: args.resource,
text: name
});
dp2.events.add(e);
dp2.message("Created");
}
});
dp2.init();
</script>
<!-- bottom -->
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
var url = window.location.href;
var filename = url.substring(url.lastIndexOf('/') + 1);
if (filename === "") filename = "index.html";
$(".menu a[href='" + filename + "']").addClass("selected");
$(".menu-title").click(function () {
$(".menu-body").toggle();
if ($(".menu-body").is(":visible")) {
scrollTo({
top: pageYOffset + 100,
behavior: "smooth"
});
}
});
});
</script>
<!-- /bottom -->
</body>
</html>