<!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> &raquo; <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">&#x02c5;</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>