เรารู้สึกประทับใจมากขึ้นเรื่อย ๆ กับชุมชนอันยิ่งใหญ่ที่หมุนเวียนไปรอบ ๆ Bootstrap ซึ่งเป็นเฟรมเวิร์ก CSS ที่รู้จักกันดี สร้างโดย Twitter คราวนี้ฉันขอนำเสนอปฏิทินที่ใช้ Bootstrap โปรแกรมด้วย Javascript และ JQueryนอกจากนี้ฉันจะอธิบายรายละเอียดส่วนหนึ่งของการทำงานของปฏิทินและฉันจะเพิ่มเทคนิคและการปรับปรุงบางอย่างที่คุณสามารถทำได้
ปฏิทิน Bootstrap นี้มีการออกแบบที่สะอาดตาและโดยสิ้นเชิง การตอบสนองมันจะดูดีจากทุกอุปกรณ์! นอกจากนี้ยังรวมไฟล์ แปลเป็นมากกว่า 7 ภาษา และทั้งหมด วันเฉลิมฉลองของแต่ละประเทศจะถูกเน้นและระบุไว้. หรูหรา!
การทำงานของ Bootstrap Calendar นี้ค่อนข้างซับซ้อนโดยจะแยกวันที่ของผู้ใช้ออกจากไฟล์ JSON ในตอนแรก แต่สำหรับผู้ใช้ Creativos Online โดยเฉพาะฉันจะอธิบายว่า แยกเหตุการณ์จากฐานข้อมูล MYSQL เพื่อการใช้งานที่สมบูรณ์แบบในทุกระบบ
ระบบฐานข้อมูลที่รู้จัก
หน้าที่ของไฟล์หลักของแอปพลิเคชัน:
INDEX HTML
- กำลังโหลด Bootstrap 2.3.2
- การออกแบบปฏิทิน
- รายการกิจกรรม
- การนำทางปฏิทิน
- มุมมองปฏิทินที่แตกต่างกัน (วัน / สัปดาห์ / เดือน / ปี)
- กำลังโหลดแอปพลิเคชันใน JS
- การเลือกภาษา
INDEX-BS3 HTML
- กำลังโหลด Bootstrap 3.0
- การออกแบบปฏิทิน
- รายการเหตุการณ์
- การนำทางปฏิทิน
- มุมมองปฏิทินที่แตกต่างกัน (วัน / สัปดาห์ / เดือน / ปี)
- กำลังโหลดแอปพลิเคชันใน JS
- การเลือกภาษา
เหตุการณ์ JSON.PHP
- รายการเหตุการณ์ที่มีข้อมูลต่อไปนี้:
- ID: ตัวระบุเหตุการณ์
- ชื่อเรื่อง: ชื่อเหตุการณ์
- URL: url ของเหตุการณ์
- ระดับ: ประเภทเหตุการณ์ (ข้อมูล | คำเตือน | …) สำหรับสีที่ตามมา
- เริ่มต้น: วันที่เริ่ม
- จบ: วันสิ้นสุด
แอป.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 | Bootstrap ปฏิทิน
ดาวน์โหลด | Bootstrap ปฏิทิน
ข้อมูลเพิ่มเติม | Bootstrap: CSS Framework
ขณะที่ฉันตรวจสอบรหัส Sergio
ตรวจสอบรหัสแล้ว! สิ่งเดียวที่คุณต้องสร้างตาราง«เหตุการณ์»ในฐานข้อมูลของคุณด้วยฟิลด์ต่อไปนี้: {id | บ้าน | จบ | ชื่อ | ชั้นเรียน | url} และกำหนดค่าการเข้าถึงฐานข้อมูลของคุณ!
ฉันได้เปลี่ยนตัวแปรเหล่านั้นสำหรับคนอื่น ๆ และอนุญาตให้ฉันเพิ่มเหตุการณ์ลงในฐานข้อมูลของฉันได้ แต่ฉันไม่เห็นมันปรากฏในปฏิทิน และฉันจะกู้คืนข้อมูลของเหตุการณ์ได้อย่างไรโดยขึ้นอยู่กับวันที่ฉันคลิกบนปฏิทิน
ในการทำและดำเนินการสร้างเหตุการณ์จากนั้นต้องสร้างฐานข้อมูล แต่สิ่งที่เกี่ยวกับคือฉันสามารถผนวกเหตุการณ์เข้ากับเหตุการณ์นั้นได้และโดยค่าเริ่มต้นภาษาจะเป็นภาษาสเปนเนื่องจากถูกกำหนดให้เป็นภาษาอังกฤษโดยค่าเริ่มต้น
หากต้องการเริ่มต้นภาษาเป็นภาษาสเปนควรแทนที่สตริงที่มีอยู่ในไฟล์ภาษาสเปนด้วยภาษาอังกฤษในไฟล์ calendar.js อย่างไรก็ตามมีวิธีการอื่น ๆ ที่ดีกว่าคุณสามารถค้นหาได้จากเว็บไซต์หลักของสคริปต์หรือในชุมชน Github ที่แนบมากับโพสต์นี้
นอกจากนี้ฉันจะพยายามอัปโหลดโพสต์ใหม่ในอีกไม่กี่สัปดาห์ซึ่งฉันจะอธิบายวิธีสร้างการแทรกเหตุการณ์ในฐานข้อมูล
ขอบคุณมากฉันจะขอบคุณโพสต์เพื่อแทรกเหตุการณ์ :)
สวัสดีฉันมีปัญหาเมื่อฉันแก้ไขทุกอย่างเพื่อเชื่อมต่อและดึงข้อมูลของฉันจากฐานข้อมูลมันไม่แสดงเหตุการณ์ใด ๆ
ไม่แทรกเหตุการณ์ในฐานข้อมูล
คุณช่วยโพสต์วิธีแทรกเหตุการณ์ได้ไหม ในฟิลด์เริ่มต้นและสิ้นสุดเป็นข้อมูลประเภทใด ประทับเวลา? เหลือ "0" ฉันต้องแทรกและแก้ไขเหตุการณ์ได้ ขอบคุณ
สร้างฐานข้อมูลหากไม่มี "bootstrap_calendar` / *! 40100 ชุดตัวอักษรเริ่มต้น utf8 รวบรวม utf8_spanish_ci * /;
ใช้ `bootstrap_calendar`;
- MySQL ดัมพ์ 10.13 แจกจ่าย 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 SET NAMES utf8 * /;
/ *! 40103 SET @OLD_TIME_ZONE = @@ TIME_ZONE * /;
/ *! 40103 ตั้งค่า TIME_ZONE = '+ 00:00′ * /;
/ *! 40014 SET @OLD_UNIQUE_CHECKS = @@ UNIQUE_CHECKS, UNIQUE_CHECKS = 0 * /;
/ *! 40014 เซ็ต @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 * /;
-
- โครงสร้างตารางสำหรับตาราง "เหตุการณ์"
-
วางตารางหากมี `เหตุการณ์`;
/ *! 40101 SET @saved_cs_client = @@ character_set_client * /;
/ *! 40101 SET character_set_client = utf8 * /;
สร้างตาราง `เหตุการณ์` (
`id` int (10) ไม่ได้ลงนาม NOT NULL AUTO_INCREMENT,
`title` varchar (150) รวบรวม utf8_spanish_ci ค่าเริ่มต้น NULL,
ข้อความ `body` COLLATE utf8_spanish_ci ไม่ใช่ NULL,
`url` varchar (150) รวบรวม utf8_spanish_ci ไม่เป็นโมฆะ,
`class` varchar (45) รวบรวมข้อมูล utf8_spanish_ci NOT NULL DEFAULT ',
`start` varchar (15) รวบรวม utf8_spanish_ci ไม่ใช่ NULL,
`end` varchar (15) COLLATE utf8_spanish_ci ไม่ใช่ NULL,
คีย์หลัก ("id`)
) ENGINE = InnoDB DEFAULT CHARSET = utf8 COLLATE = utf8_spanish_ci;
/ *! 40101 SET character_set_client = @saved_cs_client * /;
-
- การถ่ายโอนข้อมูลสำหรับตาราง "เหตุการณ์"
-
ล็อกตาราง `เหตุการณ์` เขียน;
/ *! 40000 ALTER TABLE `events` DISABLE KEYS * /;
/ *! 40000 ALTER TABLE `events` เปิดใช้งานคีย์ * /;
ปลดล็อคตาราง;
/ *! 40103 ตั้งค่า TIME_ZONE = @ OLD_TIME_ZONE * /;
/ *! 40101 SET SQL_MODE = @ OLD_SQL_MODE * /;
/ *! 40014 ตั้ง FOREIGN_KEY_CHECKS = @ OLD_FOREIGN_KEY_CHECKS * /;
/ *! 40014 ตั้งค่า UNIQUE_CHECKS = @ OLD_UNIQUE_CHECKS * /;
/ *! 40101 ตั้ง CHARACTER_SET_CLIENT = @ OLD_CHARACTER_SET_CLIENT * /;
/ *! 40101 ตั้ง CHARACTER_SET_RESULTS = @ OLD_CHARACTER_SET_RESULTS * /;
/ *! 40101 SET COLLATION_CONNECTION = @ OLD_COLLATION_CONNECTION * /;
/ *! 40111 ชุด SQL_NOTES = @ OLD_SQL_NOTES * /;
- ถ่ายโอนข้อมูลเสร็จเมื่อ 2014-05-31 14:38:23 น
สวัสดี migos มีวิธีใดในการเปลี่ยนรูปแบบวันที่ JSON
ปฏิทินดีมากเฉพาะเมื่อเพิ่มเหตุการณ์ใหม่วันที่ที่ใช้โดยค่าเริ่มต้นทั้งในจุดเริ่มต้นและจุดสิ้นสุดจะอยู่ในรูปแบบภาษาอังกฤษฉันจะเปลี่ยนเป็นภาษาสเปนได้อย่างไร มันจะเป็น DD / MM / YYYY ขอบคุณมากและทักทาย
สวัสดีปฏิทินดีมาก แต่เมื่ออัปเดตวันที่จะไม่ปรากฏในปฏิทินทันที ฉันจะทำอะไรได้บ้าง?
ฉันมีปัญหาอีกอย่างคือฉันจะทำให้คะแนนทั้งหมดแสดงในมุมมองรายเดือนได้อย่างไรฉันสามารถขยายสี่เหลี่ยมได้หรือไม่? สิ่งที่สอดคล้องกับวัน?
ฉันมีปัญหาในเครื่องเมื่อโหลดตัวอย่างมันทำงานได้อย่างสมบูรณ์ แต่เมื่อฉันอัปโหลดไปยังเซิร์ฟเวอร์ออนไลน์มันไม่แสดงอะไรเลยจากปฏิทินเพียงปุ่มเท่านั้น ความคิดใด ๆ ที่อาจเกิดขึ้นหรือมีอะไรผิดพลาดกับเซิร์ฟเวอร์โปรดแก้ไข