אנו מתרשמים יותר ויותר מהקהילה העצומה שמסתובבת Bootstrap, מסגרת CSS ידועה , נוצר על ידי טוויטר. הפעם אני מציג לך לוח שנה מבוסס Bootstrap מתוכנת עם Javascript ו- JQueryבנוסף, אסביר בפירוט חלק מהפעלת לוח השנה ואוסיף כמה טריקים ושיפורים שתוכלו לעשות.
לוח השנה של Bootstrap הוא בעל עיצוב נקי והוא לגמרי תגובה, זה ייראה טוב מכל המכשירים! הוא משלב גם א תרגום ליותר משבע שפות וכל התאריכים החגיגיים של כל מדינה מודגשים ומצוינים. מותרות!
הפעולה של לוח שנה Bootstrap זה מורכבת במקצת, היא מחלצת את התאריכים של המשתמש מקובץ JSON בתחילה, אך, אך ורק עבור משתמשים של Creativos Onlineאני אסביר איך לחלץ את האירועים ממסד נתונים של MYSQL על הטמעתו המושלמת בכל מערכת.
מערכת מסדי נתונים ידועה
פונקציות של הקבצים העיקריים של היישום:
INDEX.HTML
- Bootstrap 2.3.2 טעינה
- עיצוב לוח שנה
- רשימת האירועים
- ניווט בלוח השנה
- תצוגות לוח שנה שונות (יום / שבוע / חודש / שנה)
- טוען את היישום ב- JS
- בחירת שפה
INDEX-BS3.HTML
- Bootstrap 3.0 טעינה
- עיצוב לוח שנה
- רשימת אירועים
- ניווט בלוח השנה
- תצוגות לוח שנה שונות (יום / שבוע / חודש / שנה)
- טוען את היישום ב- JS
- בחירת שפה
אירועים. JSON.PHP
- רשימת אירועים עם הנתונים הבאים:
- תעודת זהות: מזהה אירוע
- כותרת: כותרת האירוע
- url: כתובת אתר לאירוע
- מעמד: סוג אירוע (מידע | אזהרה | ...) לצבעים הבאים.
- תחילת you תאריך התחלה
- סוף: תאריך סיום
APP.JS
- משתנים המאחסנים את תצורת היישום.
- פונקציות JQuery נוספות
לוח שנה. JS
- הגדרות יישום ראשיות
- הפונקציות העיקריות של לוח השנה
- מיצוי וטיפול באירועים
- דייטים חגיגיים
- טעינת שפה
- טוען את רשימת האירועים
- טוען את תצוגות היומן השונות (יום / שבוע / חודש / שנה)
לוח שנה. CSS
- סגנונות לוח שנה
- סגנונות רשימת אירועים
- סגנונות לוח שנה למכשירים אחרים
חלץ אירועים ממסד נתונים
לחילוץ האירועים ממאגר MYSQL נחליף את שורות הקובץ events.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));
?>
גיתוב | לוח שנה של Bootstrap
הורד | לוח שנה של Bootstrap
מידע נוסף | Bootstrap: CSS Framework
כשאני בודק את הקוד סרג'יו
הקוד כבר בדק! הדבר היחיד, עליך ליצור את הטבלה «אירועים» במסד הנתונים שלך עם השדות הבאים: {id | בית | סיום | שם | כיתה | url} והגדר גישה למסד הנתונים שלך!
שיניתי את המשתנים האלה לאחרים, וזה אפשר לי להוסיף את האירוע למסד הנתונים שלי, אך אני לא רואה אותו משתקף בלוח השנה. וכיצד אוכל לשחזר את נתוני האירועים בהתאם ליום שלחץ על לוח השנה?
כדי לבצע ולבצע יצירת אירועים אז עליך ליצור מסד נתונים, אך מה הטעם הוא שאני יכול לצרף אליו אירועים וכברירת מחדל את השפה לספרדית מכיוון שהיא מוגדרת כאנגלית כברירת מחדל.
כדי להחליף את השפה בספרדית, עדיף להחליף את המחרוזות הקיימות בקובץ השפה הספרדית לאלה באנגלית בקובץ calendar.js. עם זאת, ישנן שיטות מסודרות אחרות, תוכל למצוא אותן באתר הראשי של התסריט או בקהילת Github, המצורפת לפוסט זה.
כמו כן, אנסה להעלות פוסט חדש בעוד מספר שבועות בו אסביר כיצד ליצור הכנסת אירועים למאגר.
תודה רבה, אעריך את הפוסט להכנסת אירועים :)
שלום יש לי בעיה כשאני מתקן הכל כדי להתחבר ולחלץ את הנתונים שלי ממסד הנתונים זה לא מראה לי אירועים
אינו מכניס אירוע למסד הנתונים
האם תוכל לפרסם כיצד להוסיף אירועים? בשדות ההתחלה והסיום, איזה סוג נתונים הם? חותמת זמן? נותרו "0", אני צריך להוסיף ולהצליח לערוך את האירועים. תודה
צור נתונים בסיסיים אם לא קיים 'bootstrap_calendar' / *! 40100 ערכת תווים ברירת מחדל utf8 COLLATE utf8_spanish_ci * /;
השתמש 'bootstrap_calendar';
- dump MySQL 10.13 Distrib 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 * /;
-
- מבנה השולחן לאירועי השולחן
-
טפטוף טבלה אם קיים 'אירועים';
/ *! 40101 SET @saved_cs_client = @@ character_set_client * /;
/ *! 40101 SET character_set_client = utf8 * /;
צור טבלה 'אירועים' (
int 'int (10) לא חתום NOT NULL AUTO_INCREMENT,
'title' varchar (150) COLLATE utf8_spanish_ci ברירת מחדל NULL,
טקסט 'גוף' COLLATE utf8_spanish_ci לא אפס,
'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 לא אפס,
varchar 'סוף' (15) COLLATE utf8_spanish_ci לא אפס,
מפתח ראשוני ('מזהה')
) ENGINE = InnoDB DEFAULT CHARSET = utf8 COLLATE = utf8_spanish_ci;
/ *! 40101 SET character_set_client = @saved_cs_client * /;
-
- השלכת נתונים לאירועי טבלה
-
טבלאות נעילה 'אירועים' כתוב;
/ *! 40000 לוח שנה 'אירועי' מקשי השבתה * /;
/ *! 40000 לוח אירועים `אירועים` הפעל מקשים * /;
שולחנות נעילה;
/ *! 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 * /;
- Dump הושלם בתאריך 2014-05-31 14:38:23
שלום migos יש דרך לשנות את פורמט התאריך של JSON
לוח השנה טוב מאוד, רק כאשר מוסיפים אירוע חדש התאריך שהוא לוקח כברירת מחדל הן בתחילת הדרך והן בסופו הוא בפורמט אנגלי, כיצד אוכל לשנות אותו לספרדית? זה יהיה DD / MM / YYYY. תודה רבה וברכות
שלום, לוח השנה טוב מאוד, אך בעת עדכון תאריך הוא לא בא לידי ביטוי מיידי בלוח השנה. מה אני יכול לעשות ?
יש לי גם בעיה אחרת, איך אוכל להציג את כל הנקודות בתצוגה החודשית, האם ניתן להגדיל את הריבוע? מה מתאים ליום?
יש לי את הבעיה שבמקום בעת טעינת הדוגמא זה עובד בצורה מושלמת אבל כשאני מעלה אותה לשרת מקוון זה לא מראה לי שום דבר מהלוח רק את הכפתורים. כל רעיון מה יכול להיות או מה לא בסדר בשרת כדי לתקן את זה בבקשה.