เรารู้สึกประทับใจมากขึ้นเรื่อย ๆ กับชุมชนอันยิ่งใหญ่ที่หมุนเวียนไปรอบ ๆ 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