私たちは、周りを回る巨大なコミュニティにますます感銘を受けています よく知られているCSSフレームワークであるBootstrap 、Twitterによって作成されました。 今回は、ブートストラップベースのカレンダーを紹介します JavascriptとJQueryでプログラム、カレンダーの操作の一部についても詳しく説明し、実行できるトリックと改善点をいくつか追加します。
このブートストラップカレンダーはすっきりとしたデザインで、完全に 反応する、すべてのデバイスから見栄えがします! また、 7か国語以上への翻訳 そしてすべて 各国のお祭りの日付が強調表示され、記録されます。 贅沢!
このブートストラップ カレンダーの操作はやや複雑で、最初は 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フレームワーク
コードSergioをチェックすると
コードはすでにチェックされています! 唯一のことは、次のフィールドを使用してデータベースにテーブル«events»を作成する必要があります。 ホーム| 終了| 名前| クラス| url}そしてデータベースへのアクセスを設定してください!
他の人のためにこれらの変数を変更し、データベースにイベントを追加できるようになりましたが、カレンダーに反映されていません。 また、カレンダーをクリックした日に応じて、イベントのデータを復元するにはどうすればよいですか?
イベントの作成と作成を実行するには、データベースを作成する必要がありますが、重要なのは、データベースにイベントを追加できることです。デフォルトでは英語として定義されているため、言語はスペイン語です。
言語をスペイン語にプリセットするには、スペイン語ファイルの既存の文字列をcalendar.jsファイルの英語の文字列に置き換えるのが最善です。 ただし、他にも優れた方法があります。スクリプトのメインWebサイト、またはこの投稿に添付されているGithubコミュニティで見つけることができます。
また、数週間以内に新しい投稿をアップロードして、データベースにイベントの挿入を作成する方法を説明します。
どうもありがとうございました、私はイベントを挿入するための投稿に感謝します:)
こんにちはデータベースに接続してデータを抽出するためにすべてを修正すると問題が発生し、イベントが表示されません
データベースにイベントを挿入しません
イベントを挿入する方法を投稿していただけますか? 開始フィールドと終了フィールドでは、どのようなデータですか? タイムスタンプ? 「0」が残っているので、イベントを挿入して編集できるようにする必要があります。 ありがとう
CREATE DATABASE IF NOT EXISTS `bootstrap_calendar` / *!40100 DEFAULT CHARACTER SET utf8 COLLATE utf8_spanish_ci * /;
`bootstrap_calendar` を使用します。
--MySQLダンプ10.13Distrib 5.6.13、Win32(x86)用
-
-ホスト:127.0.0.1データベース:bootstrap_calendar
--———————————————————
-サーバーバージョン5.5.27
/ *!40101 SET @OLD_CHARACTER_SET_CLIENT = @@ CHARACTER_SET_CLIENT * /;
/ *!40101 SET @OLD_CHARACTER_SET_RESULTS = @@ CHARACTER_SET_RESULTS * /;
/ *!40101 SET @OLD_COLLATION_CONNECTION = @@ COLLATION_CONNECTION * /;
/ *!40101セット名utf8 * /;
/ *!40103 SET @OLD_TIME_ZONE = @@ TIME_ZONE * /;
/ *!40103 SET TIME_ZONE = '+ 00:00' * /;
/ *!40014 SET @OLD_UNIQUE_CHECKS = @@ UNIQUE_CHECKS、UNIQUE_CHECKS = 0 * /;
/ *!40014 SET @OLD_FOREIGN_KEY_CHECKS = @@ FOREIGN_KEY_CHECKS、FOREIGN_KEY_CHECKS = 0 * /;
/ *!40101 SET @OLD_SQL_MODE = @@ SQL_MODE、SQL_MODE = 'NO_AUTO_VALUE_ON_ZERO' * /;
/ *!40111 SET @OLD_SQL_NOTES = @@ SQL_NOTES、SQL_NOTES = 0 * /;
-
-テーブル `events`のテーブル構造
-
「イベント」が存在する場合はテーブルを削除します。
/ *!40101 SET @saved_cs_client = @@ character_set_client * /;
/ *!40101 SET character_set_client = utf8 * /;
CREATE TABLE `events`(
`id` int(10)unsigned NOT NULL AUTO_INCREMENT、
`title` varchar(150)COLLATE utf8_spanish_ci DEFAULT NULL、
`body` text COLLATE utf8_spanish_ci NOT NULL、
`url` varchar(150)COLLATE utf8_spanish_ci NOT NULL、
`class` varchar(45)COLLATE utf8_spanish_ci NOT NULL DEFAULT'info '、
`start` varchar(15)COLLATE utf8_spanish_ci NOT NULL、
`end` varchar(15)COLLATE utf8_spanish_ci NOT NULL、
主キー( `id`)
)ENGINE = InnoDB DEFAULT CHARSET = utf8 COLLATE = utf8_spanish_ci;
/ *!40101 SET character_set_client = @saved_cs_client * /;
-
-テーブル `events`のデータをダンプします
-
LOCK TABLES `イベント` WRITE;
/ *!40000 ALTER TABLE `events` DISABLE KEYS * /;
/ *!40000 ALTER TABLE `events` ENABLE KEYS * /;
テーブルのロックを解除します。
/ *!40103 SET TIME_ZONE = @ OLD_TIME_ZONE * /;
/ *!40101 SET SQL_MODE = @ OLD_SQL_MODE * /;
/ *!40014 SET FOREIGN_KEY_CHECKS = @ OLD_FOREIGN_KEY_CHECKS * /;
/ *!40014 SET UNIQUE_CHECKS = @ OLD_UNIQUE_CHECKS * /;
/ *!40101 SET CHARACTER_SET_CLIENT = @ OLD_CHARACTER_SET_CLIENT * /;
/ *!40101 SET CHARACTER_SET_RESULTS = @ OLD_CHARACTER_SET_RESULTS * /;
/ *!40101 SET COLLATION_CONNECTION = @ OLD_COLLATION_CONNECTION * /;
/ *!40111 SET SQL_NOTES = @ OLD_SQL_NOTES * /;
-ダンプは2014-05-31:14:38に完了しました
こんにちはmigosはJSONの日付形式を変更する方法はありますか
カレンダーは非常に優れています。新しいイベントを追加する場合にのみ、最初と最後の両方でデフォルトでかかる日付が英語形式ですが、スペイン語に変更するにはどうすればよいですか? DD / MM / YYYYになります。 どうもありがとうございました
こんにちは、カレンダーはとても良いですが、日付を更新してもすぐにはカレンダーに反映されません。 私は何ができますか ?
また、月次ビューにすべてのポイントを表示するにはどうすればよいですか、正方形を拡大することはできますか? 何が一日に対応しますか?
サンプルをロードするとローカルで完全に機能するという問題がありますが、オンラインサーバーにアップロードすると、カレンダーから何も表示されず、ボタンのみが表示されます。 サーバーのどこが悪いのか、何が悪いのかを考えて修正してください。