質問編集履歴

3

現象が再現できるソースコードを更新いたしました。

2021/11/02 14:55

投稿

greencoop
greencoop

スコア1

test CHANGED
File without changes
test CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  #発生している問題
6
6
 
7
- ![イメージ説明](022ea8c48ec96b0164a05381f28188f2.png)
7
+ ![イメージ説明](bfe68de67c84bb8e4a47c8adf0993cae.png)
8
8
 
9
9
  #コード
10
10
 

2

現象が再現できるソースコードを更新いたしました。

2021/11/02 14:55

投稿

greencoop
greencoop

スコア1

test CHANGED
File without changes
test CHANGED
@@ -1,156 +1,112 @@
1
- ### 前提・実現したいこと
1
+ #実現したいこと
2
-
3
-
4
-
2
+
5
- jsを使って20231までのカレンダーを表示したいと考えているのですが、202212と20231どうしても表示しません。
3
+ 2023/1までのカレンダーを表示したいのですが、2022/12と2023/1が表示しません。どなたかご教示いただければ幸いです。
6
-
7
- どなたかご教示いただければ幸いです。
4
+
8
-
9
- 宜しくお願いいたします。
10
-
11
-
12
-
13
-
14
-
15
- ### 発生している問題・エラーメッセージ
5
+ #発生している問題
16
-
6
+
17
- ![該当箇所のキャプチャ画像](508a1df12cc46b5a0441755f4c332622.png)
7
+ ![イメージ説明](022ea8c48ec96b0164a05381f28188f2.png)
18
-
19
-
20
-
21
-
22
-
8
+
23
- ### 該当のソースコード
9
+ #コード
24
-
25
-
26
10
 
27
11
  ```
28
12
 
29
- //html(2021年1月から2023年1月分)
30
-
31
- <div style="width:90%; margin:60px auto 0px auto;">
32
-
33
- <!-- 料金表カレンダー -->
34
-
35
- <div id="cal0" class="cal_wrapper"> 21/1 Calendar Loading </div>
36
-
37
- <div id="cal1" class="cal_wrapper"> 21/2 Calendar Loading </div>
38
-
39
- <div id="cal2" class="cal_wrapper"> 21/3 Calendar Loading </div>
40
-
41
- <div id="cal3" class="cal_wrapper"> 21/4 Calendar Loading </div>
42
-
43
- <div id="cal4" class="cal_wrapper"> 21/5 Calendar Loading </div>
44
-
45
- <div id="cal5" class="cal_wrapper"> 21/6 Calendar Loading </div>
46
-
47
- <div id="cal6" class="cal_wrapper"> 21/7 Calendar Loading </div>
48
-
49
- <div id="cal7" class="cal_wrapper"> 21/8 Calendar Loading </div>
50
-
51
- <div id="cal8" class="cal_wrapper"> 21/9 Calendar Loading </div>
52
-
53
- <div id="cal9" class="cal_wrapper"> 21/10 Calendar Loading </div>
54
-
55
- <div id="cal10" class="cal_wrapper"> 21/11 Calendar Loading </div>
56
-
57
- <div id="cal11" class="cal_wrapper"> 21/12 Calendar Loading </div>
58
-
59
- <div id="cal12" class="cal_wrapper"> 22/1 Calendar Loading </div>
60
-
61
- <div id="cal13" class="cal_wrapper"> 22/2 Calendar Loading </div>
62
-
63
- <div id="cal14" class="cal_wrapper"> 22/3 Calendar Loading </div>
64
-
65
- <div id="cal15" class="cal_wrapper"> 22/4 Calendar Loading </div>
66
-
67
- <div id="cal16" class="cal_wrapper"> 22/5 Calendar Loading </div>
68
-
69
- <div id="cal17" class="cal_wrapper"> 22/6 Calendar Loading </div>
70
-
71
- <div id="cal18" class="cal_wrapper"> 22/7 Calendar Loading </div>
72
-
73
- <div id="cal19" class="cal_wrapper"> 22/8 Calendar Loading </div>
74
-
75
- <div id="cal20" class="cal_wrapper"> 22/9 Calendar Loading </div>
76
-
77
- <div id="cal21" class="cal_wrapper"> 22/10 Calendar Loading </div>
78
-
79
- <div id="cal22" class="cal_wrapper"> 22/11 Calendar Loading </div>
80
-
81
- <div id="cal23" class="cal_wrapper"> 22/12 Calendar Loading </div>
82
-
83
- <div id="cal24" class="cal_wrapper"> 23/1 Calendar Loading </div>
84
-
85
- </div>
86
-
87
-
88
-
89
- //js(2022年10月から2023年1月分の箇所)
90
-
91
- ~
92
-
93
- calObj[21] = new Object();
13
+ //html
14
+
15
+ <!doctype html>
16
+
17
+ <html>
18
+
19
+ <head>
20
+
21
+ <title>sample</title>
22
+
23
+ <meta charset="utf-8" />
24
+
25
+ <link rel="stylesheet" type="text/css" href="css/cal.css">
26
+
27
+ </head>
28
+
29
+ <body>
30
+
31
+ <div id="cal21" class="cal_wrapper"> 10</div>
32
+
33
+ <div id="cal22" class="cal_wrapper"> 11</div>
34
+
35
+ <div id="cal23" class="cal_wrapper"> 12</div>
36
+
37
+ <div id="cal24" class="cal_wrapper"> 1</div>
38
+
39
+ <script type="text/javascript" charset="UTF-8" src="js/cal.js"></script>
40
+
41
+ </body>
42
+
43
+ </html>
44
+
45
+
46
+
47
+ //css
48
+
49
+ div.cal_wrapper {
50
+
51
+ padding: 10px 0px;}
52
+
53
+ div.cal_wrapper table.cal tr td {
54
+
55
+ font-size: 10px; text-align: center; padding: 2px;}
56
+
57
+ div.cal_wrapper table.cal tr.headline {
58
+
59
+ background-color: #EEE;}
60
+
61
+
62
+
63
+ //js
64
+
65
+ // charset UTF-8
66
+
67
+ var calObj = new Array();
68
+
69
+ //
70
+
71
+ calObj[0] = new Object();
72
+
73
+ calObj[0].defaultMonth = 0;
74
+
75
+ calObj[0].daysClass = new Object();
76
+
77
+ calObj[0].xDaysLater = new Array();
78
+
79
+ calObj[0].xDays = new Array();
80
+
81
+ calObj[0].week = new Array();
82
+
83
+ calObj[0].month = new Object();
84
+
85
+ calObj[0].backward = '';
86
+
87
+ calObj[0].click = false;
88
+
89
+ calObj[0].priority = new Array('week','xDay','xDaysLater','day','backward');
90
+
91
+ //
94
92
 
95
93
  calObj[21] = cal_clone(calObj[0]);
96
94
 
97
95
  calObj[21].defaultMonth = 21;
98
96
 
99
-
100
-
101
- calObj[22] = new Object();
102
-
103
97
  calObj[22] = cal_clone(calObj[0]);
104
98
 
105
- calObj[22].defaultMonth = 22; /
99
+ calObj[22].defaultMonth = 22;
106
-
107
-
108
-
109
- calObj[23] = new Object();
110
100
 
111
101
  calObj[23] = cal_clone(calObj[0]);
112
102
 
113
103
  calObj[23].defaultMonth = 23;
114
104
 
115
-
116
-
117
- calObj[24] = new Object();
118
-
119
105
  calObj[24] = cal_clone(calObj[0]);
120
106
 
121
107
  calObj[24].defaultMonth = 24;
122
108
 
123
-
124
-
125
- ```
126
-
127
-
128
-
129
- ### 試したこと
130
-
131
-
132
-
133
- ・cssで装飾していますが試しにcss無しにしても結果(22年12月、23年1月が表示しない)は同じでした。
134
-
135
- ・cal25を追加すると2022年2月が表示されます。
136
-
137
-
138
-
139
- ### 補足情報(FW/ツールのバージョンなど)
140
-
141
-
142
-
143
- //配列の書き込みについて1
109
+ //
144
-
145
-
146
-
147
- var calObj = new Array();
148
-
149
-
150
-
151
- //配列の書き込みについて2
152
-
153
-
154
110
 
155
111
  calObj.calendars = new Array();
156
112
 
@@ -171,3 +127,481 @@
171
127
  calObj.year = calObj.date.getFullYear();
172
128
 
173
129
  calObj.currentList = null;
130
+
131
+
132
+
133
+ function cal_init(){
134
+
135
+
136
+
137
+ var d = window.document;
138
+
139
+ var tagObj = d.getElementsByTagName("div");
140
+
141
+ var calToday = new Date();
142
+
143
+ for(var i=0;i<tagObj.length;i++){
144
+
145
+ if(tagObj[i].className == "cal_wrapper"){
146
+
147
+ var calId = Number(tagObj[i].id.substring(3,tagObj[i].id.length));
148
+
149
+ calObj.calendars.push(calId);
150
+
151
+ if(0 < (calObj.month + calObj[calId].defaultMonth) && (calObj.month + calObj[calId].defaultMonth) < 13)
152
+
153
+ calObj[calId].currentMonth = new Date((calObj.year)+"/"+(1 + calObj[calId].defaultMonth)+"/"+"1 00:00:00");
154
+
155
+ else
156
+
157
+ calObj[calId].currentMonth = new Date((calObj.year+1)+"/"+((calObj.month + calObj[calId].defaultMonth)%12)+"/"+"1 00:00:00");
158
+
159
+ cal_create(calId);
160
+
161
+ }
162
+
163
+ }
164
+
165
+ }
166
+
167
+ function cal_create(calId){
168
+
169
+ var d = window.document;
170
+
171
+ var day = calObj[calId].currentMonth.getDate();
172
+
173
+ var month = calObj[calId].currentMonth.getMonth() + 1;
174
+
175
+ var year = calObj[calId].currentMonth.getFullYear();
176
+
177
+ var week = calObj[calId].currentMonth.getDay();
178
+
179
+ var tdTextListArr = new Array();
180
+
181
+ var bisDay = 0;
182
+
183
+ var MonthDays = calObj.days[month];
184
+
185
+ var WeekCnt = new Array();
186
+
187
+ if(month == 2){
188
+
189
+ if(year % 100 == 0 || year % 4 != 0){
190
+
191
+ if(year % 400 != 0)
192
+
193
+ bisDay = 0;
194
+
195
+ else
196
+
197
+ bisDay = 1;
198
+
199
+ }
200
+
201
+ else if(year % 4 == 0)
202
+
203
+ bisDay = 1;
204
+
205
+ else
206
+
207
+ bisDay = 0;
208
+
209
+ }
210
+
211
+ MonthDays += bisDay;
212
+
213
+ var calHTML = "<table border='0' cellspacing='0' cellpadding='0' class='cal'>";
214
+
215
+ calHTML += "<tr><th colspan='7'>";
216
+
217
+
218
+
219
+ calHTML += "<p>" + year + "年" + calObj.monthName[month] + "</p></th></tr>";
220
+
221
+ calHTML += "<tr class='headline'>";
222
+
223
+ for(var i=0;i<calObj.weekName.length;i++)
224
+
225
+ calHTML += "<td>" + calObj.weekName[i] + "</td>";
226
+
227
+ calHTML += "</tr><tr>";
228
+
229
+ for(var i=0;i<week;i++)
230
+
231
+ calHTML += "<td>&nbsp;</td>";
232
+
233
+ for(dayCnt=1;dayCnt<=(calObj.days[month]+bisDay);dayCnt++){
234
+
235
+ var dayStr = year + "/" + month + "/" + dayCnt;
236
+
237
+ var dayStrN = month + "/" + dayCnt;
238
+
239
+ if(WeekCnt[week] == undefined)
240
+
241
+ WeekCnt[week] = 0;
242
+
243
+ WeekCnt[week]++;
244
+
245
+
246
+
247
+ var monStr = '' + month + '-' + week + '-' + WeekCnt[week];
248
+
249
+ var weekStr = '' + week + '-' + WeekCnt[week];
250
+
251
+ //alert(weekStr);
252
+
253
+
254
+
255
+ var dayClass = new Object();
256
+
257
+ var dayClassText = new Object();
258
+
259
+ var currentDayDate = new Date(year + "/" + month + "/" + dayCnt + " 00:00:00");
260
+
261
+ var laterDay = Math.floor((currentDayDate.getTime() - calObj.date.getTime()) / 1000 / (60 * 60 * 24));
262
+
263
+ var tdId = "td_"+calId+"_"+year+"_"+month+"_"+dayCnt;
264
+
265
+ // backward
266
+
267
+ if(calObj[calId].backward != null && currentDayDate.getTime() < calObj.date.getTime())
268
+
269
+ dayClass["backward"] = calObj[calId].backward;
270
+
271
+ // week
272
+
273
+ if(calObj[calId].month[weekStr] != undefined)
274
+
275
+ dayClass["week"] = calObj[calId].month[weekStr];
276
+
277
+ else if(calObj[calId].month[monStr] != undefined)
278
+
279
+ dayClass["week"] = calObj[calId].month[monStr];
280
+
281
+ else if(calObj[calId].week[week] != undefined){
282
+
283
+ if(typeof(calObj[calId].week[week]) == "object" && calObj[calId].week[week][WeekCnt[week]] != undefined){
284
+
285
+ dayClass["week"] = calObj[calId].week[week][WeekCnt[week]];
286
+
287
+ }
288
+
289
+ else if(calObj[calId].week[week] != undefined && typeof(calObj[calId].week[week]) != "object")
290
+
291
+ dayClass["week"] = calObj[calId].week[week];
292
+
293
+ }
294
+
295
+ // xDay
296
+
297
+ if(calObj[calId].xDays[dayCnt] != undefined)
298
+
299
+ dayClass["xDay"] = calObj[calId].xDays[dayCnt];
300
+
301
+ // xDaysLater
302
+
303
+ if(calObj[calId].xDaysLater[laterDay] != undefined)
304
+
305
+ dayClass["xDaysLater"] = calObj[calId].xDaysLater[laterDay];
306
+
307
+ // day
308
+
309
+ if(calObj[calId].daysClass[dayStr] != undefined)
310
+
311
+ dayClass["day"] = calObj[calId].daysClass[dayStr];
312
+
313
+ else if(calObj[calId].daysClass[dayStrN] != undefined)
314
+
315
+ dayClass["day"] = calObj[calId].daysClass[dayStrN];
316
+
317
+
318
+
319
+ var tdClassArr = new Array();
320
+
321
+ var tdTextArr = new Array();
322
+
323
+ var tdLinkArr = new Array();
324
+
325
+ var tdClassStr = "";
326
+
327
+ var tdTextStr = "";
328
+
329
+ var tdMouse = "";
330
+
331
+ var tdClassNames = new Object();
332
+
333
+ for(var ci=0;ci<calObj[calId].priority.length;ci++){
334
+
335
+ if(dayClass[calObj[calId].priority[ci]] != undefined){
336
+
337
+ var splitArr = new Array();
338
+
339
+ splitArr = dayClass[calObj[calId].priority[ci]].split(';');
340
+
341
+ tdClassArr.push(splitArr[0]);
342
+
343
+ tdClassNames[splitArr[0]] = true;
344
+
345
+ if(splitArr[1] != undefined){
346
+
347
+ tdTextArr.push(splitArr[1]);
348
+
349
+ var tdTextListLink = "";
350
+
351
+ if(splitArr[2] != undefined)
352
+
353
+ tdTextListLink = " onclick=\"cal_open(\'"+splitArr[2]+"\')\"";
354
+
355
+ tdTextListArr.push('<ol><li id="'+tdId+'_li" onmouseover="cal_list2day_over(this)" onmouseout="cal_list2day_out(this)" value="'+dayCnt+'"'+tdTextListLink+'>'+splitArr[1]+'</li></ol>');
356
+
357
+ }
358
+
359
+ if(splitArr[2] != undefined)
360
+
361
+ tdLinkArr.push(splitArr[2]);
362
+
363
+ }
364
+
365
+ }
366
+
367
+ if(tdTextArr.length > 0){
368
+
369
+ tdTextStr = "<span id='"+tdId+"'>";
370
+
371
+ for(var i=0;i<tdTextArr.length;i++){
372
+
373
+ tdTextStr += tdTextArr[i] + "<br />";
374
+
375
+ }
376
+
377
+ tdTextStr += "</span>";
378
+
379
+ tdMouse = " onmouseover=\"cal_disp_text(\'"+tdId+"\')\" onmouseout=\"cal_hide_text(\'"+tdId+"\')\"";
380
+
381
+ tdClassArr.push('pointer');
382
+
383
+ }
384
+
385
+ if(tdLinkArr.length > 0)
386
+
387
+ tdMouse += " onclick=\"cal_open(\'"+tdLinkArr[0]+"\')\"";
388
+
389
+ else if(calObj[calId].click){
390
+
391
+ var clickOpenURI = calObj[calId].clickURI;
392
+
393
+ clickOpenURI = clickOpenURI.replace(/_YEAR_/ig,year);
394
+
395
+ clickOpenURI = clickOpenURI.replace(/_MONTH_/ig,month);
396
+
397
+ clickOpenURI = clickOpenURI.replace(/_DAY_/ig,dayCnt);
398
+
399
+ if((calObj[calId].clickClassName != "" && tdClassNames[calObj[calId].clickClassName]) || calObj[calId].clickClassName == ""){
400
+
401
+ tdMouse += " onclick=\"cal_open(\'"+clickOpenURI+"\')\"";
402
+
403
+ tdClassArr.push('pointer');
404
+
405
+ }
406
+
407
+ }
408
+
409
+ if(tdClassArr.length > 0)
410
+
411
+ tdClassStr = " class='" + tdClassArr.join(' ') + "'";
412
+
413
+ calHTML += "<td id='"+tdId+"_td'><div"+tdClassStr+tdMouse+">" + dayCnt + tdTextStr + "</div></td>";
414
+
415
+ if(week == 6){
416
+
417
+ calHTML += "</tr>";
418
+
419
+ if(dayCnt < calObj.days[month])
420
+
421
+ calHTML += "<tr>";
422
+
423
+ week = 0;
424
+
425
+ }
426
+
427
+ else
428
+
429
+ week++;
430
+
431
+ }
432
+
433
+ while(week <= 6 && week != 0){
434
+
435
+ calHTML += "<td>&nbsp;</td>";
436
+
437
+ if(week == 6)
438
+
439
+ calHTML += "</tr>";
440
+
441
+ week++;
442
+
443
+ }
444
+
445
+ calHTML += "</table>";
446
+
447
+ d.getElementById('cal'+calId).innerHTML = calHTML;
448
+
449
+ // list
450
+
451
+ if(d.getElementById('schedule'+calId)){
452
+
453
+ d.getElementById('schedule'+calId).innerHTML = "";
454
+
455
+ if(tdTextListArr.length > 0 && d.getElementById('schedule'+calId)){
456
+
457
+ d.getElementById('schedule'+calId).innerHTML = tdTextListArr.join('');
458
+
459
+ }
460
+
461
+ }
462
+
463
+ // /list
464
+
465
+ }
466
+
467
+ function cal_list2day_over(obj){
468
+
469
+ var d = window.document;
470
+
471
+ var dayId = obj.id.substring(0,obj.id.indexOf('_li'));
472
+
473
+ if(d.getElementById(calObj.currentList))
474
+
475
+ d.getElementById(calObj.currentList).style.backgroundColor = '#FFF';
476
+
477
+ calObj.currentList = dayId+'_td';
478
+
479
+ if(d.getElementById(dayId+'_td'))
480
+
481
+ d.getElementById(dayId+'_td').style.backgroundColor = '#CCC';
482
+
483
+ }
484
+
485
+ function cal_list2day_out(obj){
486
+
487
+ var d = window.document;
488
+
489
+ var dayId = obj.id.substring(0,obj.id.indexOf('_li'));
490
+
491
+ if(d.getElementById(calObj.currentList))
492
+
493
+ d.getElementById(calObj.currentList).style.backgroundColor = '#FFF';
494
+
495
+ }
496
+
497
+ function cal_open(uri){
498
+
499
+ window.open(uri);
500
+
501
+ }
502
+
503
+ function cal_disp_text(textId){
504
+
505
+ var d = window.document;
506
+
507
+ if(navigator.userAgent.indexOf('MSIE') == -1)
508
+
509
+ d.getElementById(textId).style.display = "block";
510
+
511
+ }
512
+
513
+ function cal_hide_text(textId){
514
+
515
+ var d = window.document;
516
+
517
+ d.getElementById(textId).style.display = "none";
518
+
519
+ }
520
+
521
+
522
+
523
+ function cal_move(calId,m){
524
+
525
+ if(m == null)
526
+
527
+ calObj[calId].currentMonth = new Date(calObj.year+"/"+(calObj.month)+"/"+"1 00:00:00");
528
+
529
+ else {
530
+
531
+ var day = calObj[calId].currentMonth.getDate();
532
+
533
+ var month = calObj[calId].currentMonth.getMonth() + 1;
534
+
535
+ var year = calObj[calId].currentMonth.getFullYear();
536
+
537
+ if(0 < month + m && month + m < 13)
538
+
539
+ calObj[calId].currentMonth = new Date(year+"/"+(month + m)+"/"+"1 00:00:00");
540
+
541
+ else if((month + m) < 1){
542
+
543
+ year--;
544
+
545
+ month = 12;
546
+
547
+ calObj[calId].currentMonth = new Date(year+"/"+(month)+"/"+"1 00:00:00");
548
+
549
+ }
550
+
551
+ else {
552
+
553
+ year++;
554
+
555
+ month = 1;
556
+
557
+ calObj[calId].currentMonth = new Date(year+"/"+(month)+"/"+"1 00:00:00");
558
+
559
+ }
560
+
561
+ }
562
+
563
+ cal_create(calId);
564
+
565
+ }
566
+
567
+ function cal_clone(obj) {
568
+
569
+ var dest;
570
+
571
+ if(typeof obj == 'object'){
572
+
573
+ if(obj instanceof Array){
574
+
575
+ dest = new Array();
576
+
577
+ for(i=0;i<obj.length;i++)
578
+
579
+ dest[i] = cal_clone(obj[i]);
580
+
581
+ }
582
+
583
+ else {
584
+
585
+ dest = new Object();
586
+
587
+ for(prop in obj)
588
+
589
+ dest[prop] = cal_clone(obj[prop]);
590
+
591
+ }
592
+
593
+ }
594
+
595
+ else
596
+
597
+ dest = obj;
598
+
599
+ return dest;
600
+
601
+ }
602
+
603
+ function cal_getMonth(){
604
+
605
+ }
606
+
607
+ cal_init();

1

該当箇所のキャプチャ画像がうまく表示できていなかったのでアップロードしなおしました。

2021/11/02 14:53

投稿

greencoop
greencoop

スコア1

test CHANGED
File without changes
test CHANGED
@@ -14,13 +14,9 @@
14
14
 
15
15
  ### 発生している問題・エラーメッセージ
16
16
 
17
+ ![該当箇所のキャプチャ画像](508a1df12cc46b5a0441755f4c332622.png)
17
18
 
18
19
 
19
- ```
20
-
21
- ![現在作成中のカレンダーです。](e43f8e1bf309527c2d4ccfc96014e882.png)
22
-
23
- ```
24
20
 
25
21
 
26
22