Zabuto Calendar Demo
The Zabuto Calendar jQuery Plugin lets you add a simple month calendar to your web page. It's lightweight, efficient and easy to use. Version: v2.1.0 Basic Usage Initialize The calendar needs jQuery to function properly. After including jQuery, the plugin can be used by requiring the stylesheet and javascript file. Then view the calendar by defining a DOM-element and initializing the plugin. <!--
FullCalendar - JavaScript Event Calendar
npm install @fullcalendar/angular import { Component } from '@angular/core' import { CalendarOptions } from '@fullcalendar/angular' @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { calendarOptions: CalendarOptions = { initialView: 'dayGridMonth', events: [ { title: 'event 1', date: '2019-04-01' }, { title: 'e
jQueryプラグイン - Bootstrapを使ったカレンダーを実装 - Zabuto Calendar
Bootstrapを使ったカレンダーを実装するプラグイン「Zabuto Calendar」を紹介します。 jQueryプラグイン「Zabuto Calendar」このプラグインでは、大人気のCSSフレームワーク「Twitter Bootstrap」を使ったカレンダーを実装することができます。 JSON形式のデータを使って、カレンダー上にスケジュールを追加することができます。追加したスケジュールはカレンダー上で色が変わり、クリックすると内容をポップアップすることもできます。便利！ デモでカレンダーの外観を確認してみてください。青色は本日、オレンジはJSONデータによるスケジュールです。スケジュールをクリックしてみてください。なかなかカッコイイですよー。 「Zabuto Calendar」のデモ デモのソース（HTML + jQuery）<!DOCTYPE html> <html> <head
Fullcalendar (jQueryプラグイン)の設置サンプル | トリコシステムズ
オフィシャルサイト http://arshaw.com/fullcalendar/ jQuery のプラグインである Fullcalendar を試してみました。イベントは一件づつカスタム投稿タイプとして投稿するようにしました。 「イベント」カスタム投稿タイプには、カスタムフィールドで 開始日 （やっぱり追加しました 01/24） 終了日 開催場所 連絡先 を作成しました。カスタムフィールドの内容も検索できるようにするために、プラグイン「Search Everything」(公式サイト)（WordPress.org）をインストールしています。 開始日がないですが、投稿日を開始日にして入力して頂きます。開始日で並び替えるのが面倒なのでこのようにしました。ただ、投稿日が未来日だと「future（予約投稿）」になって表示されないので、 /wp-includes/post.php を一部書
jQuery－FullCalendarでスケジュール表示カレンダーその２ | サラリーマンのすらすらＩＴ日記
昨日書いた「jQuery－FullCalendarでスケジュール表示カレンダー」について、さらに有益な情報がありました。 こちらの記事です。昨日書いたコードのこの部分、 success: function(calEvent) { $('#calendar').fullCalendar('removeEvents'); for (var i=0; i<calEvent.length; i++) { $('#calendar').fullCalendar('renderEvent', calEvent[i]); } } は、次のように書くとさらに速くなるということです。 success: function(calEvent) { $('#calendar').fullCalendar('removeEvents'); $('#calendar').fullCalendar('addEventS
jQuery－webでスケジュール表示カレンダー | サラリーマンのすらすらＩＴ日記
先日、webでスケジュールを表示できるカレンダーを探していました。ほとんどのグループウェアで搭載されている機能ですが、別の管理用DBからデータを引っ張ってきて表示したいので、たいていのグループウェアでは融通が利きません。手入力しか許さないでしょうから。一から自作というのも大変なので、無料で使えるツールを探しました。 Ext JSで使えるスケジュール表示カレンダーがありました。見栄えもまあまあですが、サンプルプログラムが付いていません。ドキュメントが充実していれば何とかなるでしょうが、それもありません。サイトのソースを表示させて、同じように打ち込んで確かに同じ様なものが表示されますが、少し違う。このソースにはダウンロードから得られないJavaScriptが呼び出されています。これではダメです。別のに当たることにしました。 jQueryで使えるFullCalendarがありました。これはよさそ
JavaScriptライブラリ「jQuery」でカレンダーを作る「FullCalendar」
twitter facebook hatena google pocket JavaScriptライブラリの「jQuery」を使用してカレンダーを作ります。 via：FullCalendar - Full-sized Calendar jQuery Plugin sponsors 使用方法 FullCalendar - Full-sized Calendar jQuery Pluginからファイル一式をダウンロードします。 <link rel="stylesheet" href="fullcalendar.css" media="all"> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="ui.core2.js"></script> <scr
jQuery－FullCalendarでスケジュール表示カレンダー | サラリーマンのすらすらＩＴ日記
先日「jQuery－webでスケジュール表示カレンダー」という記事を書きました。やってみたいことができたので、少し紹介します。 このFullCalendarは、JSON形式データを渡すと表示されます。JSON形式データはファイルでもいいし、PHPなどのサーバサイドプログラムでJSON形式として出力したものでも表示できます。 $('#calendar').fullCalendar({ // ここで他のオプションを設定 // events: "http://192.168.1.1/hogehoge.php?from=2010-01-01&to=2010-01-31" }); サーバ192.168.1.1にあるhogehoge.phpは、指定した期間のデータを取ってきて（ここでは2010年1月1日から2010年1月31日まで）、クライアントに渡すというもので、これでFullCalendarに表示
ByteCyclist » jMonthCalendar - A site made of bytes by a cyclist.
jMonthCalendar is a full month calendar that supports events. You simply initialize the calendar with options and an events array and it can handle the rest. The plugin does have extension points that allow the developer to interact with the calendar when the display is about to change months, after the display has changed months and when the event bubbles are clicked on. By default the events wou
Calendar: a Javascript class for Mootools that adds accessible and unobtrusive date pickers to your form elements
Overview Calendar is a Javascript class that adds accessible and unobtrusive date-pickers to your form elements. This class is a compilation of many date-pickers I have implemented over the years and has been completely re-written for Mootools. I have tried to include all the features that have been most useful while streamlining the class itself to keep it as small as possible. Use the links belo
シンプルなイベントカレンダーを実装するjQueryプラグイン - Rewish
ある朝僕は、以下の用件を満たすカレンダープラグインを探していました。 シンプルなHTMLを吐いてデザインの変更が容易 コールバック関数である程度処理をイジれる 月移動のアニメーションが素人ウケしそう 小一時間色々なプラグインを見ましたが、中々しっくり来るモノが無く、「これは探すより作った方が早そうかなぁ」と思ったので作ってみました。 機能概要 記事の初めで大方出ていますが、主に以下の機能を備えています。 月移動時のスライドアニメーション 生成するHTMLを包含する要素のclass変更 イベント追加、月移動などに対応するコールバック関数 JSON形式でのイベント追加 イベント用JSONの先読み機能（月移動時の遅延対策） 表示中の月に属さない日付の表示、非表示 ダウンロード jQuery.calendar 動作デモ 導入方法 jQueryプラグインではお馴染み、 jQueryを読み込んでからプ
jQueryのカレンダー関連のプラグイン７つ:phpspot開発日誌
7 interesting jQuery calendar plugins | YESTUTOR jQueryのカレンダー関連のプラグイン７つが紹介されています。 Googleカレンダーっぽいものや、Appleっぽい物など種類が沢山あります。カレンダーUIを実装する際の参考に出来そうです。 探せば他にももっとありそうですね。 関連エントリ あなたの空き状況が一目でわかるカレンダー実装PHPスクリプト「Ajax Availability Calendar」 角丸を使った可愛いカレンダーピッカー実装JavaScript「jsDatePick」 Ajaxを使ったクールなインタフェースを持つカレンダー実装スクリプト「PHP Event Calendar」
FullCalendar - JavaScript Event Calendar
npm install @fullcalendar/angular import { Component } from '@angular/core' import { CalendarOptions } from '@fullcalendar/angular' @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { calendarOptions: CalendarOptions = { initialView: 'dayGridMonth', events: [ { title: 'event 1', date: '2019-04-01' }, { title: 'e
jQueryで作るGoogleカレンダークローン·wdCalendar MOONGIFT
wdCalendarはWebベース/jQuery製のオープンソース・ソフトウェア。Googleの中でも人気の高いプロダクトの一つがGoogleカレンダーだ。Ajaxを駆使し、まるでデスクトップアプリのような操作が可能だ。スケジュールはビジネス/プライベートを問わず利用できる。 スケジュール登録画面 そんな便利なツールだけに、自前のスケジュールアプリにもあのような機能を持たせたいというニーズは強くある。逆に言えばスケジュールアプリを作る上であのインタフェースと操作性は欠かせない存在になっている。それを実現するのがwdCalendarだ。 wdCalendarはjQuery製のオープンソース・ソフトウェアで、そのインタフェースはまさにGoogleカレンダーだ。マウスでドラッグして予定を作成したり、その詳細を記述（編集する際には自分でwdCalendarを立てる必要がある）することができる。 月
jQueryで実現するカレンダーを集めた「30 jQuery Calendar Date Picker Plugins」
TOP > WebDesign > jQueryで実現するカレンダーを集めた「30 jQuery Calendar Date Picker Plugins」 javascriptのライブラリとして人気が高い、jQuery様々なプラグインがリリースされていますが、今日紹介するのはカレンダープラグインのみを集めたエントリー「30 jQuery Calendar Date Picker Plugins」です。 Create astonishing iCal-like calendars with jQuery jQueryを利用した様々なタイプのカレンダーが全部で30まとめられています。今日はその中からいくつかピックアップして紹介したいと思います。 詳しくは以下 ■Calendar – A Javascript class for Mootools 予定管理ではなくフォームへの日付入力補
とても洗練されたＵＩの日付ピッカー＆カレンダー集:phpspot開発日誌
Beautiful datepickers and calendars for web developers とても洗練されたＵＩの日付ピッカー＆カレンダー集のエントリが紹介されていましたのでピックアップ。 日付入力も便利だけでなく、クールに行えます。 datepicker シンプルだけどクールなカレンダー jquery datepicker From〜Toが指定できるカレンダー Calendar 立体的でクールなＵＩ jPint iPhoneっぽいＵＩ 全部見る たくさんありすぎて迷いますが、サイトのＵＩや、用途に応じて使い分ければ便利そうですね。 関連エントリ 超クールなカレンダー型日付入力補助用JSライブラリ カレンダー、バルーンなどWEBアプリに使えるハイクオリティアイコンセット「pinvoke」 日付入力を便利にするカレンダー/日付ピッカー集
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://designaholic.cc/2011/03/jquery25.html