لقد أعجبنا بشكل متزايد بالمجتمع الهائل الذي يدور حوله Bootstrap ، إطار CSS مشهور تم إنشاؤه بواسطة Twitter. هذه المرة أقدم لكم تقويمًا قائمًا على Bootstrap مبرمج مع Javascript و JQueryسأشرح أيضًا بالتفصيل جزءًا من تشغيل التقويم وأضيف بعض الحيل والتحسينات التي يمكنك القيام بها.
يتميز تقويم Bootstrap بتصميم نظيف وهو تمامًا استجابة، سيبدو جيدًا من جميع الأجهزة! كما يتضمن أيضًا ملف ترجمة إلى أكثر من 7 لغات وكل يتم تسليط الضوء على التواريخ الاحتفالية لكل بلد وتدوينها. رفاهية!
يعد تشغيل تقويم Bootstrap معقدًا إلى حد ما، فهو يستخرج تواريخ المستخدم من ملف JSON في البداية، ولكن حصريًا لمستخدمي Creativos Onlineسأشرح كيف استخراج الأحداث من قاعدة بيانات MYSQL لتنفيذه المثالي في أي نظام.
نظام قاعدة بيانات معروف
وظائف الملفات الرئيسية للتطبيق:
INDEX.HTML
- تحميل Bootstrap 2.3.2
- تصميم التقويم
- قائمة الأحداث
- تصفح التقويم
- طرق عرض التقويم المختلفة (يوم / أسبوع / شهر / سنة)
- تحميل التطبيق في JS
- اختيار اللغة
إندكس-BS3.HTML
- تحميل Bootstrap 3.0
- تصميم التقويم
- قائمة الأحداث
- تصفح التقويم
- طرق عرض التقويم المختلفة (يوم / أسبوع / شهر / سنة)
- تحميل التطبيق في JS
- اختيار اللغة
الأحداث. JSON.PHP
- قائمة الأحداث بالبيانات التالية:
- الرقم: معرف الحدث
- العنوان: عنوان الحدث
- رابط: رابط الحدث
- صف دراسي: نوع الحدث (معلومات | تحذير | ...) للألوان اللاحقة.
- بدء: تاريخ البدء
- ينتهي: تاريخ الإنهاء
APP.JS
- المتغيرات التي تخزن تكوين التطبيق.
- وظائف JQuery الإضافية
التقويم
- إعدادات التطبيق الرئيسية
- الوظائف الرئيسية للتقويم
- استخراج ومعالجة الأحداث
- تواريخ الاعياد
- تحميل اللغة
- تحميل قائمة الأحداث
- تحميل طرق عرض التقويم المختلفة (يوم / أسبوع / شهر / سنة)
التقويم
- أنماط التقويم
- أنماط قائمة الأحداث
- أنماط التقويم للأجهزة الأخرى
استخراج الأحداث من قاعدة البيانات
لاستخراج الأحداث من قاعدة بيانات 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));
?>
جيثب | تقويم Bootstrap
تحميل | تقويم Bootstrap
معرفة المزيد | التمهيد: إطار عمل CSS
وأنا أتحقق من رمز سيرجيو
تم التحقق من الرمز بالفعل! الشيء الوحيد هو أن عليك إنشاء جدول «الأحداث» في قاعدة البيانات الخاصة بك مع الحقول التالية: {id | الصفحة الرئيسية | نهاية | الاسم | فئة | url} وتهيئة الوصول إلى قاعدة البيانات الخاصة بك!
لقد قمت بتغيير هذه المتغيرات للآخرين ، وسمح لي بإضافة الحدث إلى قاعدة البيانات الخاصة بي ، لكنني لا أرى أنه ينعكس في التقويم. وكيف يمكنني استعادة بيانات الأحداث حسب اليوم الذي أنقر فيه على التقويم؟
للقيام بإنشاء الأحداث وتنفيذها ، يجب إنشاء قاعدة بيانات ، ولكن ما يدور حوله هو أنه يمكنني إلحاق الأحداث بها وكإعداد افتراضي ، اللغة الإسبانية لأنها تُعرّف على أنها الإنجليزية بشكل افتراضي
لتعيين اللغة بشكل افتراضي إلى الإسبانية ، من الأفضل استبدال السلاسل الموجودة في ملف اللغة الإسبانية بتلك الموجودة باللغة الإنجليزية في ملف calendar.js. ومع ذلك ، هناك طرق أخرى أكثر إتقانًا ، يمكنك العثور عليها على موقع الويب الرئيسي للبرنامج النصي أو في مجتمع Github ، المرفق بهذه المشاركة.
أيضًا ، سأحاول تحميل منشور جديد في غضون أسابيع قليلة حيث سأشرح كيفية إنشاء إدراج الأحداث في قاعدة البيانات.
شكرا جزيلا لك ، سأقدر المنشور لإدراج الأحداث :)
مرحبًا ، لدي مشكلة عندما أقوم بإصلاح كل شيء للاتصال واستخراج بياناتي من قاعدة البيانات ، فإنها لا تظهر لي أي أحداث
لا يقوم بإدراج الحدث في قاعدة البيانات
هل يمكنك نشر كيفية إدراج الأحداث؟ في حقلي البداية والنهاية ما نوع البيانات؟ الطابع الزمني؟ هناك "0" متبقية ، أحتاج إلى إدراج الأحداث وأتمكن من تحريرها. شكرا
إنشاء قاعدة بيانات إذا لم يكن EXISTS `bootstrap_calendar` / *! 40100 DEFAULT CHARACTER SET utf8 COLLATE utf8_spanish_ci * /؛
استخدم "bootstrap_calendar" ؛
- MySQL dump 10.13 Distrib 5.6.13 لـ Win32 (x86)
-
- المضيف: 127.0.0.1 قاعدة البيانات: bootstrap_calendar
- ———————————————————
- إصدار الخادم 5.5.27
/ *! 40101 SETOLD_CHARACTER_SET_CLIENT =CHARACTER_SET_CLIENT * / ؛
/ *! 40101 SETOLD_CHARACTER_SET_RESULTS =CHARACTER_SET_RESULTS * / ؛
/ *! 40101 SETOLD_COLLATION_CONNECTION =COLLATION_CONNECTION * / ؛
/ *! 40101 SET NAMES utf8 * /؛
/ *! 40103 SETOLD_TIME_ZONE =TIME_ZONE * / ؛
/ *! 40103 SET TIME_ZONE = '+ 00:00 ′ * / ؛
/ *! 40014 SETOLD_UNIQUE_CHECKS =UNIQUE_CHECKS ، UNIQUE_CHECKS = 0 * / ؛
/ *! 40014 SETOLD_FOREIGN_KEY_CHECKS =FOREIGN_KEY_CHECKS ، FOREIGN_KEY_CHECKS = 0 * / ؛
/ *! 40101 SETOLD_SQL_MODE =SQL_MODE ، SQL_MODE = 'NO_AUTO_VALUE_ON_ZERO' * / ؛
/ *! 40111 SETOLD_SQL_NOTES =SQL_NOTES ، SQL_NOTES = 0 * / ؛
-
- هيكل الجدول لجدول "الأحداث"
-
إسقاط الجدول إذا كانت EXISTS "أحداث" ؛
/ *! 40101 SETsaved_cs_client =character_set_client * / ؛
/ *! 40101 SET character_set_client = utf8 * / ؛
إنشاء جدول "أحداث" (
`id` int (10) غير موقّع NOT NULL AUTO_INCREMENT ،
"العنوان" varchar (150) COLLATE utf8_spanish_ci DEFAULT NULL ،
نص "النص الأساسي" 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' ،
`بدء` varchar (15) COLLATE utf8_spanish_ci NOT NULL ،
`end` varchar (15) COLLATE utf8_spanish_ci NOT NULL ،
المفتاح الأساسي (`id`)
) المحرك = مجموعة InnoDB الافتراضية = utf8 COLLATE = 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
مرحبًا migos ، هل هناك أي طريقة لتغيير تنسيق تاريخ JSON
التقويم جيد جدًا ، فقط عند إضافة حدث جديد ، يكون التاريخ الذي يستغرقه افتراضيًا في البداية والنهاية بتنسيق اللغة الإنجليزية ، كيف يمكنني تغييره إلى اللغة الإسبانية؟ سيكون DD / MM / YYYY. شكرا جزيلا وتحياتي لك
مرحبًا ، التقويم جيد جدًا ، ولكن عند تحديث التاريخ لا ينعكس على الفور في التقويم. ماذا استطيع ان افعل ؟
لدي مشكلة أخرى أيضًا ، كيف يمكنني عرض جميع النقاط في العرض الشهري ، هل يمكن تكبير المربع؟ ما يتوافق مع يوم؟
لدي مشكلة أنه عند تحميل المثال محليًا ، فإنه يعمل بشكل مثالي ولكن عندما أقوم بتحميله إلى خادم عبر الإنترنت ، فإنه لا يظهر لي أي شيء من التقويم فقط الأزرار. أي فكرة عما قد يكون أو ما هو الخطأ في الخادم لإصلاحه من فضلك.