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

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

images

File size: 18.4 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 event dialog</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        <!-- Enable built-in datastorage -->
19    <script src="../explore/js/amplify.core.min.js" type="text/javascript"></script>
20    <script src="../explore/js/amplify.request.min.js" type="text/javascript"></script>
21    <script src="../explore/js/amplify.store.min.js" type="text/javascript"></script>
22
23        <!-- Wijmo-Open dependencies -->
24        <script src="../../../../Wijmo-Open/development-bundle/wijmo/jquery.wijmo.wijutil.js" type="text/javascript"></script>
25        <link href="../../../../Wijmo-Open/development-bundle/themes/wijmo/jquery.wijmo.wijutil.css" rel="stylesheet" type="text/css" />
26        <script src="../../../../Wijmo-Open/development-bundle/wijmo/jquery.wijmo.wijtouchutil.js" type="text/javascript"></script>     
27        <script src="../../../../Wijmo-Open/development-bundle/wijmo/jquery.wijmo.wijcalendar.js" type="text/javascript"></script>
28        <link href="../../../../Wijmo-Open/development-bundle/themes/wijmo/jquery.wijmo.wijcalendar.css" rel="stylesheet" type="text/css" />
29        <script src="../../../../Wijmo-Open/development-bundle/wijmo/jquery.wijmo.wijdropdown.js" type="text/javascript"></script>
30        <link href="../../../../Wijmo-Open/development-bundle/themes/wijmo/jquery.wijmo.wijdropdown.css" rel="stylesheet" type="text/css" />
31        <script src="../../../../Wijmo-Open/development-bundle/wijmo/jquery.wijmo.wijtextbox.js" type="text/javascript"></script>
32        <link href="../../../../Wijmo-Open/development-bundle/themes/wijmo/jquery.wijmo.wijtextbox.css" rel="stylesheet" type="text/css" />
33        <script src="../../../../Wijmo-Open/development-bundle/wijmo/jquery.wijmo.wijcheckbox.js" type="text/javascript"></script>
34        <link href="../../../../Wijmo-Open/development-bundle/themes/wijmo/jquery.wijmo.wijcheckbox.css" rel="stylesheet" type="text/css" />
35       
36        <script src="../../../../Wijmo-Open/development-bundle/wijmo/jquery.wijmo.wijpopup.js" type="text/javascript"></script> 
37        <script src="../../../../Wijmo-Open/development-bundle/wijmo/jquery.wijmo.wijsuperpanel.js" type="text/javascript"></script>
38        <link href="../../../../Wijmo-Open/development-bundle/themes/wijmo/jquery.wijmo.wijsuperpanel.css" rel="stylesheet" type="text/css" />
39       
40        <!-- Wijmo-Complete dependencies -->
41    <script src="../../wijmo/jquery.plugin.wijtextselection.js" type="text/javascript"></script>
42    <script src="../../wijmo/jquery.wijmo.wijinputcore.js" type="text/javascript"></script>
43        <link href="../../themes/wijmo/jquery.wijmo.wijinput.css" rel="stylesheet" type="text/css" />
44    <script src="../../wijmo/jquery.wijmo.wijinputdate.js" type="text/javascript"></script>     
45    <script src="../../wijmo/jquery.wijmo.wijdatepager.js" type="text/javascript"></script>
46        <link href="../../themes/wijmo/jquery.wijmo.wijdatepager.css" rel="stylesheet" type="text/css" />
47    <script src="../../wijmo/jquery.wijmo.wijevcal.js" type="text/javascript"></script>
48    <link href="../../themes/wijmo/jquery.wijmo.wijevcal.css" rel="stylesheet" type="text/css" />       
49
50        <!-- Theme -->
51    <link href="../../themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" />
52
53        <!-- Widget initialization -->
54    <script type="text/javascript">
55        $(document).ready(function () {
56
57
58                $("#eventscalendar").wijevcal({
59                        beforeEditEventDialogShow: function (e, args) {
60                                // *** Variant 1:  create custom dialog for new events:
61                                var dlg = $(".customEventDialogSample"),
62                                                        targetCell = args.targetCell,
63                                                        eventData = args.data;
64                                if (eventData.prevData) {
65                                        // show custom dialog only for new events
66                                        return true;
67                                }
68                                if (!dlg.length) {
69                                        // create custom dialog content
70                                        dlg = $("<div class=\"customEventDialogSample ui-widget-content ui-corner-all\"" +
71                                                " style=\"width: 300px; height: 300px; z-index: 999; position: absolute; top: 0px; left: 0px;\">" +
72                                                "<label class=\"dialogCaption\"></label>" +
73                                                "<hr/>" +
74                                                "Subject: <input type=\"text\" name=\"subject\" class=\"inputSubject\" value=\"\">" +
75                                                "<hr/>" +
76                                                "<a href=\"#\" class=\"cancelButton\">Cancel</a>" +
77                                                "<a href=\"#\" class=\"saveButton\">Save</a></div>");
78                                        $(document.body).append(dlg);
79
80                                        dlg.wijpopup({
81                                                autoHide: true
82                                        });
83                                        dlg.find(".cancelButton").button().click(function () {
84                                                dlg.wijpopup("hide");
85                                        });
86                                        dlg.find(".saveButton").button().click(function () {
87
88                                                eventData.subject = dlg.find(".inputSubject").val();
89
90                                                if (!eventData.prevData) {
91                                                        // add new event
92                                                        $("#eventscalendar").wijevcal("addEvent", eventData,
93                                                                        function () { /*alert("Event added.") */ },
94                                                                        function (err) { alert("(Add event) Error:" + err) });
95                                                } else {
96                                                        $("#eventscalendar").wijevcal("updateEvent", eventData,
97                                                                function () { /*alert("Event updated.") */ },
98                                                                        function (err) { alert("(Update event) Error:" + err) });
99                                                }
100                                                dlg.wijpopup("hide");
101                                        });
102
103
104                                }
105
106                                // bind event to dialog controls:
107                                dlg.find(".dialogCaption").html(eventData.prevData ? "Edit event dialog caption" : "Add event dialog caption");
108                                dlg.find(".inputSubject").val(eventData.subject);
109
110                                // show dialog using wijpopup widget:
111                                dlg.wijpopup("show",
112                                        {
113                                                of: targetCell,
114                                                my: "left center",
115                                                at: "right center",
116                                                offset: "0 0",
117                                                collision: "fit"
118                                        });
119                                return false; // prevent built-in dialog to be shown.
120                        },
121                        /* *** Variant 2: override built-in dialog content */
122                        editEventDialogTemplate: "<div class=\"" +
123                                                "customdialog-sample wijmo-wijev-event-dialog ui-widget-content ui-corner-all\">" +
124"<ul class=\"wijmo-wijev-brief-content\">" +
125"<li style=\"color: red;\"><label>Subject:</label>" +
126        "<input type=\"text\" name=\"subject\" class=\"wijmo-wijev-subject\" value=\"\">" +
127
128        "<div class=\"wijmo-wijev-color-button\">" +
129                "<div class=\"wijmo-wijev-color ui-wijmo-wijev-event-color-default\">&nbsp;</div>" +
130        "</div>" +
131
132"</li>" +
133"<li><label for=\"_alldaybtn\">all-day</label>" +
134        "<input type=\"checkbox\" class=\"wijmo-wijev-allday\" id=\"_alldaybtn\" />" +
135"</li>" +
136"<li><label>Starts</label>" +
137        "<input type=\"text\" class=\"wijmo-wijev-start\" value=\"\">" +
138        "<input type=\"text\" class=\"wijmo-wijev-start-time\" value=\"\">" +
139"</li>" +
140"<li><label>Ends</label>" +
141        "<input type=\"text\" class=\"wijmo-wijev-end\" value=\"\">" +
142        "<input type=\"text\" class=\"wijmo-wijev-end-time\" value=\"\">" +
143"</li>" +
144"</ul>" +
145
146"<ul class=\"wijmo-wijev-detailed-content ui-corner-all\">" +
147"<li><label>Location</label>" +
148        "<input type=\"text\" class=\"wijmo-wijev-location\" value=\"\"></li>" +
149"<li><label>Repeat</label>" +
150        "<select class=\"wijmo-wijev-repeat\">" +
151                "<option value=\"none\">None</option>" +
152                "<option value=\"daily\">Every Day</option>" +
153                "<option value=\"workdays\">Work days</option>" +
154                "<option value=\"weekly\">Every Week</option>" +
155                "<option value=\"monthly\">Every Month</option>" +
156                "<option value=\"yearly\">Every Year</option>" +
157        "</select></li>" +
158"<li><label>Calendar</label>" +
159        "<select class=\"wijmo-wijev-calendar\"></select></li>" +
160"<li class=\"wijmo-wijev-description-item\"><label>Description</label>" +
161        "<textarea class=\"wijmo-wijev-description\" /></li>" +
162"</ul>" +
163
164"<div class=\"footer\">" +
165                                                "<a href=\"#\" class=\"wijmo-wijev-delete\">Delete</a>" +
166                                                "<a href=\"#\" class=\"wijmo-wijev-save\">OK</a>" +
167                                                "<a href=\"#\" class=\"wijmo-wijev-cancel\">Cancel</a>" +
168"</div>" +
169"<div class=\"wijmo-wijev-angle\"></div>" +
170"</div>"
171                });
172        });
173
174
175    </script>
176    <style type="text/css">
177        #eventscalendar
178        {
179            width: 750px;
180        }
181    </style>
182</head>
183<body class="demo-single">
184    <div class="container">
185        <div class="header">
186            <h2>
187                Custom event dialog</h2>
188        </div>
189        <div class="main demo">
190            <!-- Begin demo markup -->
191               <div id="eventscalendar"></div>
192            <!-- End demo markup -->
193            <div class="demo-options">
194                <!-- Begin options markup -->
195                <!-- End options markup -->
196            </div>
197        </div>
198        <div class="footer demo-description">
199                        <p>
200                                The sample demonstrates how to create new custom event dialog.
201                        </p>
202                        <p>&nbsp;</p>
203                        <p>Options used in the sample:</p>
204                        <ul>
205                                <li><strong>editEventDialogTemplate</strong> - use this option in order to replace built-in event dialog content.</li>
206                        </ul>
207                        <p>Events used in the sample:</p>
208                        <ul>
209                                <li><strong>beforeEditEventDialogShow</strong> - occurs before the built-in event dialog is shown.
210                                        Return false or call event.preventDefault() in order to cancel event and
211                                        prevent the built-in dialog to be shown. Event parameters: e - jQuery.Event object. args - event arguments:
212                                        args.data - the event object data, args.targetCell - target offset DOM element which can be used for popup callout.
213                </li>
214                        </ul>
215                        <p>
216                        Bellow is the event object syntax which is passing to beforeEditEventDialogShow event handler (args.data).
217                        </p>
218                        <pre>   
219                     id - String, unique event id, this field generated automatically;
220                                calendar - String, calendar id to which the event belongs;
221                                subject - String, event title;
222                                location - String, event location;
223                                start - Date, start date/time;
224                                end - Date, end date/time;
225                                description - String, event description;
226                                color - String, event color;
227                                allday - Boolean, indicates all day event
228                                tag - String, this field can be used to store custom information.
229
230                                parentRecurrenceId - String, id of the event object that
231                                                defines the recurrence criteria for this event object.
232                                                If an event is recurring it represents an occurrence in the series that is
233                                                started and defined by a specific pattern event.
234                                                Use the getPatern method in order to obtain the pattern
235                                                of the current event. A pattern event can be recognized by its
236                                                recurrenceState field set to the "master" value.
237                                                The recurrence information defined by the pattern event
238                                                can be accessed  via the recurrencePattern field of the event.
239                                                If this event is a not member of a recurrence,
240                                                or is itself a root event, this field will be null.
241                                recurrenceState - String, indicates the recurrence state of the event.
242                                                (possible values are "notRecurring"(or null), "master", "occurrence",
243                                                "exception", "removed")
244                                recurrencePattern - Object, represents the recurrence attributes
245                                                of an event. Only master events can have this field
246                                                (recurrenceState is "master")
247                                                Object syntax:
248                                                parentRecurrenceId - String, id of the event object
249                                                        which represents the master event for this
250                                                        recurrencePattern object.
251                                                recurrenceType - String, determines the type of recurrence:
252                                                        daily - the recurring event reoccurs on a daily basis.
253                                                        workdays - the recurring event reoccurs every working day.
254                                                        monthly - the recurring event reoccurs on a monthly basis.
255                                                        monthlyNth - the recurring event reoccurs every N months.
256                                                        weekly - the recurring event reoccurs on a weekly basis.
257                                                        yearly - the recurring event reoccurs on an yearly basis.
258                                                        yearlyNth - the recurring event reoccurs every N years.
259                                                interval - Number, specifies the interval between occurrences
260                                                        of the recurrence.
261                                                        The interval field works in conjunction with
262                                                        the "recurrenceType" field to determine the cycle of the recurrence.
263                                                        The maximum allowable value is 99 for weekly patterns and 999
264                                                        for daily patterns.
265                                                        The default value is 1.
266                                                        For example, if the recurrenceType is set
267                                                        to daily, and the "interval" is set to 3,
268                                                        the recurrence will occur every third day.
269                                                startTime - Date, indicates the start time for the given
270                                                        occurrence of the recurrence pattern.
271                                                endTime - Date, indicates the end time for the given
272                                                        occurrence of the recurrence pattern.
273                                                patternStartDate - Date, indicates the start date of the
274                                                        recurrence pattern.
275                                                patternEndDate - Date, indicates the end date of the
276                                                        recurrence pattern.
277                                                        This field is optional but must be coordinated
278                                                        with other fields when setting up a recurrence pattern.
279                                                        If this field or the "occurrences" field is set,
280                                                        the pattern is considered to be finite, and the "noEndDate"
281                                                        field is false.
282                                                        If neither "patternEndDate" nor "occurrences" is set,
283                                                        the pattern is considered infinite and "noEndDate" is true.
284                                                        The "interval" field must be set before
285                                                        setting "patternEndDate".
286                                                occurrences - Number, the number of occurrences for the
287                                                        recurrence pattern.     This field allows the definition of
288                                                        a recurrence pattern that is only valid for the specified
289                                                        number of subsequent occurrences.
290                                                        For example, you can set this property to 10 for a formal
291                                                        training  course that will be held on the next ten Thursday
292                                                        evenings. The default value is 0. This field must be
293                                                        coordinated with other fields when setting up a recurrence pattern.
294                                                        If the "patternEndDate" field or the "occurrences" field
295                                                        is set, the pattern is considered to be finite and the
296                                                        "noEndDate" field is false.
297                                                        If neither "patternEndDate" nor "occurrences" is set,
298                                                        the pattern is considered infinite and "noEndDate" is true.
299                                                instance - String, determines the week in a month in which
300                                                        the event will occur. This field is only valid for recurrences of
301                                                        the "monthlyNth" and "yearlyNth" types and allows the definition
302                                                        of a recurrence pattern that is only valid for the Nth occurrence,
303                                                        such as "the 2nd Sunday in March" pattern.
304                                                        The default value is "first".
305                                                        Possible values are:
306                                                                first - the recurring event will occur on the specified
307                                                                        day or days of the first week in the month.
308                                                                second - The recurring event will occur on the specified
309                                                                        day or days of the second week in the month.
310                                                                third = - The recurring event will occur on the specified
311                                                                        day or days of the third week in the month.
312                                                                fourth - The recurring event will occur on the specified
313                                                                        day or days of the fourth week in the month.
314                                                                last - The recurring event will occur on the specified
315                                                                        day or days of the last week in the month.
316                                                dayOfWeekMask - String, contains set of values representing the mask
317                                                        for week days on which the recurring event occurs.
318                                                        Monthly and yearly patterns are only valid for a single day.
319                                                        The default value is "none".
320                                                        When the "RecurrenceType" field is set to "daily",
321                                                        the "DayOfWeekMask" field can only be set to "everyDay";
322                                                        setting the field to any other value will result in an exception.
323                                                        When the "recurrenceType" field is set to
324                                                        "workdays", the "dayOfWeekMask" field
325                                                        can only be set to "workDays"; setting the field
326                                                        to any other value will result in an exception.
327                                                        When the "recurrenceType" field is set to
328                                                        "weekly", the "dayOfWeekMask" field
329                                                        cannot be set to "none"; doing so will result
330                                                        in an exception being thrown.
331                                                        When the recurrenceType" field is set to
332                                                        "monthly" or "yearly" the "dayOfWeekMask" field is not applicable.
333                                                        Possible values are:
334                                                                none - no specific value; the actual value is obtained from
335                                                                        the root event object.
336                                                                sunday - specifies Sunday.
337                                                                monday - Specifies Monday.
338                                                                tuesday - Specifies Tuesday.
339                                                                wednesday - Specifies Wednesday.
340                                                                thursday - Specifies Thursday.
341                                                                friday - Specifies Friday.
342                                                                saturday - Specifies Saturday.
343                                                                weekendDays - Specifies Saturday and Sunday (or what ever days according
344                                                                        to the settings of the C1EventsCalendar).
345                                                                workDays - Specifies work days (all days except weekend).
346                                                                everyDay - Specifies every day of the week.
347                                                dayOfMonth - Number, the number of the day in its respective month on which
348                                                        each occurrence will occur. Applicable only when the recurrenceType
349                                                        field is set to "monthly" or "yearly".
350                                                        The default value is 1.
351                                                monthOfYear - Number, indicates which month of the year is valid
352                                                        for the specified recurrence pattern. Can be a number from 1 to 12.
353                                                        This field is only valid for recurrence patterns whose recurrenceType"
354                                                        field is set to "yearlyNth" or "yearly".
355                                                        The default value is 1.
356                                                noEndDate - Boolean, indicates if the recurrence pattern is endless.
357                                                        The default value is True. This field must be coordinated with
358                                                        other fields when setting up a recurrence pattern. If the patternEndDate field
359                                                        or the occurrences field is set, the pattern is considered
360                                                        to be finite and the "noEndDate" field is false.
361                                                        If neither patternEndDate nor occurrences is set,
362                                                        the pattern is considered infinite and "noEndDate" is true.
363                                                exceptions - Array, holds the list of event object ids that
364                                                        define the exceptions to that series of events.
365                                                        This field is read-only.
366                                                removedOccurrences - Array, holds the list of event object's ids
367                                                        removed from that series of events.                     
368                        </pre>
369                               
370                       
371        </div>
372    </div>
373</body>
374</html>
Note: See TracBrowser for help on using the repository browser.