PHP と jQuery を使用して Web アプリケーションでカレンダーを作成する方法

PHP と jQuery を使用して Web サイト アプリケーションでカレンダーを作成する方法

このチュートリアルは楽しいものになります。 PHP と jQuery を使用してアプリケーションにカレンダーを実装する簡単な方法を説明します。 通常の退屈なカレンダーとは異なり、これはドラッグ可能でスタイリッシュで、必要に応じて簡単にステンシルできます。 確認してみましょう。

?

ここに重要な デモ または ダウンロード リンクがあります。

?

このチュートリアルでは、?jQuery プラグインを使用しています。 なぜこれを使うかというと、機能が満載の電源だからです。

ここで、このプラグインを実装する方法を説明します。 これが jQuery コードです。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

タイプ=?"script/javascript"?> $?(ファイル)。 準備完了(関数()?{ ????VAR?日付?=?新規?日付(); ????VAR?e?=?日付。 GETDATE?(); ????VAR?M?=?getMonth 日付?(); ??????=?日付 と getFull Year ?(); ????VAR???=?{?}?; ? ????$?("#PHP と jQuery を使用して Web アプリケーションでカレンダーを作成する方法"?)。 fullCalendar?({ ?????????ヘッダー:?H?、 ?????????オプション: ?True、 ?????????編集者: ?本当、 ????????? ドラッグ可能: ?True、 ?????????スロー: ?False ????}?); }?); スクリプト>

コードでは、プラグインは DIV ID="Calendar"] にインストールされます。 選択可能、編集可能、ドラッグ可能などの追加オプションが付いています。 。 HTML では、下の画像に示すように必要な div を追加するだけです。

?

1	ID?=?“日历”?>? DIV>

1

ID?=?"カレンダー"? >? DIV>

上記の jQuery と HTML コードは、美しく機能的なカレンダーをレンダリングするのに十分です。 次に、表示されたカレンダーに次の機能セットを追加したいと思います。

• ユーザーが選択した日付または日付範囲を表示します。
• à?サーバーに送信された AJAX リクエストの詳細を指定して オプションを確認します。
• サーバーから応答を受信し、ユーザーに表示します。

?

これを実現するために、追加の jQuery と HTML コードを作成します。 jQuery に 2 つ追加しました。 まず、日付選択機能をカスタマイズするために FullCalendar プラグイン形式を選択します。 2 番目は、AJAX リクエストのためにサーバー に送信された 選択された日付です。 。 以下の完全なコードを見てください。

?

以下は更新された HTML コードです。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

タイプ=?"script/javascript"?SRC?=?"JS/jquery.min.js"?>? スクリプト> タイプ=?"script/javascript"?SRC?=?"JS/jquery.PHP と jQuery を使用して Web アプリケーションでカレンダーを作成する方法.js"?>? スクリプト> タイプ=?"script/javascript"?> $?(ファイル)。 準備完了(関数()?{ ????VAR?日付?=?新規?日付(); ????VAR?e?=?日付。 GETDATE?(); ????VAR?M?=?getMonth 日付?(); ??????=?日付 と getFull Year ?(); ????VAR???=?{?}?; ? ????$?("#PHP と jQuery を使用して Web アプリケーションでカレンダーを作成する方法"?)。 fullCalendar?({ ?????????ヘッダー:?H?、 ?????????オプション: ?True、 ?????????? 機能 (?) を選択します開始日、?終了日、?終日、?jsEvent?、?View ?)?{ ????????????新しい出発点?=?$?fullCalendar?formatDate?(開始日,?"MMMM dd 年 H:mm TT"?); ????????????、VAR?newend?=?$?。 フルカレンダー?。 " MMMM dd 年数 H: mm TT"?); ????????????$?("#start"? ) , HTML?('開始 STRONG > >' SPAN>'?); ????????????$?("#End"? )。 HTML?('END STRONG> '? < ;/ SPAN>'?); ????????????$?("OK"?) 。 フェードイン(); ?????????} ?????????eventSources: ?[? { ???????????? イベント: ?[ ???????????????{ ?????????????????? タイトル: ?「コーヒーと GF'? 、 ?????????????????? 説明: ? 「忘れてはいけない、さもないと彼女は私を殺すでしょう」 .” ??????????????????開始:?'2013-09-21 19:00 :00 ' ? 、 ??????????????????終了 ?? :?' 2013- 09-21 21:00:00'?、 ?????????????????? 終日: ?False ???????????????} ???????????????{ ??????????????????タイトル: ?Web アプリケーションのデモ 、 ??????????????? 説明: ? 「Mashable Guys との出会い」 ??????????????????開始:?'2013-09-30 13:00 :00 ' ? 、 ???????????????終了 ?? :?' 2013-09-30 17:00:00'?、 ?????????????????? 終日: ?False ???????????????} ????????????] ?????????}?] ?????????編集者: ?本当 、 ????????? ドラッグ可能: ? True、 ?????????スロー: ? False ????}?) ; ? ????$ ? (ファイル)on ( "クリック"?,?"確認"?,?関数()?{ ?????????開始?=?$? ( "#開始スパン"?)HTML? (); ???????VAR?月末?; ? ????????? $?Ajax({ ???????????? タイプ: ?"get"?、 ????????????URL:?"PHP/ajax.php?R=confirm_booking&start="? 🎜> ?開始 ?" および終了=" ? ?終了、 ???????????? 含まれるもの: ?「」 ????????? 成功: ?関数 (応答)?{ ??????????????? $ ?("OK"?)。 フェードアウト(); ??????????????? $ ?("応答"?)。 の HTML? ( は に応答します); ???????????? } ????????? } ?); ???? } ?); } ?); スクリプト>

1 2 3 4 5 6 7

ID?=?“日历”?>? DIV> ? ? ID?=?“开始”?>??开始 STRONG>? P> ? ID?=?“结束”?>??结束 STRONG>? P>? 类型=?“按钮”?值=?“确认”?ID?=?“确认”?类=?“BTN的BTN默认隐藏”?> ? ? ?ID?=?“响应”?>? DIV>

1 2 3 4 5 6 7

ID?=?“日历”?>? DIV> ?

?ID?=?“开始”?> ;??开開始 STRONG>? P>

?ID?=?“结束”?> ;??结束 STRONG>? P> ?
種類=?“按钮”?值=?“确认” ?ID?=?“确认”?类 =?“BTN的BTN默认隐藏”?> ?
?

? ID?=?“响应”?>? DIV>

p、ID は start および end of タグ は、選択した日付または日付範囲をユーザーに表示するために追加されました。 、DIV[ID="response"] は、Ajax リクエストから返された応答を表示します。

これは ajax.php ファイルです。これは、Ajax リクエスト を処理するコード です。 。 このチュートリアルでは、このファイルは単に結果ページを返します。 Web アプリケーションでは、データをデータベースに保存し、必要に応じて他の作業を行います。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

(‘functions.php“?); ? (isset を使用します?($ _GET?[?'R'?]?))?{ ???? # # リクエストごとに関数を実行します ????$ R?=?clean_input? ($ _GET?[?'R'?]?); ????##confirm_booking に送信されたリクエストを処理するために使用されます。 ???????($ R?==? 'confirm_booking'?)?{ ?????????(issetを使用しますか?($ _GET? [?'開始'?]? ( $ _GET?[?'終了'?] ?))?{ ???????????????開始?=? clean_input? ( $ _GET?[? '開始' ?]?); ???????????????$end を配置?=?clean_input? ( $ _GET?[?'終了'?]?); ??????????????????if (null(開始)?&&?!(終了))?{ ?????????????????????/ * ????????????????????????* ここでは何もしていません。 受け取った値をページに送り返すだけです。 ????????????????????????* Web アプリケーションでは、値を処理してデータベースに保存する必要があります。 ????????????????????????* / ?????????????????????エコー ?" '?開始'?; ??????????????????} ????????????} ?????????} } ?

これでチュートリアルは終了です。 Li Xin は実装を可能な限り単純に保つよう努めています。

このチュートリアルがお役に立てば幸いです。

このような役立つ情報を得るために、これからも戻ってきてください。 以上です。コーディングを楽しんでください。 この記事は

Li Xin のブログ

から引用しています。転載する場合は出典を明記してください。 http://www.ilixin.net/401.html