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. Linear Slider

    JavaScript

    シンプルな機能で使いやすいjQueryによる水平スライダー「Linear Slider」

    Linear Sliderはシンプルな機能性による水平スライダーを実装…

  2. jquery-confirm

    JavaScript

    アラートやダイアログなどさまざまな機能を実装できる「jquery-confirm」

    jquery-confirmはアラートやconfirm、ダイアログなど…

  3. Changing Background Color while scrolling
  4. no-image

    JavaScript

    シンプル・軽量なjQueryイメージビューア「WimmViewer」

    WimmViewerはシンプルで軽量なイメージビューアを実装できるjQ…

  5. Create a month picker jQuery plugin
  6. no-image

    JavaScript

    タッチ対応のドロワーコンポーネント「hy-drawer」

    hy-drawerはタッチに対応したドロワーコンポーネントです。And…

最近の記事

  1. 蒼龍唐玉堂 特製牛バラ担々麺
  2. サーモンアボカドサラダラップとドリップ
  3. 猿田彦フレンチ
  4. Zarigani Curry 挽肉のカレー ゴーダチーズとピクルスを添えて
  5. ビジネスホテル

アーカイブ

PAGE TOP