私たちは、周りを回る巨大なコミュニティにますます感銘を受けています よく知られているCSSフレームワークであるBootstrap 、Twitterによって作成されました。 今回は、ブートストラップベースのカレンダーを紹介します JavascriptとJQueryでプログラム、カレンダーの操作の一部についても詳しく説明し、実行できるトリックと改善点をいくつか追加します。
このブートストラップカレンダーはすっきりとしたデザインで、完全に 反応する、すべてのデバイスから見栄えがします！ また、 7か国語以上への翻訳 そしてすべて 各国のお祭りの日付が強調表示され、記録されます。 贅沢！
この Bootstrap Calendar の操作はやや複雑で、最初は JSON ファイルからユーザーの日付を抽出しますが、Creativos Online ユーザー限定で、その方法を説明します。 MYSQLデータベースからイベントを抽出します あらゆるシステムでの完璧な実装。
よく知られているデータベースシステム
アプリケーションのメインファイルの機能：
インデックス.HTML
- ブートストラップ2.3.2のロード
- カレンダーデザイン
- イベント一覧
- カレンダーのナビゲート
- さまざまなカレンダービュー（日/週/月/年）
- JSでのアプリケーションのロード
- 言語選択
インデックス-BS3.HTML
- ブートストラップ3.0のロード
- カレンダーデザイン
- イベントリスト
- カレンダーのナビゲート
- さまざまなカレンダービュー（日/週/月/年）
- JSでのアプリケーションのロード
- 言語選択
イベント.JSON.PHP
- 次のデータを含むイベントのリスト：
- ID： イベント識別子
- タイトル： イベントタイトル
- URL： イベントのURL
- クラス： 後続の色のイベントタイプ（情報|警告|…）。
- 開始： 開始日
- 終わり： 退職日
APP.JS
- アプリケーション構成を格納する変数。
- 追加のJQuery関数
カレンダー.JS
- 主なアプリケーション設定
- カレンダーの主な機能
- イベントの抽出と処理
- お祝いの日
- 言語の読み込み
- イベントリストの読み込み
- さまざまなカレンダービューの読み込み（日/週/月/年）
カレンダー.CSS
- カレンダースタイル
- イベントリストのスタイル
- 他のデバイスのカレンダースタイル
データベースからイベントを抽出する
MYSQLデータベースからイベントを抽出するには ファイルの行を置き換えます events.json.php によって：
<?php
$link=mysql_connect("localhost", "usuariodeacceso", "contraseñadeacceso");
mysql_select_db("basededatos",$link) OR DIE ("Error: No es posible establecer la conexión");
mysql_set_charset('utf8');
$eventos=mysql_query("SELECT * FROM events'",$link);
while($all = mysql_fetch_assoc($eventos)){
$e = array();
$e['id'] = $all['id'];
$e['start'] = $all['inicio'];
$e['end'] = $all['final'];
$e['title'] = $all['nombre'];
$e['class'] = $all['clase'];
$e['url'] = $all['url'];
$result[] = $e;
}
echo json_encode(array('success' => 1, 'result' => $result));
?>
GitHub | ブートストラップカレンダー
ダウンロード| ブートストラップカレンダー
詳細はこちら| ブートストラップ：CSSフレームワーク