source: branches/2.2.0.1/calendar/js/dhtmlx/samples/06_timeline/02_lines.html @ 4001

Revision 4001, 4.2 KB checked in by rafaelraymundo, 13 years ago (diff)

Ticket #1615 - Componente novo para agenda......................................

Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3<head>
4        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
5        <title>For demo purpose only :: &1</title>
6</head>
7        <script src='../../codebase/dhtmlxscheduler.js' type="text/javascript" charset="utf-8"></script>
8        <script src='../../codebase/ext/dhtmlxscheduler_timeline.js' type="text/javascript" charset="utf-8"></script>
9       
10        <link rel='STYLESHEET' type='text/css' href='../../codebase/dhtmlxscheduler.css'>
11        <link rel="stylesheet" href="../../codebase/ext/dhtmlxscheduler_ext.css" type="text/css" media="screen" title="no title" charset="utf-8">
12       
13       
14       
15
16       
17<style type="text/css" media="screen">
18        html, body{
19                margin:0px;
20                padding:0px;
21                height:100%;
22                overflow:hidden;
23        }       
24        .one_line{
25                white-space:nowrap;
26                overflow:hidden;
27                padding-top:5px; padding-left:5px;
28                text-align:left !important;
29        }
30</style>
31
32<script type="text/javascript" charset="utf-8">
33        function init() {
34
35                scheduler.locale.labels.timeline_tab = "Timeline"
36                scheduler.locale.labels.section_custom="Section";
37                scheduler.config.details_on_create=true;
38                scheduler.config.details_on_dblclick=true;
39                scheduler.config.xml_date="%Y-%m-%d %H:%i";
40               
41                //===============
42                //Configuration
43                //===============
44                var sections=[
45                        {key:1, label:"James Smith"},
46                        {key:2, label:"John Williams"},
47                        {key:3, label:"David Miller"},
48                        {key:4, label:"Linda Brown"}
49                ];
50               
51                scheduler.createTimelineView({
52                        name:   "timeline",
53                        x_unit: "minute",
54                        x_date: "%H:%i",
55                        x_step: 30,
56                        x_size: 24,
57                        x_start: 16,
58                        x_length:       48,
59                        y_unit: sections,
60                        y_property:     "section_id",
61                        render:"bar"
62                });
63               
64
65               
66               
67                //===============
68                //Data loading
69                //===============
70                scheduler.config.lightbox.sections=[   
71                        {name:"description", height:130, map_to:"text", type:"textarea" , focus:true},
72                        {name:"custom", height:23, type:"select", options:sections, map_to:"section_id" },
73                        {name:"time", height:72, type:"time", map_to:"auto"}
74                ]
75               
76                scheduler.init('scheduler_here',new Date(2009,5,30),"timeline");
77                scheduler.parse([
78                        { start_date: "2009-06-30 09:00", end_date: "2009-06-30 12:00", text:"Task A-12458", section_id:1},
79                        { start_date: "2009-06-30 10:00", end_date: "2009-06-30 16:00", text:"Task A-89411", section_id:1},
80                        { start_date: "2009-06-30 10:00", end_date: "2009-06-30 14:00", text:"Task A-64168", section_id:1},
81                        { start_date: "2009-06-30 16:00", end_date: "2009-06-30 17:00", text:"Task A-46598", section_id:1},
82                       
83                        { start_date: "2009-06-30 12:00", end_date: "2009-06-30 20:00", text:"Task B-48865", section_id:2},
84                        { start_date: "2009-06-30 14:00", end_date: "2009-06-30 16:00", text:"Task B-44864", section_id:2},
85                        { start_date: "2009-06-30 16:30", end_date: "2009-06-30 18:00", text:"Task B-46558", section_id:2},
86                        { start_date: "2009-06-30 18:30", end_date: "2009-06-30 20:00", text:"Task B-45564", section_id:2},
87                       
88                        { start_date: "2009-06-30 08:00", end_date: "2009-06-30 12:00", text:"Task C-32421", section_id:3},
89                        { start_date: "2009-06-30 14:30", end_date: "2009-06-30 16:45", text:"Task C-14244", section_id:3},
90                       
91                        { start_date: "2009-06-30 09:20", end_date: "2009-06-30 12:20", text:"Task D-52688", section_id:4},
92                        { start_date: "2009-06-30 11:40", end_date: "2009-06-30 16:30", text:"Task D-46588", section_id:4},
93                        { start_date: "2009-06-30 12:00", end_date: "2009-06-30 18:00", text:"Task D-12458", section_id:4}
94                ],"json");
95        }
96</script>
97
98<body onload="init();">
99        <div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
100                <div class="dhx_cal_navline">
101                        <div class="dhx_cal_prev_button">&nbsp;</div>
102                        <div class="dhx_cal_next_button">&nbsp;</div>
103                        <div class="dhx_cal_today_button"></div>
104                        <div class="dhx_cal_date"></div>
105                        <div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
106                        <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
107                        <div class="dhx_cal_tab" name="timeline_tab" style="right:280px;"></div>
108                        <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
109                </div>
110                <div class="dhx_cal_header">
111                </div>
112                <div class="dhx_cal_data">
113                </div>         
114        </div>
115</body>
Note: See TracBrowser for help on using the repository browser.