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

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

images
File size: 8.9 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 - custom data storage</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
11        <!-- External dependencies -->
12    <script src="../../external/jquery-1.8.0.min.js" type="text/javascript"></script>
13    <script src="../../external/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
14    <script src="../../external/globalize.min.js" type="text/javascript"></script>
15    <script src="../../external/cultures/globalize.cultures.js" type="text/javascript"></script>
16    <script src="../../external/jquery.mousewheel.min.js" type="text/javascript"></script>
17               
18        <!-- built-in datastorage not used in this sample -->
19        <!--
20    <script src="../explore/js/amplify.core.min.js" type="text/javascript"></script>
21    <script src="../explore/js/amplify.request.min.js" type="text/javascript"></script>
22    <script src="../explore/js/amplify.store.min.js" type="text/javascript"></script>
23        -->
24        <!-- Wijmo-Open dependencies -->
25        <script src="../../../../Wijmo-Open/development-bundle/wijmo/jquery.wijmo.wijutil.js" type="text/javascript"></script>
26        <link href="../../../../Wijmo-Open/development-bundle/themes/wijmo/jquery.wijmo.wijutil.css" rel="stylesheet" type="text/css" />
27        <script src="../../../../Wijmo-Open/development-bundle/wijmo/jquery.wijmo.wijtouchutil.js" type="text/javascript"></script>     
28        <script src="../../../../Wijmo-Open/development-bundle/wijmo/jquery.wijmo.wijcalendar.js" type="text/javascript"></script>
29        <link href="../../../../Wijmo-Open/development-bundle/themes/wijmo/jquery.wijmo.wijcalendar.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        <!-- Widget initialization -->
55    <script type="text/javascript">
56        $(document).ready(function () {
57                $("#eventscalendar").wijevcal({
58                        visibleCalendars: ["My", "Work"],
59                        dataStorage: {
60                                addEvent: _updateEvent,
61                                updateEvent: _updateEvent,
62                                deleteEvent: function (obj, successCallback, errorCallback) {
63                                        window.setTimeout(function () {
64                                                var curCalStore = amplify.store("calendarstore_" + obj.calendar);
65                                                if (!curCalStore) {
66                                                        curCalStore = {};
67                                                }
68                                                if (curCalStore[obj.id]) {
69                                                        delete curCalStore[obj.id];
70                                                }
71                                                amplify.store("calendarstore_" + obj.calendar, curCalStore);
72                                                successCallback()
73                                        }, 400); //simulate server delay
74                                        //errorCallback("Unable to delete event");
75                                },
76                                loadEvents: function (visibleCalendars,
77                                                                                        successCallback, errorCallback) {
78
79                                        var i, j, events = [];
80                                        window.setTimeout(function () {
81                                                for (i = 0; i < visibleCalendars.length; i++) {
82
83                                                        var curCalStore = amplify.store("calendarstore_" + visibleCalendars[i]);
84                                                        if (!curCalStore) {
85                                                                curCalStore = {};
86                                                                amplify.store("calendarstore_" + visibleCalendars[i], curCalStore);
87                                                        }
88                                                        for (j in curCalStore) {
89                                                                events.push(curCalStore[j]);
90                                                        }
91                                                }
92                                                successCallback(events);
93                                        }, 500);
94                                        //errorCallback("unable to load events");
95                                },
96                                addCalendar: _updateCalendar,
97                                updateCalendar: _updateCalendar,
98                                deleteCalendar: function (obj, successCallback, errorCallback) {
99                                        successCallback();
100                                        //errorCallback("Unable to delete calendar");
101                                },
102                                loadCalendars: function (successCallback, errorCallback) {
103                                        var calendars = [{ name: "My", id: "My", color: "red" },
104                                                                         { name: "Work", id: "Work", color: "blue"}];
105                                        successCallback(calendars);
106                                }
107                        }
108                });
109
110
111
112        });
113
114        function _updateEvent(obj, successCallback, errorCallback) {
115                window.setTimeout(function () {
116                        var curCalStore = amplify.store("calendarstore_" + obj.calendar);
117                        if (!curCalStore) {
118                                curCalStore = {};
119                        }
120                        curCalStore[obj.id] = obj;
121                        amplify.store("calendarstore_" + obj.calendar, curCalStore);
122                        successCallback()
123                }, 400); //simulate server delay
124                //errorCallback("Unable to save event");
125        }
126
127        function _updateCalendar(obj, successCallback, errorCallback) {
128                successCallback();
129                //errorCallback("Unable to save calendar");
130        }
131        </script>
132    <style type="text/css">
133        #eventscalendar
134        {
135            width: 750px;
136        }
137    </style>
138</head>
139<body class="demo-single">
140    <div class="container">
141        <div class="header">
142            <h2>
143                Custom data storage.</h2>
144        </div>
145        <div class="main demo">
146            <!-- Begin demo markup -->
147               <div id="eventscalendar"></div>
148            <!-- End demo markup -->
149            <div class="demo-options">
150                <!-- Begin options markup -->
151                <!-- End options markup -->
152            </div>
153        </div>
154        <div class="footer demo-description">
155                        <p>
156                                This sample demonstrates how to implement custom data storage for the events calendar.
157                        </p>
158                        <p>The sample uses the <b>amplify.store</b> library in order to implement local data storage.</p>
159                        <p>Options used in the sample include the following:</p>
160                        <ul>
161                        <li><strong>dataStorage</strong> - use this option in order to implement the custom data storage layer.</li>
162                        <li><strong>visibleCalendars</strong> - array of the calendar names that need to be shown.</li>                 
163                        </ul>
164
165                        <p>
166                                Note, you can use <b>dataStorage</b> methods in order to call server side web service, as well.
167                        </p>
168                                If you don't want to implement some data storage method, you can assign this method to null and the events calendar will use
169                                built-in implementation for this function, e.g.:
170                                <pre>
171        $(document).ready(function () {
172                $("#eventscalendar").wijevcal({
173                        visibleCalendars: ["My", "Work"],
174                        dataStorage: {
175                        saveEvent: function (obj, successCallback, errorCallback) {
176                                // implement your code here
177                        },
178                        deleteEvent: function (obj, successCallback, errorCallback) {
179                                // implement your code here
180                        },
181                        loadEvents: function (visibleCalendars,
182                                                                                        successCallback, errorCallback) {
183                                        // implement your code here
184                        },
185                        saveCalendar: null, // use built-in saveCalendar code
186                        deleteCalendar: null, // use built-in deleteCalendar code
187                        loadCalendars: null // use built-in loadCalendars code
188                }
189                });
190        });                             
191                                </pre>
192        </div>
193    </div>
194</body>
195</html>
Note: See TracBrowser for help on using the repository browser.