JQueryを使用したブートストラップカレンダー

ブートストラップ-カレンダー 私たちは、周りを回る巨大なコミュニティにますます感銘を受けています よく知られているCSSフレームワークであるBootstrap 、Twitterによって作成されました。 今回は、ブートストラップベースのカレンダーを紹介します JavascriptとJQueryでプログラム、カレンダーの操作の一部についても詳しく説明し、実行できるトリックと改善点をいくつか追加します。

このブートストラップカレンダーはすっきりとしたデザインで、完全に 反応する、すべてのデバイスから見栄えがします! また、 7か国語以上への翻訳 そしてすべて 各国のお祭りの日付が強調表示され、記録されます。 贅沢!

このブートストラップカレンダーの操作はやや複雑で、最初はJSONファイルからユーザーの日付を抽出しますが、Creativos Onlineユーザー専用に、その方法を説明します。 MYSQLデータベースからイベントを抽出します あらゆるシステムでの完璧な実装。

よく知られているデータベースシステム

よく知られているデータベースシステム

アプリケーションのメインファイルの機能:

INDEX.HTML

  • ブートストラップ2.3.2のロード
  • カレンダーデザイン
  • イベント一覧
  • カレンダーのナビゲート
  • さまざまなカレンダービュー(日/週/月/年)
  • JSでのアプリケーションのロード
  • 言語選択

INDEX-BS3.HTML

  • ブートストラップ3.0のロード
  • カレンダーデザイン
  • イベントリスト
  • カレンダーのナビゲート
  • さまざまなカレンダービュー(日/週/月/年)
  • JSでのアプリケーションのロード
  • 言語選択

EVENTS.JSON.PHP

  • 次のデータを含むイベントのリスト:
    • ID: イベント識別子
    • タイトル: イベントタイトル
    • URL: イベントのURL
    • クラス: 後続の色のイベントタイプ(情報|警告|…)。
    • 開始: 開始日
    • 終わり: 退職日

APP.JS

  • アプリケーション構成を格納する変数。
  • 追加のJQuery関数

カレンダー.JS

  • 主なアプリケーション設定
  • カレンダーの主な機能
  • イベントの抽出と処理
  • お祝いの日
  • 言語の読み込み
  • イベントリストの読み込み
  • さまざまなカレンダービューの読み込み(日/週/月/年)

CALENDAR.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フレームワーク


記事の内容は、次の原則に準拠しています。 編集倫理。 エラーを報告するには、 ここで.

14コメント、あなたのコメントを残してください

コメントを残す

あなたのメールアドレスが公開されることはありません。 必須フィールドには付いています *

*

*

  1. データの責任者:MiguelÁngelGatón
  2. データの目的:SPAMの制御、コメント管理。
  3. 正当化:あなたの同意
  4. データの伝達:法的義務がある場合を除き、データが第三者に伝達されることはありません。
  5. データストレージ:Occentus Networks(EU)がホストするデータベース
  6. 権利:いつでも情報を制限、回復、削除できます。

  1.   デビッドZ

    コードSergioをチェックすると

    1.    セルジオロデナス

      コードはすでにチェックされています! 唯一のことは、次のフィールドを使用してデータベースにテーブル«events»を作成する必要があります。 ホーム| 終了| 名前| クラス| url}そしてデータベースへのアクセスを設定してください!

      1.    ローズ

        他の人のためにこれらの変数を変更し、データベースにイベントを追加できるようになりましたが、カレンダーに反映されていません。 また、カレンダーをクリックした日に応じて、イベントのデータを復元するにはどうすればよいですか?

  2.   jose luis zamudio(@JoseZami)

    イベントの作成と作成を実行するには、データベースを作成する必要がありますが、重要なのは、データベースにイベントを追加できることです。デフォルトでは英語として定義されているため、言語はスペイン語です。

    1.    セルジオロデナス

      言語をスペイン語にプリセットするには、スペイン語ファイルの既存の文字列をcalendar.jsファイルの英語の文字列に置き換えるのが最善です。 ただし、他にも優れた方法があります。スクリプトのメインWebサイト、またはこの投稿に添付されているGithubコミュニティで見つけることができます。
      また、数週間以内に新しい投稿をアップロードして、データベースにイベントの挿入を作成する方法を説明します。

  3.   jose luis zamudio(@JoseZami)

    どうもありがとうございました、私はイベントを挿入するための投稿に感謝します:)

  4.   ジェイル

    こんにちはデータベースに接続してデータを抽出するためにすべてを修正すると問題が発生し、イベントが表示されません

  5.   ディエゴ

    データベースにイベントを挿入しません

  6.   ゴンザ

    イベントを挿入する方法を投稿していただけますか? 開始フィールドと終了フィールドでは、どのようなデータですか? タイムスタンプ? 「0」が残っているので、イベントを挿入して編集できるようにする必要があります。 ありがとう

  7.   木曜

    CREATE DATABASE IF NOT EXISTS `bootstrap_calendar` / *!40100 DEFAULT CHARACTER SET utf8 COLLATE utf8_spanish_ci * /;
    USE `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 `events` 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に完了しました

  8.   juan77

    こんにちはmigosはJSONの日付形式を変更する方法はありますか

  9.   ジセラブラ

    カレンダーは非常に優れています。新しいイベントを追加する場合にのみ、最初と最後の両方でデフォルトでかかる日付が英語形式ですが、スペイン語に変更するにはどうすればよいですか? DD / MM / YYYYになります。 どうもありがとうございました

  10.   ファビアン

    こんにちは、カレンダーはとても良いですが、日付を更新してもすぐにはカレンダーに反映されません。 私は何ができますか ?

    また、月次ビューにすべてのポイントを表示するにはどうすればよいですか、正方形を拡大することはできますか? 何が一日に対応しますか?

  11.   Alex Vetsak

    サンプルをロードするとローカルで完全に機能するという問題がありますが、オンラインサーバーにアップロードすると、カレンダーから何も表示されず、ボタンのみが表示されます。 サーバーのどこが悪いのか、何が悪いのかを考えて修正してください。