source: branches/2.2.0.1/calendar/js/dhtmlx/samples/06_timeline/01_slots.html @ 4001

Revision 4001, 3.4 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        .white_cell{
25                background-color:white;
26        }
27        .green_cell{
28                background-color:#95FF95;
29        }
30        .yellow_cell{
31                background-color:#FFFF79;
32        }
33        .red_cell{
34                background-color:#FF5353;
35        }
36</style>
37
38<script type="text/javascript" charset="utf-8">
39        function init() {
40
41                scheduler.locale.labels.matrix_tab = "Matrix"
42                scheduler.locale.labels.section_custom="Section";
43                scheduler.config.details_on_create=true;
44                scheduler.config.details_on_dblclick=true;
45                scheduler.config.xml_date="%Y-%m-%d %H:%i";
46                scheduler.config.multi_day = true;
47                brief_mode = true;
48               
49               
50                //===============
51                //Configuration
52                //===============
53                var sections=[
54                        {key:1, label:"Section A"},
55                        {key:2, label:"Section B"},
56                        {key:3, label:"Section C"},
57                        {key:4, label:"Section D"}
58                ];
59               
60                scheduler.createTimelineView({
61                        name:   "matrix",
62                        x_unit: "day",
63                        x_date: "%d %M",
64                        x_step: 1,
65                        x_size: 15,
66                        y_unit: sections,
67                        y_property:     "section_id"
68                });
69               
70                //===============
71                //Customization
72                //===============
73                scheduler.templates.matrix_cell_class = function(evs,x,y){
74                        if (!evs) {
75                                var day = x.getDay();
76                                return (day==0 || day == 6) ? "yellow_cell" : "white_cell";
77                        }
78                        if (evs.length<3) return "green_cell";
79                        if (evs.length<5) return "yellow_cell";
80                        return "red_cell";
81                };
82
83                scheduler.templates.matrix_scalex_class = function(date){
84                        if (date.getDay()==0 || date.getDay()==6)  return "yellow_cell";
85                        return "";
86                }
87               
88       
89                //===============
90                //Data loading
91                //===============
92                scheduler.config.lightbox.sections=[   
93                        {name:"description", height:130, map_to:"text", type:"textarea" , focus:true},
94                        {name:"custom", height:23, type:"select", options:sections, map_to:"section_id" },
95                        {name:"time", height:72, type:"time", map_to:"auto"}
96                ]
97               
98                scheduler.init('scheduler_here',new Date(2009,5,30),"matrix");
99                scheduler.load("../common/units.xml");
100        }
101</script>
102
103<body onload="init();">
104        <div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
105                <div class="dhx_cal_navline">
106                        <div class="dhx_cal_prev_button">&nbsp;</div>
107                        <div class="dhx_cal_next_button">&nbsp;</div>
108                        <div class="dhx_cal_today_button"></div>
109                        <div class="dhx_cal_date"></div>
110                        <div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
111                        <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
112                        <div class="dhx_cal_tab" name="matrix_tab" style="right:280px;"></div>
113                        <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
114                </div>
115                <div class="dhx_cal_header">
116                </div>
117                <div class="dhx_cal_data">
118                </div>         
119        </div>
120</body>
Note: See TracBrowser for help on using the repository browser.