FullCalendar:eventColor,eventBackgroundColor, eventBorderColor, and eventTextColor

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>背景色設定</title>
<link href='../fullcalendar.min.css' rel='stylesheet' />
<link href='../fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../fullcalendar.min.js'></script>
<script>
   // ver 3.1.2 當前最新版本,塗聚文Geovin Du 註
    $(document).ready(function() {
 
        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay,listMonth'
            },
            defaultDate: '2017-04-12',
            navLinks: true, // can click day/week names to navigate views
            //businessHours: true, // display business hours 默認設置工作時間和日期
            businessHours:{    // days of week. an array of zero-based day of week integers (0=Sunday)   true 
                dow: [ 1, 2, 3, 4, 5 ], // Monday - Fri   
                start: '09:00', // a start time (09am in this example)   
                end: '18:00', // an end time (6pm in this example)
                overlap: false,
               rendering: 'background', //自定背景色
               color: '#ffffe0'
            },
            editable: true,
            events: [
                {
                    title: 'Business Lunch',
                    start: '2017-04-03T13:00:00',
                    constraint: 'businessHours'
                },
                {
                    title: 'Meeting',
                    start: '2017-04-13T11:00:00',
                    constraint: 'availableForMeeting', // defined below
                     
                },
                {
                    title: 'Conference',
                    start: '2017-04-18',
                    end: '2017-04-20'
                },
                {
                    title: 'Party',
                    start: '2017-04-29T20:00:00'
                },
 
                // areas where "Meeting" must be dropped
                {
                    id: 'availableForMeeting',
                    title: 'availableForMeeting',
                    start: '2017-04-11T10:00:00',
                    end: '2017-04-11T16:00:00',
                    //rendering: 'border-color', //自定指定時間段的樣式                  
                    //color: '#ff9f89'
                 //或
                    //backgroundColor:'#cccccc',
                    //textColor:'#ff9f89',
                    //borderColor:'#9999f89'
 
     
                },
                {
                    id: 'availableForMeeting',
                    start: '2017-04-13T10:00:00',
                    end: '2017-04-13T16:00:00',        
                    //rendering: 'background-color', //自定指定時間段的樣式
                    //color: '#ff9f89'
 
                     
                },
 
                // red areas where no events can be dropped
                {
                    start: '2017-04-24',
                    end: '2017-04-28',
                    overlap: false,
                 
                },
                {
                    start: '2017-04-06',
                    end: '2017-04-08',
                    overlap: false,
                     
                }
            ],
            //eventColor: '#378006', //
            eventTextColor: 'black',
            eventBorderColor:'red',
            eventBackgroundColor:'green'
        });
         
    });
 
</script>
<style type="text/css">
 
    body {
        margin: 40px 10px;
        padding: 0;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        font-size: 14px;
    }
 
    #calendar {
        max-width: 900px;
        margin: 0 auto;
    }
 
</style>
</head>
<body>
 
    <div id='calendar'></div>
 
</body>
</html>

　　https://fullcalendar.io/docs1/event_data/Event_Source_Object/

color,background-color,border-color

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="fullCalendarTimepicker.aspx.cs" Inherits="fullcalendardemo.fullCalendarTimepicker" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>ASP.NET FullCalendar</title>
    <link href="ajax/libs/jqueryui/1.12.1/themes/cupertino/jquery-ui.min.css" rel="stylesheet" />
    <link href="ajax/libs/fullcalendar/3.1.1/fullcalendar.min.css" rel="stylesheet" />
    <link href="ajax/libs/qtip2/3.0.3/jquery.qtip.min.css" rel="stylesheet" />  
    <link rel="stylesheet" media="all" type="text/css" href="ajax/libs/timepicker/jquery-ui-timepicker-addon.css" />
    <link rel="stylesheet" href="ajax/libs/formValidator/css/validationEngine.jquery.css" type="text/css"  media="screen" charset="utf-8" />
 
    <style type='text/css'>
        body
        {
            margin-top: 40px;
            text-align: center;
            font-size: 14px;
            font-family: "Lucida Grande" ,Helvetica,Arial,Verdana,sans-serif;
        }
        #calendar
        {
            width: 900px;
            margin: 0 auto;
        }
        /* css for timepicker */
        .ui-timepicker-div dl
        {
            text-align: left;
        }
        .ui-timepicker-div dl dt
        {
            height: 25px;
        }
        .ui-timepicker-div dl dd
        {
            margin: -25px 0 10px 65px;
        }
        .style1
        {
            width: 100%;
        }
         
        /* table fields alignment*/
        .alignRight
        {
            text-align:right;
            padding-right:10px;
            padding-bottom:10px;
        }
        .alignLeft
        {
            text-align:left;
            padding-bottom:10px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server"> 
    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"> 
    </asp:ScriptManager> 
    <div id="calendar"> 
    </div> 
    <div id="updatedialog" style="font: 70% 'Trebuchet MS', sans-serif; margin: 50px;display: none;" title="Update or Delete Event"> 
        <table class="style1"> 
            <tr> 
                <td class="alignRight"> 
                    標題:</td> 
                <td class="alignLeft"> 
                    <input id="eventName" type="text" size="33" /><br /></td> 
            </tr> 
            <tr> 
                <td class="alignRight"> 
                    描述:</td> 
                <td class="alignLeft"> 
                    <textarea id="eventDesc" cols="30" rows="3" ></textarea></td> 
            </tr> 
            <tr> 
                <td class="alignRight"> 
                    事件類型:</td> 
                <td class="alignLeft">                
                  <select id="editTypeid" name="editTypeid">
                    <option value="1">公务</option>
                     <option value="2">私务</option>
                    </select>
                   </td> 
                   
            </tr>
              <tr> 
                <td class="alignRight"> 
                    是否全天:</td> 
                <td class="alignLeft">
                    <input id="editday" type="checkbox"  name="eidtday"/>
                    </td> 
            </tr>
            <tr> 
                <td class="alignRight"> 
                    開始時間:</td> 
                <td class="alignLeft"> 
                    <input id="eventStart"  name="eventStart" class="validate[required,funcCall[validate12time]]" value="" /></td> 
            </tr> 
            <tr> 
                <td class="alignRight"> 
                    結束時間: </td> 
                <td class="alignLeft"> 
                    <input id="eventEnd" name="eventEnd" class="validate[required,funcCall[validate12time]]" value=""/><input type="hidden" id="eventId" /></td> 
            </tr> 
        </table> 
    </div> 
    <div id="addDialog" style="font: 70% 'Trebuchet MS', sans-serif; margin: 50px;" title="Add Event"> 
    <table class="style1"> 
            <tr> 
                <td class="alignRight"> 
                    標題:</td> 
                <td class="alignLeft"> 
                    <input id="addEventName" type="text" size="33" /><br /></td> 
            </tr> 
            <tr> 
                <td class="alignRight"> 
                    描述:</td> 
                <td class="alignLeft"> 
                    <textarea id="addEventDesc" cols="30" rows="3" ></textarea></td> 
            </tr>
            <tr> 
                <td class="alignRight"> 
                    事件類型:</td> 
                <td class="alignLeft"> 
                    <select id="addTypeid" name="addTypeid">
                     <option value="1">公务</option>
                     <option value="2">私务</option>
                    </select>
                   </td> 
            </tr>
                <tr> 
                <td class="alignRight"> 
                    是否全天:</td> 
                <td class="alignLeft">
                <input id="addallday" type="checkbox" name="addallday"/>
                 
                    </td> 
            </tr>          
            <tr> 
                <td class="alignRight"> 
                    開始時間:</td> 
                <td class="alignLeft"> 
                    <input id="addEventStartDate" class="validate[required,funcCall[validate2time]]" name="addEventStartDate" value=""/></td> 
            </tr> 
            <tr> 
                <td class="alignRight"> 
                    結束時間:</td> 
                <td class="alignLeft"> 
                    <input id="addEventEndDate" class="validate[required,funcCall[validate2time]]" name="addEventEndDate" value=""/></td> 
            </tr> 
        </table> 
           
    </div> 
    <div runat="server" id="jsonDiv" /> 
    <input type="hidden" id="hdClient" runat="server" /> 
    </form> 
   
    <script src="ajax/libs/moment.js/2.18.1/moment.min.js" type="text/javascript"></script> 
    <script src="ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script> 
    <script src="ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" type="text/javascript"></script> 
    <script src="ajax/libs/qtip2/3.0.3/jquery.qtip.min.js" type="text/javascript"></script> 
     <script type="text/javascript" src="ajax/libs/timepicker/jquery-ui-timepicker-addon.js"></script> 
     <script type="text/javascript" src="ajax/libs/timepicker/i18n/jquery-ui-timepicker-addon-i18n.min.js"></script> 
     <script type="text/javascript" src="ajax/libs/timepicker/i18n/jquery-ui-timepicker-zh-CN.js"></script> 
     <script type="text/javascript" src="ajax/libs/timepicker/jquery-ui-sliderAccess.js"></script> 
    <script src="ajax/libs/fullcalendar/3.1.1/fullcalendar.min.js" type="text/javascript"></script> 
    <script src='ajax/libs/fullcalendar/3.1.1/locale-all.js' type="text/javascript"></script> 
        <script src="ajax/libs/formValidator/js/jquery.validationEngine.js" type="text/javascript"></script> 
     <script src="ajax/libs/formValidator/js/languages/jquery.validationEngine-zh_CN.js" type="text/javascript"></script>   
     <script src="ajax/libs/jqueryui/1.12.1/ui/i18n/datepicker-zh-CN.js" type="text/javascript"></script> 
    <script src="scripts/calendarscriptTime.js" type="text/javascript"></script> 
</body> 
</html> 

　　calendarscriptTime.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
var currentUpdateEvent;
var addStartDate;
var addEndDate;
var globalAllDay;
var addtypeid;
var addallday;
var dt;
//修改時,穫取值
// 涂聚文 Geovin Du edit 20170417
//增加是否全天,事件類型
function updateEvent(event, element) {
    //alert(event.description);
 
    if ($(this).data("qtip")) $(this).qtip("destroy");
 
    currentUpdateEvent = event;
    dt= new Date()
    $('#updatedialog').dialog('open');
    $("#eventName").val(event.title);
    $("#eventDesc").val(event.description);
    $("#eventId").val(event.id);
    $("#eventStart").val("" + $.fullCalendar.formatDate(event.start, "YYYY-MM-DD HH:mm")); //text $.fullCalendar.formatDate(event.start, "YYYY-MM-DD HH:mm")
    $("#eventStart").datetimepicker({ timeInput: true, changeMonth: true, changeYear: true, dateFormat: 'yy-mm-dd', timeFormat: 'HH:mm', hourMin: 5, hourMax: 24, hourGrid: 3, minuteGrid: 15 }); //timeInput: true,
    //$("#eventStart").datetimepicker('setDate', (new Date()));
    $("#editTypeid").val(event.typeid);   
    if (event.end === null) {
        $("#eventEnd").val("" + $.fullCalendar.formatDate(dt, "YYYY-MM-DD HH:mm")); //text
    }
    else {
        $("#eventEnd").val("" + $.fullCalendar.formatDate(event.end, "YYYY-MM-DD HH:mm")); //text  event.end.toLocaleString()
        $("#eventEnd").datetimepicker({ timeInput: true, changeMonth: true, changeYear: true, dateFormat: 'yy-mm-dd', timeFormat: 'HH:mm', hourMin: 5, hourMax: 24, hourGrid: 3, minuteGrid: 15 }); //
    }
    $("#editday").prop("checked", event.allDay); //
    return false;
}
 
function updateSuccess(updateResult) {
    //alert(updateResult);
}
 
function deleteSuccess(deleteResult) {
    //alert(deleteResult);
}
 
function addSuccess(addResult) {
    // if addresult is -1, means event was not added
    //    alert("added key: " + addResult);
 
    if (addResult != -1) {
        $('#calendar').fullCalendar('renderEvent',
                        {
                            title: $("#addEventName").val(),
                            start: addStartDate,
                            end: addEndDate,
                            id: addResult,
                            description: $("#addEventDesc").val(),
                            allDay: $("#addallday").prop('checked'), //  globalAllDay,
                            typeid: $("#addTypeid").val() //addtypeid
                        },
                        true // make the event "stick"
                    );
 
 
        $('#calendar').fullCalendar('unselect');
    }
}
 
function UpdateTimeSuccess(updateResult) {
    //alert(updateResult);
}
//
$("#addEventStartDate").datetimepicker({
    timeInput: true,
    changeMonth: true,
    changeYear: true,
    dateFormat: 'yy-mm-dd',
    timeFormat: 'HH:mm', hourMin: 5, hourMax: 24, hourGrid: 3, minuteGrid: 15
});
//
$("#addEventEndDate").datetimepicker({
    timeInput: true,
    changeMonth: true,
    changeYear: true,
    dateFormat: 'yy-mm-dd',
    timeFormat: 'HH:mm', hourMin: 5, hourMax: 24, hourGrid: 3, minuteGrid: 15
});
 
//選擇時，穫取值
function selectDate(start, end, allDay, typeid) {
    //$('#addEventStartDate').datetimepicker();
    $('#addDialog').dialog('open');
    $("#addEventStartDate").val("" + $.fullCalendar.formatDate(start, "YYYY-MM-DD HH:mm")); //text //標簽span $.fullCalendar.formatDate(start, "yyyy/MM/dd HH:mm");
    $("#addEventEndDate").val("" + $.fullCalendar.formatDate(end, "YYYY-MM-DD HH:mm")); //text $.fullCalendar.formatDate(end, "yyyy/MM/dd HH:mm");
    //$("#addEventStartDate").datetimepicker('setDate', $.fullCalendar.formatDate(start, "YYYY-MM-DD HH:mm")); //設置值,日期格式還存在不相符問題
    addStartDate = start;
    addEndDate = end;
    globalAllDay = allDay;
    addtypeid = typeid;
    //alert(allDay);
}
 
function updateEventOnDropResize(event, allDay) {
 
    //alert("allday: " + allDay);
    var eventToUpdate = {
        id: event.id,
        start: event.start
    };
 
    if (event.end === null) {
        eventToUpdate.end = eventToUpdate.start;
    }
    else {
        eventToUpdate.end = event.end;
    }
 
    var endDate;
    if (!event.allDay) {
        endDate = new Date(eventToUpdate.end + 60 * 60000);
        endDate = endDate.toJSON();
    }
    else {
        endDate = eventToUpdate.end.toJSON();
    }
 
    eventToUpdate.start = eventToUpdate.start.toJSON();
    eventToUpdate.end = eventToUpdate.end.toJSON(); //endDate;
    eventToUpdate.allDay = event.allDay;
 
    PageMethods.UpdateEventTime(eventToUpdate, UpdateTimeSuccess);
}
 
function eventDropped(event, dayDelta, minuteDelta, allDay, revertFunc) {
    if ($(this).data("qtip")) $(this).qtip("destroy");
 
    updateEventOnDropResize(event);
}
 
function eventResized(event, dayDelta, minuteDelta, revertFunc) {
    if ($(this).data("qtip")) $(this).qtip("destroy");
 
    updateEventOnDropResize(event);
}
//隻可輸入數字，字母，中文，中文標點符號 20170417 塗聚文 EDIT
function checkForSpecialChars(stringToCheck) {
    var pattern = /[^A-Za-z0-9 |\u4e00-\u9fa5|\u3002|\uff1f|\uff01|\uff0c|\u3001|\uff1b|\uff1a|\u201c|\u201d|\u2018|\u2019|\uff08|\uff09|\u300a|\u300b|\u3008|\u3009|\u3010|\u3011|\u300e|\u300f|\u300c|\u300d|\ufe43|\ufe44|\u3014|\u3015|\u2026|\u2014|\uff5e|\ufe4f|\uffe5]/;  //A-Za-z0-9
    return pattern.test(stringToCheck);
}
//判斷是否整天時間(根据開始時間和結束時間)
function isAllDay(startDate, endDate) {
    var allDay;
    //startDate.format("HH:mm:ss") == "00:00:00" && endDate.format("HH:mm:ss") == "00:00:00"
    if (getDiffIntHour(startDate, endDate))
    {
        allDay = true;
        globalAllDay = true;
    }
    else {
        allDay = false;
        globalAllDay = false;
    }
 
    return allDay;
}
 
//大于二十四小時為大于1天
function getDiffIntHour(startDate, endDate) {
    var allDay;
    var diffMs = Math.abs(endDate - startDate);
    var diffDays = Math.round(diffMs / 86400000); // days
    var diffHrs = Math.round((diffMs % 86400000) / 3600000); // hours
    var diffMins = Math.round(((diffMs % 86400000) % 3600000) / 60000); // minutes
    var diff = endDate - startDate;
    var diffSeconds = diff / 1000;
    var HH = Math.floor(diffSeconds / 3600);
    var MM = Math.floor(diffSeconds % 3600) / 60;
    if (HH > 24) {
        allDay = true;
         globalAllDay = true;
         
     }
    else {
        allDay = false;
        globalAllDay = false;
    }
    return allDay;
}
 
///
function getDiffTime(startDate, endDate) {
    var allDay;
    var diffMs = Math.abs(endDate - startDate);
    var diffDays = Math.floor(diffMs / 86400000); // days
    var diffHrs = Math.floor((diffMs % 86400000) / 3600000); // hours
    var diffMins = Math.floor(((diffMs % 86400000) % 3600000) / 60000); // minutes
    if (diffHrs > 24) {
        allDay = true;
        globalAllDay = true;
    }
    else {
        allDay = false;
        globalAllDay = false;
    }
    return allDay;
}
 
 
///
function GetDateDiff(startTime, endTime, diffType) {
    //将xxxx-xx-xx的时间格式，转换为 xxxx/xx/xx的格式
    startTime = startTime.replace(/\-/g, "/");
    endTime = endTime.replace(/\-/g, "/");
    //将计算间隔类性字符转换为小写
    diffType = diffType.toLowerCase();
    var sTime = new Date(startTime); //开始时间
    var eTime = new Date(endTime); //结束时间
    //作为除数的数字
    var timeType = 1;
    switch (diffType) {
        case "second":
            timeType = 1000;
            break;
        case "minute":
            timeType = 1000 * 60;
            break;
        case "hour":
            timeType = 1000 * 3600;
            break;
        case "day":
            timeType = 1000 * 3600 * 24;
            break;
        default:
            break;
    }
    return parseInt((eTime.getTime() - sTime.getTime()) / parseInt(timeType));
}
 
//提示內容
function qTipText(start, end, description) {
    var text;
 
    if (end !== null)
        text = "<strong>开始:</strong> " + start.format("YYYY-MM-DD hh:mm T") + "<br/><strong>结束:</strong> " + end.format("YYYY-MM-DD hh:mm T") + "<br/><br/>" + description;
    else
        text = "<strong>开始:</strong> " + start.format("YYYY-MM-DD hh:mm T") + "<br/><strong>结束:</strong><br/><br/>" + description;
 
    return text;
}
 
$(document).ready(function () {
 
    // update Dialog 修改，刪除
    $('#updatedialog').dialog({
        autoOpen: false,
        width: 470,
        buttons: {
            "update": function () {
                //alert(currentUpdateEvent.title);
                //var stest = $("#editday").prop('checked'); //
                //alert(stest);
                var eventToUpdate = {
                    id: currentUpdateEvent.id,
                    title: $("#eventName").val(),
                    description: $("#eventDesc").val(),
                    allDay: $("#editday").prop('checked'),
                    typeid: $("#editTypeid").val()
                };
 
                if (checkForSpecialChars(eventToUpdate.title) || checkForSpecialChars(eventToUpdate.description)) {
                    alert("please enter characters: 可輸入數字，字母，中文，中文標點符號, 空格");
                }
                else {
                    PageMethods.UpdateEvent(eventToUpdate, updateSuccess);
                    $(this).dialog("close");
 
                    currentUpdateEvent.title = $("#eventName").val();
                    currentUpdateEvent.description = $("#eventDesc").val();
                    $('#calendar').fullCalendar('updateEvent', currentUpdateEvent);
                    $('#calendar').fullCalendar('refresh');//
                }
 
            },
            "delete": function () {
 
                if (confirm("do you really want to delete this event?")) {
 
                    PageMethods.deleteEvent($("#eventId").val(), deleteSuccess);
                    $(this).dialog("close");
                    $('#calendar').fullCalendar('removeEvents', $("#eventId").val());
                }
            }
        }
    });
 
    //add dialog 添加
    $('#addDialog').dialog({
        autoOpen: false,
        width: 470,
        buttons: {
            "Add": function () {
                //alert("sent:" + addStartDate.format("dd-MM-yyyy hh:mm:ss tt") + "==" + addStartDate.toLocaleString());
                //alert($("#addallday").is('checked'));
                var eventToAdd = {
                    title: $("#addEventName").val(),
                    description: $("#addEventDesc").val(),
                    typeid: $("#addTypeid").val(),
                    start: addStartDate.toJSON(), //addStartDate.toJSON()
                    end: addEndDate.toJSON(),
                    allDay: $("#addallday").prop('checked')//isAllDay(addStartDate, addEndDate)  //$('input[name=foo]').is(':checked')
                };
 
                if (checkForSpecialChars(eventToAdd.title) || checkForSpecialChars(eventToAdd.description)) {
                    alert("please enter characters: 可輸入數字，字母，中文，中文標點符號, 空格");
                }
                else {
                    //alert("sending " + eventToAdd.title);
 
                    PageMethods.addEvent(eventToAdd, addSuccess);
                    $(this).dialog("close");
                }
            }
        }
    });
 
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();
    var options = {
        weekday: "long", year: "numeric", month: "short",
        day: "numeric", hour: "2-digit", minute: "2-digit"
    };
 
    $('#calendar').fullCalendar({
        theme: true,
        header: {
            left: 'prev,next today customBtn',
            center: 'title',
            right: 'month,agendaWeek,agendaDay,listWeek' //顯示日程列表
        },
        customButtons: {
            customBtn: {
                text: 'Custom Button',
                click: function () {
                    alert('This custom button is hot! 🔥\nNow go have fun!');
                }
            }
        },
        defaultView: 'agendaWeek',
        eventClick: updateEvent,
        selectable: true,
        selectHelper: true,
        businessHours: {    // days of week. an array of zero-based day of week integers (0=Sunday)   true 
            dow: [1, 2, 3, 4, 5], // Monday - Thursday   
            start: '09:00', // a start time (09am in this example)   
            end: '18:00', // an end time (6pm in this example)
            overlap: false,
            rendering: 'background', //自定背景色
            color: '#ffffe0'
        },
        select: selectDate,
        editable: true,
        navLinks: true, // can click day/week names to navigate views
        weekNumbers: true, //顯示第几周
        //weekNumbersWithinDays: true,
        weekNumberCalculation: 'zh-cn',
        locale: 'zh-cn',
        events: "JsonResponse.ashx",
        eventDrop: eventDropped, //可以拖動
        eventResize: eventResized, //可以改變大小
        eventRender: function (event, element) {
            //alert(event.title);
 
            element.qtip({
                content: {
                    text: qTipText(event.start, event.end, event.description), //提示顯示的內容
                    title: '<strong>' + event.title + ',' + event.typeid + '</strong>'
                },
                position: {
                    my: 'bottom left',
                    at: 'top right'
                },
                style: { classes: 'qtip-shadow qtip-rounded' }
            });
        }
    });
});
 
function validate12time() {
    //alert("debug");
 
    var start = $("#eventStart").val();
    var end = $("#eventEnd").val();
    var cresult = 0;
    if (new Date(start) < new Date(end)) {
        cresult = 0;
    }
    else {
        cresult = 1;
    }
 
    //     alert(cresult);
    if (cresult == 0) {
        return false;
    } else if (cresult == 1) {
        $.validationEngine.closePrompt("#eventStart");
        return true;
    }
 
}
 
 
function validate2time() {
    //alert("debug");
 
    var start = $("#addEventStartDate").val();
    var end = $("#addEventEndDate").val();
    var cresult = 0;
    if (new Date(start) < new Date(end)) {
        cresult = 0;
    }
    else {
        cresult = 1;
    }
 
    //     alert(cresult);
    if (cresult == 0) {
        return false;
    } else if (cresult == 1) {
        $.validationEngine.closePrompt("#addEventStartDate");
        return true;
    }
 
}

　　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="typedemo.aspx.cs" Inherits="fullcalendardemo.typedemo" %>
 
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>ASP.NET FullCalendar--jQuery MiniColors</title>
      <link href="ajax/libs/jqueryui/1.12.1/themes/cupertino/jquery-ui.min.css" rel="stylesheet" />
      <link rel="stylesheet" href="ajax/libs/bootstrap/3.3.1/css/bootstrap.min.css"/>
      <link rel="stylesheet" href="ajax/libs/minicolors/jquery.minicolors.css"/>     
      <script src="ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script> 
    <script src="ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" type="text/javascript"></script>
        <!-- Bootstrap 3 -->   
    <script src="ajax/libs/bootstrap/3.3.1/js/bootstrap.min.js" type="text/javascript"></script>
    <!-- MiniColors -->
    <script src="ajax/libs/minicolors/jquery.minicolors.js" type="text/javascript"></script>
    <style type="text/css">
        dl {
            margin: 20px 0;
        }
        dt {
            font-size: 120%;
        }
        dd {
            padding: 10px 20px 20px 20px;
        }
        dd:last-child {
            border-bottom: none;
        }
        code {
            color: black;
            border: none;
            background: rgba(128, 128, 128, .1);
        }
        pre {
            background: #f8f8f8;
            border: none;
            color: #333;
            padding: 20px;
        }
        h2 {
            margin-top: 50px;
        }
        h3 {
            color: #aaa;
        }
        .jumbotron {
            padding: 40px;
        }
        .jumbotron h1 {
            margin-top: 0;
        }
        .jumbotron p:last-child {
            margin-bottom: 0;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
 
            $('.demo').each(function () {
                //
                // Dear reader, it's actually very easy to initialize MiniColors. For example:
                //
                //  $(selector).minicolors();
                //
                // The way I've done it below is just for the demo, so don't get confused
                // by it. Also, data- attributes aren't supported at this time...they're
                // only used for this demo.
                //
                $(this).minicolors({
                    control: $(this).attr('data-control') || 'hue',
                    defaultValue: $(this).attr('data-defaultValue') || '',
                    format: $(this).attr('data-format') || 'hex',
                    keywords: $(this).attr('data-keywords') || '',
                    inline: $(this).attr('data-inline') === 'true',
                    letterCase: $(this).attr('data-letterCase') || 'lowercase',
                    opacity: $(this).attr('data-opacity'),
                    position: $(this).attr('data-position') || 'bottom left',
                    swatches: $(this).attr('data-swatches') ? $(this).attr('data-swatches').split('|') : [],
                    change: function (value, opacity) {
                        if (!value) return;
                        if (opacity) value += ', ' + opacity;
                        if (typeof console === 'object') {
                            console.log(value);
                        }
                    },
                    theme: 'bootstrap'
                });
 
            });
 
        });
    </script>
 
 
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <!-- Control types -->
            <h3>Control Types</h3>
            <div class="well">
                <div class="row">
                    <div class="col-lg-4 col-sm-4 col-12">
 
                        <div class="form-group">
                            <label for="hue-demo">Hue (default)</label>
                            <input type="text" id="hue-demo" class="form-control demo" data-control="hue" value="#ff6161">
                        </div>
                        <div class="form-group">
                            <label for="saturation-demo">Saturation</label>
                            <input type="text" id="saturation-demo" class="form-control demo" data-control="saturation" value="#0088cc">
                        </div>
                    </div>
 
                    <div class="col-lg-4 col-sm-4 col-12">
                        <div class="form-group">
                            <label for="brightness-demo">Brightness</label>
                            <input type="text" id="brightness-demo" class="form-control demo" data-control="brightness" value="#00ffff">
                        </div>
                        <div class="form-group">
                            <label for="wheel-demo">Wheel</label>
                            <input type="text" id="wheel-demo" class="form-control demo" data-control="wheel" value="#ff99ee">
                        </div>
                    </div>
                </div>
            </div>
            <!-- Input modes -->
            <h3>Input Modes</h3>
            <div class="well">
                <div class="row">
                    <div class="col-lg-4 col-sm-4 col-12">
                        <div class="form-group">
                            <label for="text-field">Text field</label>
                            <br>
                            <input type="text" id="text-field" class="form-control demo" value="#70c24a">
                        </div>
                        <div class="form-group">
                            <label for="hidden-input">Hidden Input</label>
                            <br>
                            <input type="hidden" id="hidden-input" class="demo" value="#db913d">
                        </div>
                    </div>
                    <div class="col-lg-4 col-sm-4 col-12">
                        <div class="form-group">
                            <label for="inline">Inline</label>
                            <br>
                            <input type="text" id="inline" class="form-control demo" data-inline="true" value="#4fc8db">
                        </div>
                    </div>
                </div>
            </div>
 
            <!-- Positions -->
            <h3>Positions</h3>
            <div class="well">
                <p>
                    Valid positions include <code>bottom left</code>, <code>bottom right</code>, <code>top
                    left</code>, and <code>top right</code>.
                </p>
                <div class="row">
                    <div class="col-lg-4 col-sm-4 col-12">
                        <div class="form-group">
                            <label for="position-bottom-left">bottom left (default)</label>
                            <input type="text" id="position-bottom-left" class="form-control demo" data-position="bottom left" value="#0088cc">
                        </div>
                        <div class="form-group">
                            <label for="position-top-left">top left</label>
                            <input type="text" id="position-top-left" class="form-control demo" data-position="top left" value="#0088cc">
                        </div>
                    </div>
                    <div class="col-lg-4 col-sm-4 col-12">
                        <div class="form-group">
                            <label for="position-bottom-right">bottom right</label>
                            <input type="text" id="position-bottom-right" class="form-control demo" data-position="bottom right" value="#0088cc">
                        </div>
                        <div class="form-group">
                            <label for="position-top-right">top right</label>
                            <input type="text" id="position-top-right" class="form-control demo" data-position="top right" value="#0088cc">
                        </div>
                    </div>
                    <div class="col-lg-4 col-sm-4 col-12">
                    </div>
                </div>
            </div>
 
            <!-- RGB(A) -->
            <h3>RGB(A)</h3>
            <div class="well">
                <div class="row">
                    <div class="col-lg-4 col-sm-4 col-12">
                        <div class="form-group">
                            <label for="rgb">RGB</label>
                            <br>
                            <input type="text" id="rgb" class="form-control demo" data-format="rgb" value="rgb(33, 147, 58)">
                            <span class="help-block">
                                RGB input can be assigned by setting the <code>format</code> option
                                to <code>rgb</code>.
                            </span>
                        </div>
                    </div>
                    <div class="col-lg-4 col-sm-4 col-12">
                        <div class="form-group">
                            <label for="rgba">RGBA</label>
                            <br>
                            <input type="text" id="rgba" class="form-control demo" data-format="rgb" data-opacity=".5" value="rgba(52, 64, 158, 0.5)">
                            <span class="help-block">
                                RGBA input can be assigned by setting the <code>format</code>
                                option to <code>rgb</code> and <code>opacity</code> option to
                                <code>true</code>.
                            </span>
                        </div>
                    </div>
                </div>
            </div>
 
            <!-- and more -->
            <h3>…and more!</h3>
            <div class="well">
                <div class="row">
                    <div class="col-lg-4 col-sm-4 col-12">
                        <div class="form-group">
                            <label for="opacity">Opacity</label>
                            <br>
                            <input type="text" id="opacity" class="form-control demo" data-opacity=".5" value="#766fa8">
                            <span class="help-block">
                                Opacity can be assigned by including the <code>data-opacity</code>
                                attribute or by setting the <code>opacity</code> option to
                                <code>true</code>.
                            </span>
                        </div>
                    </div>
                    <div class="col-lg-4 col-sm-4 col-12">
                        <div class="form-group">
                            <label for="keywords">Keywords</label>
                            <br>
                            <input type="text" id="keywords" class="form-control demo" data-keywords="transparent, initial, inherit" value="transparent">
                            <span class="help-block">
                                CSS-wide keywords can be assigned by setting the <code>keywords</code>
                                option to a comma-separated list of valid keywords: <code>transparent,
                                initial, inherit</code>.
                            </span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-4 col-sm-4 col-12">
                        <div class="form-group">
                            <label for="default-value">Default Value</label>
                            <br>
                            <input type="text" id="default-value" class="form-control demo" data-defaultValue="#ff6600">
                            <span class="help-block">
                                This field has a default value assigned to it, so it will never be empty.
                            </span>
                        </div>
                    </div>
                    <div class="col-lg-4 col-sm-4 col-12">
                        <div class="form-group">
                            <label for="letter-case">Letter Case</label>
                            <br>
                            <input type="text" id="letter-case" class="form-control demo" data-letterCase="uppercase" value="#abcdef">
                            <span class="help-block">
                                This field will always be uppercase.
                            </span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-4 col-sm-4 col-12">
                        <div class="form-group">
                            <label for="input-group">Input Groups</label>
                            <div class="input-group">
                                <input type="text" id="input-group" class="form-control demo" value="#ff0000"/>
                                <span class="input-group-btn">
                                    <button class="btn btn-default" type="button">Button</button>
                                </span>
                            </div>
                            <span class="help-block">
                                Example using Bootstrap's input groups.
                            </span>
                        </div>
                    </div>
                    <div class="col-lg-4 col-sm-4 col-12">
                        <div class="form-group">
                            <label for="more-input-group">More Input Groups</label>
                            <div class="input-group">
                                <span class="input-group-addon">Color</span>
                                <input type="text" id="more-input-group" class="form-control demo" value="#ff0000"/>
                                <span class="input-group-btn">
                                    <button class="btn btn-default" type="button">Button</button>
                                </span>
                            </div>
                            <span class="help-block">
                                Input group example with addon.
                            </span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-4 col-sm-4 col-12">
                        <div class="form-group">
                            <label for="letter-case">Swatches</label>
                            <br>
                            <input type="text" id="swatches" class="form-control demo" data-swatches="#ef9a9a|#90caf9|#a5d6a7|#fff59d|#ffcc80|#bcaaa4|#eeeeee|#f44336|#2196f3|#4caf50|#ffeb3b|#ff9800|#795548|#9e9e9e" value="#abcdef">
                            <span class="help-block">
                                Example with swatches.
                            </span>
                        </div>
                    </div>
                    <div class="col-lg-4 col-sm-4 col-12">
                        <div class="form-group">
                            <label for="letter-case">Swatches and opacity</label>
                            <br>
                            <input type="text" id="swatches" class="form-control demo" data-format="rgb" data-opacity="1" data-swatches="#fff|#000|#f00|#0f0|#00f|#ff0|rgba(0,0,255,0.5)"  value="rgba(14, 206, 235, .5)">
                            <span class="help-block">
                                Example with swatches and opacity.
                            </span>
                        </div>
                    </div>
                </div>
            </div>
 
    </div>
    </form>
</body>
</html>

　　https://github.com/coldicelion/Simple-Web-Crawler （网络爬虫）

 

https://github.com/shadowsocks

https://github.com/knightliao/disconf-demos-java

https://github.com/yuzukwok/disconf.net （分布式）

https://github.com/microsoft/reactxp

https://github.com/jstedfast/MailKit （邮件）

https://github.com/quartznet/quartznet （任务调度）

https://github.com/JimBobSquarePants/ImageProcessor（图形处理）

https://github.com/ServiceStack/ServiceStack.Redis

https://redis.codeplex.com/SourceControl/latest

https://github.com/StackExchange/StackExchange.Redis

https://github.com/HangfireIO/Hangfire （任务）

https://github.com/mono/taglib-sharp/ （媒体操作）

 

ORM:(开源)

 https://github.com/CollaboratingPlatypus/PetaPoco

https://github.com/StackExchange/Dapper

https://github.com/FransBouma/Massive

https://github.com/markrendle/Simple.Data

https://github.com/docevaad/Chain

 

posted @   ®Geovin Du Dream Park™  阅读(2103)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示