Jimdoでカレンダーを表示する方法・まとめ

営業日や休日の案内、イベントやレッスンのスケジュールなど、カレンダーを掲載したい方いらっしゃいますか?


残念ながらJimdoにはカレンダー機能はありませんが、外部ツールを使えば、簡単に掲載することができます。


今回は、全て無料で使えるツールをご紹介。目的によって使用してみてはいかがでしょうか。

 

いずれも、Jimdoの「ウィジェット/HTML」にコードを貼り付け

ご紹介するツールのいずれも、

Jimdoで表示させる際、

「ウィジェット/HTML」を使用します。

コンテンツ追加から選べます。

 

このコンテンツは、外部で提供されているHTMLやJavaScriptのソースコードをコピー&ペーストすることができます。

 

今回紹介するカレンダーいずれも、各サービス内でソースコードを公開しており、それをコピーしJimdoにペーストすることで、簡単にカレンダー挿入が実現します。

参考)Jimdo公式サポートサイト「ウィジェット/HTML

 


以下、4種類紹介します。


☆休日表示だけなら、簡単・シンプル。表示幅も選べます♪

営業日・店休日・定休日

カレンダーの作成

http://calendar.syoukoukai.com/

 

 画面上で直観的に操作できてシンプル簡単。

「カレンダーを作成する」をクリックすると“HTMLタグプレビュー”欄にソースが表示されるので、コピーし、Jimdo「ウィジット/HTML」に貼り付けて表示させます。


▼サンプル1:width="100%"に。
2016年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 31
が定休日です。
▼サンプル2:width="100%"でカラムを使用した場合
2016年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 31
が定休日です。
◎レスポンシブ対応のレイアウトでも使えます!
スマホでの表示は、横幅100%と設定することにより綺麗に表示されます。
つまり、カレンダー幅を「100%」に。但し、PCでは100%だと大きすぎてしまう場合があるので(サンプル1)、コンテンツ追加でカラムを使用して配置する(サンプル2)などしましょう。

☆休日表示を、2ヶ月分同時生成。幅の設定も可能♪

ネットショップ向け

カレンダージェネレーター

http://netshop.japanesecalendar.net/

 

こちらも画面上で直観的に操作OK。

2ヶ月表示がセットになっているので、ネットショップなど、月末をまたぐ営業美を表示させて置きたい場合は、便利です。


▼サンプル1:width="100%"に。
2016年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 31
▼サンプル2:width="100%"にしてカラムを使用した場合
2016年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 31
◎レスポンシブ対応のレイアウトでも使えます!
スマホでの表示は、横幅100%と設定することにより綺麗に表示されます。
つまり、カレンダー幅を「100%」に。但し、PCでは100%だと大きすぎてしまう場合があるので(サンプル1)、コンテンツ追加でカラムを使用して配置する(サンプル2)などしましょう。

☆レッスン日やイベント掲載の優れもの。表示バリエも豊富♪

こよみん

https://asomin.net/koyomin/

※簡単なユーザ登録要。「byこよみん」と広告が表示されます。


「カレンダーにレッスンやイベントを記載してページにリンクもしたい。」そんな願いを叶えてくれる、なかなかの優れもの。今日の日付も色を変えられます。

表示バリエーションも豊富なのも嬉しい。



ログインすると、左のようなメニューがあります。

貼り付けコードをクリックして、ソース(貼り付けコード)をコピーして使用します。


その他の詳細設定。

 カスタマイズ・・・色などを設定

 イベント・・・イベント名登録

 スケジュール・・・該当日をクリックして文言やURL登録




▼サンプル3:横幅を300pxに設定している例
◎レスポンシブ対応のレイアウトでは注意!
こよみんは、100%サイズ指定ができない為、スマホ画面では横幅が切れる可能性があります。
選べる貼り付けコードの中で“カレンダー横幅サイズの指定”で250〜300px程度にすれば、スマホ画面でもなんとかいけそうです。(参考:サンプル3)

☆Google利用者多数。予定をスマホから更新できるのも魅力

Googleカレンダー

https://support.google.com/calendar/

※Googleアカウント要。ログインが必要です。


イベントやレッスン日など予定を管理できるツール。表示させる内容は、

スマホやタブレットからも予定を入力可能。


マイカレンダーで、該当のカレンダー横の▼のクリック「カレンダー設定」を選択すると下記のような貼り付けコードが表示されますので、コピー。

Jimdo「ウィジェット/HTML」に貼り付けて使用します。

サイズや色もカスタマイズ可能。ページにあわせて工夫してみましょう。

▼サンプル4:width="100%"に。
▼サンプル5:width="100%"でカラムを使用した場合

◎レスポンシブ対応のレイアウトでも、まぁ使えます。
1行目のHTMLソースの横幅「width:****px;」を「width:100%;」と打ち直します。(サンプル4)。PCの表示で横幅が広すぎる場合は、カラムを使って工夫(サンプル5)します。
ただ、スマホ画面では、カレンダーの「予定リスト」などの文言は、画面の幅によって溢れてしまうので、ある程度の許容範囲が必要です。

さて、お好みのカレンダーはありましたか?

設定方法詳細は、それぞれのウェブサイトでご確認ください。


以上、ご参考まで!