@aleen42/calendar 1.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md ADDED
File without changes
package/demo.html ADDED
@@ -0,0 +1,119 @@
1
+ <!--
2
+ ~ Copyright (c) 2025 Mailtech.cn, Ltd. All Rights Reserved.
3
+ -->
4
+ <!doctype html>
5
+ <html lang="en">
6
+ <head>
7
+ <script src="./node_modules/jquery/dist/jquery.js"></script>
8
+ <script src="./dist/calendar.js"></script>
9
+ <link rel="stylesheet" href="./dist/iconfont.css" />
10
+ <link rel="stylesheet" href="./dist/calendar.css" />
11
+ <style>
12
+ body {
13
+ margin: 0;
14
+ }
15
+
16
+ .cal-aside {
17
+ position: absolute;
18
+ width: 276px;
19
+ height: 100%;
20
+ }
21
+
22
+ .cal-content {
23
+ position: absolute;
24
+ left: 276px;
25
+ right: 0;
26
+ top: 0;
27
+ bottom: 0;
28
+ }
29
+ </style>
30
+ <title></title>
31
+ </head>
32
+ </html>
33
+ <body>
34
+ <div class=cal-aside>
35
+ <div class=j-datepicker></div>
36
+ </div>
37
+ <div class=cal-content></div>
38
+ <script>
39
+ initCalendar('MONTH');
40
+
41
+ function initCalendar(viewType) {
42
+ Calendar(
43
+ [$('.cal-content').attr('class', 'cal-content'), $('.cal-aside > .j-datepicker')],
44
+ viewType,
45
+ {
46
+ load : (function (start, end, searchParams) {
47
+ var data = [];
48
+ if (searchParams) {
49
+ data = data.concat(mock(new Date()));
50
+ } else {
51
+ start = new Date(start);
52
+ end = new Date(end);
53
+ var currentDate = new Date(start);
54
+ currentDate.setHours(0, 0, 0, 0);
55
+
56
+ while (currentDate <= end) {
57
+ data.push({date : isoDate(currentDate), events : mock(currentDate)});
58
+ currentDate.setDate(currentDate.getDate() + 1);
59
+ }
60
+ }
61
+
62
+ return Promise.resolve(data);
63
+ }),
64
+ viewBubble : (event, $target) => {
65
+ alert(JSON.stringify(event));
66
+ },
67
+ aside : localStorage.getItem('aside') === 'true',
68
+ onToggleAside : function (display) {
69
+ return localStorage.setItem('aside', display);
70
+ },
71
+ limit: 1,
72
+ }
73
+ )
74
+
75
+ $('[data-type="' + viewType + '"]', $('.cal-content .toolbar').append(
76
+ $('<div class="u-btns f-fr f-mgr">').html([
77
+ '<div data-type=DAY class="u-btn u-btn-default">Day</div>',
78
+ '<div data-type=WEEK class="u-btn u-btn-default">Week</div>',
79
+ '<div data-type=MONTH class="u-btn u-btn-default">Month</div>',
80
+ '<div data-type=LIST class="u-btn u-btn-default">Event</div>'
81
+ ]).on('click', '[data-type]', function () {
82
+ initCalendar($(this).data().type);
83
+ })
84
+ )).addClass('active');
85
+ }
86
+
87
+
88
+ function isoDate(date) {
89
+ var year = date.getFullYear();
90
+ var month = String(date.getMonth() + 1).padStart(2, '0');
91
+ var day = String(date.getDate()).padStart(2, '0');
92
+ return `${year}-${month}-${day}`; // YYYY-MM-DD
93
+ }
94
+
95
+ function mock(currentDate) {
96
+ var id = 1, seed = Math.random(), dateStr = isoDate(currentDate), isOutOfDate = currentDate <= new Date();
97
+ return seed < 0.7 ? new Array(Math.floor(seed * 10)).fill('').map((_, i) => ({
98
+ bodyType : 0,
99
+ meetingStatus : 0,
100
+ attendees : [],
101
+ isDraft : false,
102
+ start : dateStr + ' 00:00:00',
103
+ body : 'xxx-' + id,
104
+ duration : i > 3 ? 3600 * 24 : 3600 + 60 * 60 * i,
105
+ UID : 'uid-' + id,
106
+ allDayEvent : i > 3,
107
+ isOrganizer : true,
108
+ organizer : 'foo@bar.com',
109
+ name : 'name-' + id,
110
+ location : '',
111
+ id : id++,
112
+ isOutOfDate : isOutOfDate,
113
+ rangeStart : dateStr + ' 00:00:00',
114
+ rangeExpired : isOutOfDate,
115
+ checkCode : 0
116
+ })) : [];
117
+ }
118
+ </script>
119
+ </body>
Binary file
@@ -0,0 +1,19 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg">
2
+ <style type="text/css"> <![CDATA[
3
+ /* support url reference with SVG symbols, ref: https://stackoverflow.com/a/58275329/5698182 */
4
+ svg > svg:not(:target) { display: none; }
5
+ /* 假定 icon 的基色是 #505052 */
6
+ symbol path[fill="#505052"] { fill : #505052 }
7
+ symbol path:not([fill="#505052"]):not([fill="#FFFFFF"]):not([fill="#ffffff"]) { fill : #2c6ccc }
8
+ ]]></style>
9
+ <symbol id="icon-e6f7" viewBox="0 0 1024 1024"><path d="M51.2 512a460.8 460.8 0 1 1 921.6 0 460.8 460.8 0 0 1-921.6 0z m460.8-512C229.2224 0 0 229.2224 0 512s229.2224 512 512 512 512-229.2224 512-512S794.7776 0 512 0z" fill="#424242" ></path></symbol>
10
+ <symbol id="icon-e6f9" viewBox="0 0 1024 1024"><path d="M51.2 512a460.8 460.8 0 1 1 921.6 0 460.8 460.8 0 0 1-921.6 0z m460.8-512C229.2224 0 0 229.2224 0 512s229.2224 512 512 512 512-229.2224 512-512S794.7776 0 512 0z" fill="#2C6CCC" ></path><path d="M768 512a256 256 0 1 1-512 0 256 256 0 0 1 512 0z" fill="#2C6CCC" ></path></symbol>
11
+ <symbol id="icon-e6fa" viewBox="0 0 1024 1024"><path d="M870.4 51.2a102.4 102.4 0 0 1 102.4 102.4v716.8a102.4 102.4 0 0 1-102.4 102.4H153.6a102.4 102.4 0 0 1-102.4-102.4V153.6a102.4 102.4 0 0 1 102.4-102.4h716.8zM153.6 0a153.6 153.6 0 0 0-153.6 153.6v716.8a153.6 153.6 0 0 0 153.6 153.6h716.8a153.6 153.6 0 0 0 153.6-153.6V153.6a153.6 153.6 0 0 0-153.6-153.6H153.6z" fill="#424242" ></path></symbol>
12
+ <symbol id="icon-e6f8" viewBox="0 0 1024 1024"><path d="M870.4 51.2a102.4 102.4 0 0 1 102.4 102.4v716.8a102.4 102.4 0 0 1-102.4 102.4H153.6a102.4 102.4 0 0 1-102.4-102.4V153.6a102.4 102.4 0 0 1 102.4-102.4h716.8zM153.6 0a153.6 153.6 0 0 0-153.6 153.6v716.8a153.6 153.6 0 0 0 153.6 153.6h716.8a153.6 153.6 0 0 0 153.6-153.6V153.6a153.6 153.6 0 0 0-153.6-153.6H153.6z" fill="#424242" ></path><path d="M256 256m51.2 0l409.6 0q51.2 0 51.2 51.2l0 409.6q0 51.2-51.2 51.2l-409.6 0q-51.2 0-51.2-51.2l0-409.6q0-51.2 51.2-51.2Z" fill="#2C6CCC" ></path></symbol>
13
+ <symbol id="icon-e6fb" viewBox="0 0 1024 1024"><path d="M0 0m153.6 0l716.8 0q153.6 0 153.6 153.6l0 716.8q0 153.6-153.6 153.6l-716.8 0q-153.6 0-153.6-153.6l0-716.8q0-153.6 153.6-153.6Z" fill="#2C6CCC" ></path><path d="M819.712 306.1248a35.84 35.84 0 0 0-52.224-49.0496l-356.9664 380.7232L257.3824 462.848a35.84 35.84 0 1 0-53.9648 47.2064l179.2 204.8a35.84 35.84 0 0 0 53.1456 0.9216l384-409.6z" fill="#FFFFFF" ></path></symbol>
14
+ <svg id="ref_icon-e6f7" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024"><use xlink:href="#icon-e6f7" /></svg>
15
+ <svg id="ref_icon-e6f9" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024"><use xlink:href="#icon-e6f9" /></svg>
16
+ <svg id="ref_icon-e6fa" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024"><use xlink:href="#icon-e6fa" /></svg>
17
+ <svg id="ref_icon-e6f8" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024"><use xlink:href="#icon-e6f8" /></svg>
18
+ <svg id="ref_icon-e6fb" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024"><use xlink:href="#icon-e6fb" /></svg>
19
+ </svg>