サイトに埋め込みできる無料カレンダー

2020年6月9日火曜日

無料ツール

B!

サイトに埋め込み可能な無料カレンダー

お仕事やイベントなどのサイトを運営していると、カレンダー機能があると便利です。
今回はスマホで管理可能で、サイトに埋め込みができる無料カレンダーを2つご紹介します。

途中で使えなくなると困るので定期的にメンテナンスが入っているものになります。





フリーカレンダー

背景や文字色などカスタマイズ可能なフリーカレンダーです。
広告表示が一切ないのでサイトのデザインを崩さない点もおすすめです。
個人的に、一番の特徴はスケジュールにhtml表記できるという点です。
html表記ができるという事は、文字色を変えたり、強調文字やアンダーラインなどの装飾の他、リンクや画像を追加する事も可能になるので使い方の幅が広がります。

  • パソコン、スマホ、ガラケーなどどのデバイスからでも編集可能
  • スケジュールの他にメモなども保存可能
  • 複数人での書き込みもOK
  • HTMLでの入力が可能
  • セキュリティ完備
実際にフリーカレンダーで作ったものを埋め込みました。

フリーカレンダー使用方法

フリーカレンダーに移動し「自分のフリーカレンダー作成」ボタンをクリックし、IDとパスワードを登録するだけで簡単に利用できます。

あとは予定を入れたい日付をクリックし予定を書き込むだけでカレンダーが作成できます。
複雑な設定はないので直観で操作できると思います。

フリーカレンダーデザイン設定方法

  1. 左側にある「MENU」をクリック
  2. 「デザイン」をクリック
  3. お好みにあわせて曜日別の背景色や文字色などを設定する
    ユーザーが投稿したデザインを選んで設定する事もできるのでいろいろカスタマイズしてみてください。




フリーカレンダーをサイトに埋め込む方法

出来上がったフリーカレンダーをサイトに埋め込むためには、埋め込むためのhtmlコードを取得しサイトへ貼り付けます。

左側にある「MENU」 → 「シェア・公開」 → 「メニュー」

下の方にある「貼り付けタグ」をコピーしてサイトへ貼り付ける。
※サイトに合わせてタグの高さを変更してください
横幅は設置場所の幅に合わせて表示されます。(レスポンシブデザイン)

フリーカレンダー隠し設定

フリーカレンダーは何もしないと、月間カレンダーの上に当日の予定がポップアップで表示されます。

これはこれで便利なのですが、お店の営業予定など月間予定だけを表示させたい場合もありますよね。
いちいちポップアップを閉じるのも面倒ですし。

そんな時は、以下のコマンドを設定します。

PCのポップアップ表示・非表示

todaypop no
todaypop ok

モバイルの当日ポップアップ表示・非表示

mobile todaypop no
mobile todaypop ok


googleカレンダー

googleカレンダーに移動し、(googleアカウントが必要)表示されるカレンダーの日付をクリックし予定を書き込むだけです。こちらも直観で操作できます。

書き込める内容

  • タイトル
  • 日付
    繰り返しありは毎週や毎月など周期を設定するとその後のスケジュールに自動反映される
  • 場所
    googleマップと連動しているので場所をクリックするとgoogleマップで地図を確認することができる
  • カレンダー種別
    予めカレンダーを色分け(休日を赤)しておくことで、登録した予定がカレンダー上で色分けされる
    複数の事業やプライベートとの使い分けをカレンダーを分けて行う
    (種別ごとにカレンダーが作成されるが表示・公開するカレンダーにはこの種別とこの種別を表示するというような設定ができる)
  • 説明
    説明はもちろん添付ファイルやリンクなども設定できるので、イベント内容など幅広く利用できる

googleカレンダー設定

googleカレンダーの埋め込み方法

  1. 画面右上の「設定(歯車)」をクリック
  2. 左側に表示されるカレンダー一覧から表示させたいカレンダーを1つ選びクリック
  3. 「カレンダーの統合」をクリック
  4. 「カスタマイズ」をクリックgoogleカレンダー設定方法
  5. 「表示」の不必要なタグのチェックを外す
  6. 「表示するカレンダー」から必要なカレンダーをチェックする

    googleカレンダーカスタマイズ
  7. ページ上部に表示されている埋め込みようコードをサイトに貼り付ける
実際に、googleカレンダーで作ったカレンダーです。



まとめ

機能面だけでいうとgoogleカレンダーの方が優れているように思います。
ですが、細かい色などの設定ができる点ではフリーカレンダーに軍配が上がります。

どちらもカレンダーとしては優秀なツールですので、お好みで選んで使ってみてください。



自己紹介

自分の写真

Sou

【BASEオフィシャルパートナー】
【LINE認定資格:LINE Green Badge】

便利ツールの紹介や、WEB関連、HTML+CSSなどのIT関連情報のほかに、投資や節約など個人的趣味についても投稿しています。