simple-calendar

JavaScript

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

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

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

デモ

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

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

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

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

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

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

simple-calendar

Warp drive jQuery pluginワープするようなエフェクトを実装できる「Warp drive jQuery plugin」前のページ

滑らかなシェイプアニメーションを実装できる「flubber」次のページflubber

関連記事

  1. no-image

    JavaScript

    水平スクロールでテキストが流れていくマーキー実装「hMarquee」

    hMarqueeは、水平スクロールでテキストが滑らかに流れていくマーキ…

  2. zoomwall.js

    JavaScript

    高さを揃えたグリッドレイアウトのLightbox系イメージギャラリー「zoomwall.js」

    zoomwall.jsは高さを揃えたグリッドレイアウトを実装することが…

  3. 2013年上半期jQueryプラグインまとめ

    JavaScript

    当ブログで紹介したjQueryプラグイン12選のまとめ 2012/08 – 2012/0…

    2012年8月〜2012月9月までの当ブログで紹介したjQueryプラ…

  4. jQuery Notebook
  5. jQuery fatNav

    JavaScript

    ミニマルテイストなフルスクリーンメニューを実装できる「jQuery fatNav」

    jQuery fatNavはミニマルテイストなフルスクリーンのナビゲー…

  6. Image Gallery Threejs

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP