帶有JQuery的Bootstrap日曆

圍繞著這個巨大的社區，我們給我們越來越深刻的印象 Bootstrap，一個著名的CSS框架，由Twitter創建。這次我展示了一個基於Bootstrap的日曆 用Javascript和JQuery編程另外，我將詳細解釋日曆的部分操作，並添加一些技巧和改進。

這個Bootstrap日曆設計簡潔，完全響應，在所有設備上看起來都不錯！它還包含一個 翻譯成7種以上的語言 和所有 突出並註明每個國家的節日。奢侈！

這個Bootstrap Calendar的操作有點複雜，它最初從JSON檔案中提取用戶的日期，但是，專門針對以下用戶 Creativos Online我會解釋如何 從MYSQL數據庫中提取事件 在任何系統中的完美實現。

知名的數據庫系統

應用程序主文件的功能：

索引文件

Bootstrap 2.3.2加載
日曆設計
活動清單
瀏覽日曆
日曆的不同視圖（天/週/月/年）
在JS中加載應用程序
語言選擇

索引-BS3.HTML

Bootstrap 3.0加載
日曆設計
活動列表
瀏覽日曆
不同的日曆視圖（天/週/月/年）
在JS中加載應用程序
語言選擇

活動.JSON.PHP

具有以下數據的事件列表：
- ID： 事件標識符
- 標題： 活動標題
- 網址： 事件網址
- 類：事件類型（信息|警告| ...）以獲取後續顏色。
- 開始： 開始日期
- 結束： 終止日期

應用程序JS

存儲應用程序配置的變量。
額外的JQuery功能

日曆

主要應用程式設定
日曆的主要功能
事件的提取和處理
節日日期
語言加載
加載事件列表
加載不同的日曆視圖（日/週/月/年）

日曆CSS

日曆樣式
活動列表樣式
其他設備的日曆樣式

從數據庫中提取事件

從MYSQL數據庫中提取事件我們將替換文件的行 事件.json.php POR：

<?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框架

發表您的評論取消回复

大衛·Z 他說：
前 10年

當我檢查代碼Sergio

回复David Z
1. 塞爾吉奧·羅德納斯（SergioRódenas）他說：
  前 10年
  
  該代碼已被檢查！唯一的事情是，您必須在數據庫中使用以下字段創建«事件»表：{id | 主頁| 結束| 名稱| 類url}並配置對數據庫的訪問！
  
  回复SergioRódenas
  1. ROS 他說：
    前 10年
    
    我已經為其他人更改了這些變量，並允許我將事件添加到數據庫中，但是我看不到它反映在日曆中。以及如何根據單擊日曆的日期恢復事件的數據？
    
    回复ros
喬斯·路易斯·扎穆迪奧（@JoseZami）他說：
前 10年

要執行和執行事件的創建，則必須創建一個數據庫，但是它的作用是我可以將事件附加到數據庫中，並且默認情況下將語言附加到西班牙語，因為默認情況下它定義為英語

回复jose luis zamudio（@JoseZami）
1. 塞爾吉奧·羅德納斯（SergioRódenas）他說：
  前 10年
  
  要將語言默認為西班牙語，最好用calendar.js文件中的英語替換西班牙語文件中的現有字符串。但是，還有其他更整潔的方法，您可以在腳本的主要網站或此帖子所附的Github社區中找到它們。
  另外，我將嘗試在幾週內上傳新帖子，其中將解釋如何在數據庫中創建事件插入。
  
  回复SergioRódenas
喬斯·路易斯·扎穆迪奧（@JoseZami）他說：
前 10年

非常感謝你，我將不勝感激的帖子插入事件:)

回复jose luis zamudio（@JoseZami）
睚他說：
前 10年

你好，當我解決所有問題以連接並從數據庫中提取數據時，我沒有任何事件

回复j
迭戈他說：
前 10年

不在數據庫中插入事件

回复diego
Gonza配音他說：
前 9年

您可以發佈如何插入事件嗎？在開始和結束字段中是什麼類型的數據？時間戳？剩下“ 0”，我需要插入並能夠編輯事件。謝謝

回复Gonza
週四他說：
前 9年

如果不存在，則創建數據庫bootstrap_calendar` / *！40100默認字符集utf8收集utf8_spanish_ci * /;
使用`bootstrap_calendar`;
-適用於Win10.13（x5.6.13）的MySQL dump 32 Distrib 86
-
-主機：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'的表結構
-

如果存在`events`，則刪除表；
/ *！40101 SET @saved_cs_client = @@ character_set_client * /;
/ *！40101 SET character_set_client = utf8 * /;
創建表`事件`（
`id` int（10）unsigned NOT NULL AUTO_INCREMENT，
`title` varchar（150）收集utf8_spanish_ci默認值為NULL，
`body`文字COLLATE utf8_spanish_ci NOT NULL，
url varchar（150）收集utf8_spanish_ci NOT NULL，
`class` varchar（45）收集utf8_spanish_ci NOT NULL默認'info'，
`start` varchar（15）收集utf8_spanish_ci NOT NULL，
`end` varchar（15）收集utf8_spanish_ci NOT NULL，
主鍵（`id`）
）引擎= InnoDB默認字符集= utf8集合= utf8_spanish_ci;
/ *！40101 SET character_set_client = @saved_cs_client * /;

-
-轉儲表事件的數據
-

鎖表`事件`寫;
/ *！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:23完成

回复朱恩
juan77 他說：
前 9年

你好migos有什麼方法可以更改JSON日期格式

回复juan77
吉塞拉布拉他說：
前 8年

日曆非常好，只有在添加新事件的開始和結束時默認使用英語格式的日期時，才如何將其更改為西班牙語？應該是DD / MM / YYYY。非常感謝和問候

回复giselabra
費邊他說：
前 7年

您好，日曆很好，但是更新日期時不會立即反映在日曆中。我可以做什麼？

我還有另一個問題，如何在月視圖中顯示所有點，是否可以擴大正方形？一天對應什麼？

回复Fabian
亞歷克斯他說：
前 6年

我有一個問題，在本地加載示例時，它可以完美運行，但是當我將其上傳到在線服務器時，它僅顯示按鈕上的日曆，不會顯示任何內容。任何想法請問服務器可能是什麼或有什麼問題要修復它。

回复亞歷克斯