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\"> </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> </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> |
---|