Question

DHTMLX的细胞时间线存在问题。我想让单元格相等，看看整整一个小时，或者如果可能的话，当它比设备屏幕的时间太长时，可以使它成为horizental滚动。

我试图从DHTML中读取文档，但最终无法帮助。

注意：小时将从上午8:00到上午24:00开始。

<script type="text/javascript" charset="utf-8">
    function init() {
        window.resizeTo(950,700)
        modSchedHeight();

        scheduler.locale.labels.timeline_tab = "Timeline"
        scheduler.locale.labels.section_custom="Section";
        scheduler.config.fix_tab_position = false;
        scheduler.config.details_on_create = true;
        scheduler.config.details_on_dblclick = true;
        scheduler.config.xml_date="%Y-%m-%d %H:%i";


        //===============
        //Configuration
        //===============
        var sections=[
            {key:1, label:"Room 1"},
            {key:2, label:"Room 2"},
            {key:3, label:"Room 3"},
            {key:4, label:"Room 4"}
        ];

        scheduler.createTimelineView({
            name:      "timeline",
            x_unit:    "minute",
            x_date:    "%H:%i",
            x_step:    15,
            x_size:    65,
            x_start:   32,
            x_length:  32,
            first_hour:2,
            last_hour:32,
            y_unit: sections,
            section_autoheight: true,
            event_dy: "full",
            dx: 50,
            dy: 100,
            y_property: "section_id",
            render:"bar"
        });


        //===============
        //Data loading
        //===============

        // add cambo box to increase 15
        scheduler.config.time_step = 15;

        scheduler.config.lightbox.sections=[    
            {name:"description", height:130, map_to:"text", type:"textarea" , focus:true},
            {name:"custom", height:23, type:"select", options:sections, map_to:"section_id" },
            //{name:"time", height:72, type:"time", map_to:"auto"}
        ]

        scheduler.init('scheduler_here',new Date(2016,7,30),"timeline");

        scheduler.parse([
            { id: 1, user_id: 1, start_date: "2016-08-30 08:00", end_date: "2016-08-30 12:00", text:"08:00 - 12:00", section_id:1},
            { id: 2 , user_id: 2, start_date: "2016-08-30 12:00", end_date: "2016-08-30 16:00", text:"12:00 - 16:00", section_id:2},
            { id: 3, user_id: 3, start_date: "2016-08-30 08:00", end_date: "2016-08-30 12:00", text:"08:00 - 12:00", section_id:3},
            { id: 14, user_id: 4, start_date: "2016-08-30 09:30", end_date: "2016-08-30 12:30", text:"09:30 - 12:30", section_id:4},
        ],"json");


        // Update data
        //scheduler.getEvent(1).text = "Event 111"; //changes event's data
        //scheduler.updateEvent(1); // renders the updated event

        scheduler.attachEvent("onBeforeDrag", function (id, mode, e){
            //any custom logic here
            if (id == 2) {
                return false;
            } else {
                return true;
            }
        });

        // move , drage, drop (event success)
        scheduler.attachEvent("onBeforeEventChanged", function(ev, e, is_new, original){
            //alert(ev.id);
            scheduler.getEvent(ev.id).text = timeZoneToHour(ev.start_date) + '-' + timeZoneToHour(ev.end_date); //changes event's data

            scheduler.updateEvent(ev.id); // renders the updated event
            //any custom logic here

            // todo (to check duplicate timeline)
            return true;
        });


        scheduler.showLightbox = function(id) {
            scheduler.attachEvent("onEventSave",function(id, ev, is_new){
                return true;
            });
        };

        function timeZoneToHour(time) {
            return time.getHours() + ":" + time.getMinutes();
        }
        //scheduler.xy.scale_width = 200;//sets the height of the X-Axis
        //scheduler.config.hour_size_px = 894;
    }
</script>

HTML

<body onload="init();"  onresize="modSchedHeight()">

    <script>
        function modSchedHeight(){
            var headHeight = 100;
            var sch = document.getElementById("scheduler_here");
                        if (!sch) return;
            sch.style.height = (parseInt(document.body.offsetHeight)-headHeight)+"px";
            var contbox = document.getElementById("contbox");
            contbox.style.width = (parseInt(document.body.offsetWidth)-300)+"px";
        }
    </script>
        <div id="contbox">

        </div>


    <div id="scheduler_here" class="dhx_cal_container" style='height:100%;'>
        <div class="dhx_cal_navline">
            <div class="dhx_cal_date"></div>
        </div>
        <div class="dhx_cal_header">
        </div>
        <div class="dhx_cal_data">
        </div>      
    </div>
</body>

小时未与Dhtmlx时间线完整显示

0 个答案: