לוח שנה של Bootstrap עם JQuery

bootstrap-לוח שנה אנו מתרשמים יותר ויותר מהקהילה העצומה שמסתובבת 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


תוכן המאמר עומד בעקרונותינו של אתיקה עריכתית. כדי לדווח על שגיאה לחץ כאן.

14 תגובות, השאר את שלך

השאירו את התגובה שלכם

כתובת הדוא"ל שלך לא תפורסם.

*

*

  1. אחראי לנתונים: מיגל אנחל גטון
  2. מטרת הנתונים: בקרת ספאם, ניהול תגובות.
  3. לגיטימציה: הסכמתך
  4. מסירת הנתונים: הנתונים לא יועברו לצדדים שלישיים אלא בהתחייבות חוקית.
  5. אחסון נתונים: מסד נתונים המתארח על ידי Occentus Networks (EU)
  6. זכויות: בכל עת תוכל להגביל, לשחזר ולמחוק את המידע שלך.

  1.   דוד ז דיג'ו

    כשאני בודק את הקוד סרג'יו

    1.    סרחיו רודנס דיג'ו

      הקוד כבר בדק! הדבר היחיד, עליך ליצור את הטבלה «אירועים» במסד הנתונים שלך עם השדות הבאים: {id | בית | סיום | שם | כיתה | url} והגדר גישה למסד הנתונים שלך!

      1.    ורד דיג'ו

        שיניתי את המשתנים האלה לאחרים, וזה אפשר לי להוסיף את האירוע למסד הנתונים שלי, אך אני לא רואה אותו משתקף בלוח השנה. וכיצד אוכל לשחזר את נתוני האירועים בהתאם ליום שלחץ על לוח השנה?

  2.   ג'וזה לואיס זמודיו (@JoseZami) דיג'ו

    כדי לבצע ולבצע יצירת אירועים אז עליך ליצור מסד נתונים, אך מה הטעם הוא שאני יכול לצרף אליו אירועים וכברירת מחדל את השפה לספרדית מכיוון שהיא מוגדרת כאנגלית כברירת מחדל.

    1.    סרחיו רודנס דיג'ו

      כדי להחליף את השפה בספרדית, עדיף להחליף את המחרוזות הקיימות בקובץ השפה הספרדית לאלה באנגלית בקובץ calendar.js. עם זאת, ישנן שיטות מסודרות אחרות, תוכל למצוא אותן באתר הראשי של התסריט או בקהילת Github, המצורפת לפוסט זה.
      כמו כן, אנסה להעלות פוסט חדש בעוד מספר שבועות בו אסביר כיצד ליצור הכנסת אירועים למאגר.

  3.   ג'וזה לואיס זמודיו (@JoseZami) דיג'ו

    תודה רבה, אעריך את הפוסט להכנסת אירועים :)

  4.   יאיר דיג'ו

    שלום יש לי בעיה כשאני מתקן הכל כדי להתחבר ולחלץ את הנתונים שלי ממסד הנתונים זה לא מראה לי אירועים

  5.   דייגו דיג'ו

    אינו מכניס אירוע למסד הנתונים

  6.   גונזה דיג'ו

    האם תוכל לפרסם כיצד להוסיף אירועים? בשדות ההתחלה והסיום, איזה סוג נתונים הם? חותמת זמן? נותרו "0", אני צריך להוסיף ולהצליח לערוך את האירועים. תודה

  7.   חמישי דיג'ו

    צור נתונים בסיסיים אם לא קיים '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

  8.   juan77 דיג'ו

    שלום migos יש דרך לשנות את פורמט התאריך של JSON

  9.   גיזלברה דיג'ו

    לוח השנה טוב מאוד, רק כאשר מוסיפים אירוע חדש התאריך שהוא לוקח כברירת מחדל הן בתחילת הדרך והן בסופו הוא בפורמט אנגלי, כיצד אוכל לשנות אותו לספרדית? זה יהיה DD / MM / YYYY. תודה רבה וברכות

  10.   פביאן דיג'ו

    שלום, לוח השנה טוב מאוד, אך בעת עדכון תאריך הוא לא בא לידי ביטוי מיידי בלוח השנה. מה אני יכול לעשות ?

    יש לי גם בעיה אחרת, איך אוכל להציג את כל הנקודות בתצוגה החודשית, האם ניתן להגדיל את הריבוע? מה מתאים ליום?

  11.   אלכס דיג'ו

    יש לי את הבעיה שבמקום בעת טעינת הדוגמא זה עובד בצורה מושלמת אבל כשאני מעלה אותה לשרת מקוון זה לא מראה לי שום דבר מהלוח רק את הכפתורים. כל רעיון מה יכול להיות או מה לא בסדר בשרת כדי לתקן את זה בבקשה.

bool (נכון)