simple-calendar

JavaScript

イベント設定もできるシンプルなカレンダー実装「simple-calendar」

simple-calendarは、イベント設定も可能なシンプルなカレンダーを実装することができます。jQuery・Foundationを使用しているとのこと。余計な装飾もなく、スッキリしたレイアウトのカレンダーを実装したい人にはピッタリですね。

スケジュールは1時間単位で設定可能

デモ

デモでは左側に月のカレンダーが表示され、右側に1日のイベント欄が表示されています。カレンダー内で好きな日付をクリックすると、右側にその日付のイベントが表示される仕組みです。

スケジュールは1時間単位で設定でき、時間の右側の部分をクリックするとイベントを入力することができます。テキストを入力すると、その右側に保存するアイコンとキャンセルするアイコンが現れるので、任意のアイコンをクリックすればOKです。

イベントを保存した後は、そのイベント欄の右側にバツ印が表示されているので、削減したい場合はここから削減します。

また、カレンダーの右下には「Today」と書かれたボタンがあり、ここをクリックすると現在の日付が選択された状態になります。

デモはレスポンシブに対応しているので、パソコンからの閲覧だけではなくスマホなどモバイル端末からも閲覧しやすいのがいいですね。

シンプルながらもスケジュール機能つきでレスポンシブ対応、そして操作も簡単なカレンダーを実装したいという人は、ぜひ「simple-calendar」を活用されてみてはいかがでしょうか?

simple-calendar

関連記事

  1. Segment

    JavaScript

    SVG pathをアニメーションさせる軽量のスクリプト「Segment」

    SegmentはSVG pathをアニメーションさせる軽量のスクリプト…

  2. JavaScript

    縦スクロールすると横スクロール(水平移動)していくjQueryプラグイン「jInvertScroll…

    これおもしろいですね。縦スクロールすると垂直に移動していくのではなくて…

  3. jQuery Sidebar

    JavaScript

    上下左右からクイックなスライド表示させることができるjQuery Sidebar

    jQuery Sidebarは上下左右からスライド表示させることができ…

  4. 3D Portfolio Template

    JavaScript

    立体的に回転するテンプレート「3D Portfolio Template」

    滑らかに、立体的に回転するテンプレートを実装することができる「3D P…

  5. miSlider

    JavaScript

    複数の画像を表示したりスライドしたりできるスライダー「miSlider」

    miSliderは複数の画像やスライドの表示を可能にするスライダーを実…

  6. JavaScript

    jQueryで空港や駅にある掲示板のように指定した文字が切り替わっていくAirportを使ってみた

    面白いプラグインがあったので使ってみました。空港や駅にある掲示板みたい…

最近の記事

  1. Happy Plugs AIR1
  2. cheero Stream 10000mAh
  3. BOSE HOME SPEAKER 300
  4. RP-PC112
  5. SRS-XB402M

アーカイブ

PAGE TOP