Googleカレンダーの見た目をカスタマイズ
こんにちは佐野です。
今日はホームページの追加機能として一番ご要望の多い「営業日カレンダー」のお話。
Googleカレンダーを埋め込む方法が
一番お客様にとって更新がしやすい＆予算もリーズナブルなのでオススメしています。
が、
どうしても見た目がホームページの雰囲気に合わず、
どうにかならないかな？というお声も多いわけで…
↓問題のGoogleカレンダー（埋め込みフォルム）
これでもカスタマイズはしてシンプルにしていますが、
確かに、ちょっとGoogle感が強すぎるかも。
そこで今回はGoogleカレンダーのAPIとFullCalendar(JavaScriptライブラリ)を使って、見た目を制御できるカレンダーを作ってみました。
色々細かく設定はしているのですが、
- 予定にはそれぞれサイトのトンマナに合うような色をランダムで割り振る
- 予定にカーソルを合わせる、またはタップで詳細を表示
このあたりが簡単そうに見えて結構時間かかりました。。
これで見た目はオリジナルカレンダーっぽく見せながらも、
お客様はスマホのGoogleカレンダーアプリから簡単に営業日・休業日の設定ができるようになりそうです🖊
＼この記事を書いた人／
さの
愛知県春日井市出身。稲沢市在住。
オーナスのデザイン・コーディング担当。
女性やファミリー向けの可愛い＆やさしいデザインが得意。
好きなものはフォント、昭和レトロ、音楽、ポケモン、アイドル。
