source: ether_statistics/web/resources/js/Wijmo.2.2.2/Wijmo-Complete/development-bundle/samples/eventscalendar/dataModel.html @ 604

Last change on this file since 604 was 604, checked in by vmipsl, 12 years ago

images
File size: 12.8 KB
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head runat="server">
4    <title>Events calendar - data model</title>
5    <meta charset="utf-8" />
6    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
7    <meta name="description" content="%description%" />
8    <meta name="keywords" content="" />
9    <meta name="author" content="ComponentOne" />
10        <!-- External dependencies -->
11    <script src="../../external/jquery-1.8.0.min.js" type="text/javascript"></script>
12    <script src="../../external/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
13    <script src="../../external/globalize.min.js" type="text/javascript"></script>
14    <script src="../../external/cultures/globalize.cultures.js" type="text/javascript"></script>
15    <script src="../../external/jquery.mousewheel.min.js" type="text/javascript"></script>
16               
17        <!-- Enable built-in datastorage -->
18    <script src="../explore/js/amplify.core.min.js" type="text/javascript"></script>
19    <script src="../explore/js/amplify.request.min.js" type="text/javascript"></script>
20    <script src="../explore/js/amplify.store.min.js" type="text/javascript"></script>
21
22        <!-- Wijmo-Open dependencies -->
23        <script src="../../../../Wijmo-Open/development-bundle/wijmo/jquery.wijmo.wijutil.js" type="text/javascript"></script>
24        <link href="../../../../Wijmo-Open/development-bundle/themes/wijmo/jquery.wijmo.wijutil.css" rel="stylesheet" type="text/css" />
25        <script src="../../../../Wijmo-Open/development-bundle/wijmo/jquery.wijmo.wijtouchutil.js" type="text/javascript"></script>     
26        <script src="../../../../Wijmo-Open/development-bundle/wijmo/jquery.wijmo.wijcalendar.js" type="text/javascript"></script>
27        <link href="../../../../Wijmo-Open/development-bundle/themes/wijmo/jquery.wijmo.wijcalendar.css" rel="stylesheet" type="text/css" />
28        <script src="../../../../Wijmo-Open/development-bundle/wijmo/jquery.wijmo.wijdialog.js" type="text/javascript"></script>
29        <link href="../../../../Wijmo-Open/development-bundle/themes/wijmo/jquery.wijmo.wijdialog.css" rel="stylesheet" type="text/css" />
30        <script src="../../../../Wijmo-Open/development-bundle/wijmo/jquery.wijmo.wijdropdown.js" type="text/javascript"></script>
31        <link href="../../../../Wijmo-Open/development-bundle/themes/wijmo/jquery.wijmo.wijdropdown.css" rel="stylesheet" type="text/css" />
32        <script src="../../../../Wijmo-Open/development-bundle/wijmo/jquery.wijmo.wijtextbox.js" type="text/javascript"></script>
33        <link href="../../../../Wijmo-Open/development-bundle/themes/wijmo/jquery.wijmo.wijtextbox.css" rel="stylesheet" type="text/css" />
34        <script src="../../../../Wijmo-Open/development-bundle/wijmo/jquery.wijmo.wijcheckbox.js" type="text/javascript"></script>
35        <link href="../../../../Wijmo-Open/development-bundle/themes/wijmo/jquery.wijmo.wijcheckbox.css" rel="stylesheet" type="text/css" />
36       
37        <script src="../../../../Wijmo-Open/development-bundle/wijmo/jquery.wijmo.wijpopup.js" type="text/javascript"></script> 
38        <script src="../../../../Wijmo-Open/development-bundle/wijmo/jquery.wijmo.wijsuperpanel.js" type="text/javascript"></script>
39        <link href="../../../../Wijmo-Open/development-bundle/themes/wijmo/jquery.wijmo.wijsuperpanel.css" rel="stylesheet" type="text/css" />
40       
41        <!-- Wijmo-Complete dependencies -->
42    <script src="../../wijmo/jquery.plugin.wijtextselection.js" type="text/javascript"></script>
43    <script src="../../wijmo/jquery.wijmo.wijinputcore.js" type="text/javascript"></script>
44        <link href="../../themes/wijmo/jquery.wijmo.wijinput.css" rel="stylesheet" type="text/css" />
45    <script src="../../wijmo/jquery.wijmo.wijinputdate.js" type="text/javascript"></script>     
46    <script src="../../wijmo/jquery.wijmo.wijdatepager.js" type="text/javascript"></script>
47        <link href="../../themes/wijmo/jquery.wijmo.wijdatepager.css" rel="stylesheet" type="text/css" />
48    <script src="../../wijmo/jquery.wijmo.wijevcal.js" type="text/javascript"></script>
49    <link href="../../themes/wijmo/jquery.wijmo.wijevcal.css" rel="stylesheet" type="text/css" />       
50
51        <!-- Theme -->
52    <link href="../../themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" />
53    <!-- * -->
54    <script type="text/javascript">
55        $(document).ready(function () {
56                $("#eventscalendar").wijevcal({
57                        headerBarVisible: false,
58                        // initialized event is called
59                        // when events calendar initialized and
60                        // information about events is loaded
61                        initialized: function (e) {
62                                // load available calendars when widget is initialized
63                                loadCalendarsList();
64                        },
65                        // calendarsChanged event called when calendars option has been changed
66                        // (Note, this option is read-only).
67                        calendarsChanged: function (e, args) {
68                                // load available calendars when calendars option has been changed
69                                loadCalendarsList();
70                        }
71                });
72
73                $(".eventactions .addnewevent")/*.button()*/
74                                        .click($.proxy(onAddNewEventClick, this));
75                $(".eventactions .addneweventwithoutdialog")/*.button()*/
76                                        .click($.proxy(onAddNewEventWithoutDialogClick, this));
77                $(".eventactions .deleteEventsForActiveDay")/*.button()*/
78                                        .click($.proxy(onDeleteEventsForActiveDayClick, this));
79                //
80
81                $(".calendaractions .addnewcalendar").button()
82                                                        .click($.proxy(onAddNewCalendarClick, this));
83                $(".calendaractions .calendarsettings").button({ disabled: true })
84                                                        .click($.proxy(onEditCalendarClick, this));
85                $(".calendaractions .deletecalendar").button({ disabled: true })
86                                                        .click($.proxy(onDeleteCalendarClick, this));
87
88
89                function onAddNewEventClick() {
90                        $("#eventscalendar").wijevcal("showEditEventDialog");
91                }
92                function onAddNewEventWithoutDialogClick() {
93                        var o = {};
94                        o.subject = "New event";
95                        o.start = new Date();
96                        o.end = new Date(o.start.getTime() + 1000 * 60 * 60 * 2); // duration 2 hours
97                        $("#eventscalendar").wijevcal("addEvent", o);
98                }
99                function onDeleteEventsForActiveDayClick() {                           
100                        var now = new Date(),
101                                        selectedDate = $("#eventscalendar").wijevcal("option", "selectedDate"),
102                                start = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate()),
103                                        end = new Date(start.getTime() + 1000 * 60 * 60 * 24),
104                                        events, i;
105                        events = $("#eventscalendar").wijevcal("getOccurrences", start, end);
106                        for (i = 0; i < events.length; i++) {
107                                $("#eventscalendar").wijevcal("deleteEvent", events[i]);
108                        }
109
110                }
111
112                function onAddNewCalendarClick() {
113                        $("#eventscalendar").wijevcal("showEditCalendarDialog");
114                }
115                function onEditCalendarClick() {
116                        if ($(".calendarslist").find(".ui-selected").length > 0) {
117                                var checkbox = $(".calendarslist").find(".ui-selected").find("input")[0];
118                                $("#eventscalendar").wijevcal("showEditCalendarDialog", checkbox.value);
119                        } 
120                }
121                function onDeleteCalendarClick() {
122                        if ($(".calendarslist").find(".ui-selected").length > 0) {
123                                var checkbox = $(".calendarslist").find(".ui-selected").find("input")[0];
124                                $("#eventscalendar").wijevcal("deleteCalendar", checkbox.value);
125                        }
126                }
127                function loadCalendarsList() {
128                        var calendars = $("#eventscalendar").wijevcal("option", "calendars"),
129                                        i, c, calendarslist = $(".calendarslist");
130                        calendarslist.html("");
131                        for (i = 0, c = calendars.length; i < c; i += 1) {
132                                calendarslist.append("<li class=\"ui-widget-content\"><label><input type=\"checkbox\" value=\"" + calendars[i].name + "\" />" + calendars[i].name + "</label></li>");
133                        }
134                        $(".calendaractions .calendarsettings").button("option", "disabled", true);
135                        $(".calendaractions .deletecalendar").button("option", "disabled", true);
136                }
137
138                $(".calendarslist").selectable({
139                        selected: function (event, ui) {
140                                if ($(".calendarslist").find(".ui-selected").length > 0) {
141                                        $(".calendaractions .deletecalendar").button("option", "disabled", false);
142                                        if ($(".calendarslist").find(".ui-selected").length === 1) {
143                                                $(".calendaractions .calendarsettings").button("option", "disabled", false);
144                                        } else {
145                                                $(".calendaractions .calendarsettings").button("option", "disabled", true);
146                                        }
147                                }
148                        },
149                        unselected: function (event, ui) {
150                                if ($(".calendarslist").find(".ui-selected").length === 1) {
151                                        $(".calendaractions .calendarsettings").button("option", "disabled", false);
152                                } else if ($(".calendarslist").find(".ui-selected").length < 1) {
153                                        $(".calendaractions .calendarsettings").button("option", "disabled", true);
154                                        $(".calendaractions .deletecalendar").button("option", "disabled", true);
155                                }
156                        }
157                });
158
159                $(".calendarslist").find("input").live("change", function () {
160                        var checkboxes = $(".calendarslist").find("input"), i,
161                                        visibleCalendars = [];
162                        for (i = 0; i < checkboxes.length; i++) {
163                                if (checkboxes[i].checked) {
164                                        visibleCalendars.push(checkboxes[i].value);
165                                }
166                        }
167                        $("#eventscalendar").wijevcal("option", "visibleCalendars", visibleCalendars);
168                });
169
170        });
171    </script>
172    <style type="text/css">
173        .top-pane
174        {
175            margin: 1em 0;
176            padding: 1em;
177        }
178        .calendaractions p, 
179        .addnewevent, .events-title
180        {
181            margin-bottom: 1em;
182        }
183        #eventscalendar
184        {
185            width: 750px;
186        }
187    </style>
188</head>
189<body class="demo-single">
190    <div class="container">
191        <div class="header">
192            <h2>
193                Data model</h2>
194        </div>
195        <div class="main demo">
196            <!-- Begin demo markup -->
197            <div>
198                <div class="top-pane ui-helper-clearfix ui-widget-content ui-corner-all">
199                    <div class="calendaractions">
200                        <h3 class="events-title">
201                            Events</h3>
202                        <div class="eventactions">
203                            <a class="addnewevent" href="#">Add event using dialog</a>&nbsp;&nbsp;
204                                                        <a class="addneweventwithoutdialog" href="#">Add event without dialog</a>&nbsp;&nbsp;
205                                                        <a class="deleteEventsForActiveDay" href="#">Delete all events for the active day (without confirmation)</a>
206                        </div>
207                        <h3>
208                            Calendars</h3>
209                        <div class="calendarslist-container">
210                            <ul class="calendarslist">
211                                <li>Loading...</li>
212                            </ul>
213                        </div>
214                        <p>
215                            <a class="calendarsettings">Edit</a> <a class="deletecalendar">Delete</a>
216                        </p>
217                        <p>
218                            <a class="addnewcalendar">Add calendar</a>
219                        </p>
220                    </div>
221                </div>
222                <div id="eventscalendar">
223                </div>
224            </div>
225            <!-- End demo markup -->
226            <div class="demo-options">
227                <!-- Begin options markup -->
228                <!-- End options markup -->
229            </div>
230            <div class="footer demo-description">
231                <p>
232                    The sample demonstrates how to edit events using client side script.
233                </p>
234                        <p>Options used in the sample:</p>
235                        <ul>
236                                <li><strong>calendars</strong> - available calendar objects array. This option is read-only.</li>
237                                <li><strong>selectedDate</strong> - the selected date.</li>
238                                <li><strong>visibleCalendars</strong> - array of the calendar names which need to be shown..</li>                       
239                        </ul>
240                        <p>Client side methods used in the sample:</p>
241                        <ul>
242                                <li><strong>getOccurrences</strong> - Retrieves the array which contains the full list of Event objects in the specified time interval. Note, this method will create instances of the Event object for recurring events.</li>
243                                <li><strong>addEvent</strong> - add new event to a data source.</li>
244                                <li><strong>deleteEvent</strong> - delete event from the data source.</li>                     
245                                <li><strong>deleteCalendar</strong> - delete existent calendar from the data source.</li>                       
246                                <li><strong>showEditEventDialog</strong> - call this method in order to display built-in "edit event" dialog.</li>
247                                <li><strong>showEditCalendarDialog</strong> - call this method in order to display built-in "edit calendar" dialog.</li>                                                               
248                        </ul>
249                        <p>
250       
251                        </p>
252            </div>
253        </div>
254</body>
255</html>
Note: See TracBrowser for help on using the repository browser.