シンプルなHTMLのテーブルで作ったカレンダー

 
BiNDupのテーブルパーツで作っているのでコピペして月ごとのカレンダーを配置できます。カラムごとにカレンダーを配置し、パソコン・スマホでの横並びの数はブロック設定の「カラム構成」で設定します。
calendar_001とテーブルは同じで、CSSが異なるものです。

  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月

        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    
             

2月

          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            

3月

  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        
             

4月

      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  
             

5月

            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            

6月

  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      
             

7月

        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
             

8月

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          
             

9月

    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    
             

10月

          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
             

11月

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        
             

12月

休診  午後休診  臨時休診 


  • インポートしたページ内にカレンダー表示のためのCSSをカスタムタグで入れています。
  • カスタムタグを開いて数値や色番号などを変更することで調整可能です。
  • スマホでは横に2つ並ぶ設定を想定しているため、CSSでスマホ時の文字サイズ、内余白を設定しています。横に並べない時には文字サイズ・内余白を調整してください。
  • 休診、午後休診、臨時休診の項目名や色は任意に変更してください。
  • 色の設定はテーブルエディタで変更したい日をクリックして、セルの設定の「背景色」で指定します。

月曜開始レイアウトもあります

Tablet View

SP View