Bootstrap naptár a JQuery-vel

bootstrap-naptár Egyre jobban lenyűgöz bennünket az a hatalmas közösség, amely körül forog Bootstrap, egy jól ismert CSS keretrendszer , készítette: Twitter. Ezúttal egy Bootstrap alapú naptárat mutatok be nektek Javascript és JQuery programozással, Részletesen elmagyarázom a naptár működésének egy részét, és hozzáadok néhány trükköt és fejlesztést, amelyeket megtehet.

Ez a Bootstrap naptár tiszta kivitelű és teljesen fogékony, minden eszközről jól fog kinézni! Ez magában foglalja a fordítás több mint 7 nyelvre és minden minden ország ünnepi dátumát kiemelik és megjegyzik. Luxus!

Ennek a Bootstrap naptárnak a működése kissé összetett, kezdetben kivonja a felhasználó dátumát egy JSON fájlból, de kizárólag a Creativos Online felhasználók számára elmagyarázom, hogyan bontsa ki az eseményeket egy MYSQL adatbázisból bármely rendszer tökéletes megvalósításához.

Ismert adatbázis-rendszer

Ismert adatbázis-rendszer

Az alkalmazás fő fájljainak funkciói:

INDEX.HTML

  • Bootstrap 2.3.2 betöltése
  • Naptár tervezés
  • Események listája
  • Navigálás a Naptárban
  • Különböző naptár nézetek (nap / hét / hónap / év)
  • Az alkalmazás betöltése JS-be
  • Nyelvválasztás

INDEX-BS3.HTML

  • Bootstrap 3.0 betöltése
  • Naptár tervezés
  • Eseménylista
  • Navigálás a Naptárban
  • Különböző naptár nézetek (nap / hét / hónap / év)
  • Az alkalmazás betöltése JS-be
  • Nyelvválasztás

ESEMÉNYEK.JSON.PHP

  • Események listája a következő adatokkal:
    • id: eseményazonosító
    • cím: esemény címe
    • url: az esemény URL-je
    • osztály: esemény típusa (info | figyelmeztetés |…) a következő színekhez.
    • Rajt: kezdő dátum
    • vége: befejezési időpont

APP.JS

  • Az alkalmazás konfigurációját tároló változók.
  • Extra JQuery funkciók

NAPTÁR.JS

  • Fő alkalmazásbeállítások
  • A Naptár fő funkciói
  • Események kivonása és kezelése
  • Ünnepi időpontok
  • Nyelv betöltése
  • Az Események lista betöltése
  • A különböző naptár nézetek betöltése (nap / hét / hónap / év)

NAPTÁR.CSS

  • Naptárstílusok
  • Eseménylista stílusok
  • Naptárstílusok más eszközökhöz

Bontsa ki az eseményeket az adatbázisból

Az események kibontása egy MYSQL adatbázisból kicseréljük a fájl sorait events.json.php by:

<?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 naptár

Letöltés | Bootstrap naptár

Tudjon meg többet | Bootstrap: CSS keretrendszer


A cikk tartalma betartja a szerkesztői etika. A hiba bejelentéséhez kattintson a gombra itt.

14 hozzászólás, hagyd a tiedet

Hagyja megjegyzését

E-mail címed nem kerül nyilvánosságra.

*

*

  1. Az adatokért felelős: Miguel Ángel Gatón
  2. Az adatok célja: A SPAM ellenőrzése, a megjegyzések kezelése.
  3. Legitimáció: Az Ön beleegyezése
  4. Az adatok közlése: Az adatokat csak jogi kötelezettség alapján továbbítjuk harmadik felekkel.
  5. Adattárolás: Az Occentus Networks (EU) által üzemeltetett adatbázis
  6. Jogok: Bármikor korlátozhatja, helyreállíthatja és törölheti adatait.

  1.   Dávid Z dijo

    ahogy megnézem a Sergio kódot

    1.    Sergio Rodenas dijo

      A kód már ellenőrizve van! Az egyetlen dolog, létre kell hoznia az „események” táblát az adatbázisban a következő mezőkkel: {id | otthon | vége | név | osztály | url} címet, és konfigurálja az adatbázishoz való hozzáférést!

      1.    Rózsa dijo

        Megváltoztattam ezeket a változókat mások számára, és ez lehetővé tette számomra, hogy felvegyem az eseményt az adatbázisomba, de nem látom, hogy ez tükröződjön a naptárban. És hogyan tudnám visszaállítani az események adatait attól függően, hogy milyen napra kattintok a naptárra?

  2.   Jose Luis Zamudio (@JoseZami) dijo

    Az események létrehozásához és végrehajtásához létre kell hozni egy adatbázist, de miről szól, hogy hozzá tudom fűzni az eseményeket, és alapértelmezés szerint a nyelvet a spanyolhoz, mert alapértelmezés szerint angolul van megadva

    1.    Sergio Rodenas dijo

      A nyelv alapértelmezett beállítása spanyol, a legjobb, ha a spanyol nyelvű fájl meglévő karakterláncait lecseréli a calendar.js fájlban található angol nyelvű karakterláncokra. Vannak azonban más rendesebb módszerek is, amelyek megtalálhatók a szkript fő webhelyén vagy a Github közösségben, ehhez a bejegyzéshez csatolva.
      Néhány hét múlva megpróbálok feltölteni egy új bejegyzést, ahol elmagyarázom, hogyan lehet létrehozni az események beillesztését az adatbázisba.

  3.   Jose Luis Zamudio (@JoseZami) dijo

    Nagyon köszönöm, meg fogom értékelni a bejegyzést az események beillesztéséért :)

  4.   Jair dijo

    szia, problémám van, amikor mindent kijavítok a csatlakozáshoz, és kivonatom az adataimat az adatbázisból, ez nem mutat semmilyen eseményt

  5.   Diego dijo

    nem szúr be eseményt az adatbázisba

  6.   Gonza dijo

    Le tudnád írni, hogyan kell eseményeket beilleszteni? a start és end mezőkben milyen típusú adatokról van szó? időbélyeg? "0" maradt, be kell szúrnom és szerkeszteni kell az eseményeket. Köszönöm

  7.   Csütörtök dijo

    LÉTREHOZ ADATBÁZISOT, HA NINCS LÉTRE `bootstrap_calendar` / *! 40100 DEFAULT CHARACTER SET utf8 COLLATE utf8_spanish_ci * /;
    HASZNÁLATA `bootstrap_calendar`;
    - MySQL dump 10.13 Terjesztés 5.6.13, Win32 (x86) esetén
    -
    - Host: 127.0.0.1 Adatbázis: bootstrap_calendar
    - ——————————————————
    - A szerver 5.5.27 verziója

    / *! 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 BEÁLLÍTOTT NEVEK 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 * /;

    -
    - Táblázat felépítése a táblázat eseményeihez
    -

    EZT TÁBLÁZAT, HA LÉTEZIK "eseményeket";
    / *! 40101 SET @saved_cs_client = @@ character_set_client * /;
    / *! 40101 SET karakter_készlet_ügyfél = utf8 * /;
    CREATE TABLE `események '(
    `id` int (10) aláíratlan NEM NULL AUTO_INCREMENT,
    `title` varchar (150) COLLATE utf8_spanish_ci DEFAULT NULL,
    `body` text COLLATE utf8_spanish_ci NEM NULL,
    `url` varchar (150) COLLATE utf8_spanish_ci NEM NULL,
    `class` varchar (45) COLLATE utf8_spanish_ci NEM NULL DEFAULT 'info',
    `start` varchar (15) COLLATE utf8_spanish_ci NEM NULL,
    `end` varchar (15) COLLATE utf8_spanish_ci NEM NULL,
    ELSŐDLEGES KULCS (`id`)
    ) ENGINE = InnoDB DEFAULT CHARSET = utf8 COLLATE = utf8_spanish_ci;
    / *! 40101 SET karakter_készlet_ügyfél = @ mentett_cs_ügyfél * /;

    -
    - A tábla `események 'dömpingadatai
    -

    ZÁRÓTÁBLÁK `események` ÍRJ;
    / *! 40000 ALTER TABLE `események` KELLETT KULCSOK * /;
    / *! 40000 ALTER TABLE `események 'KULCSOK ENGEDÉLYEZÉSE * /;
    TÁBLÁZATOK Kinyitása;
    / *! 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 * /;

    - A dömping 2014-05-31 14:38:23

  8.   juan77 dijo

    hello migos van-e mód a JSON dátumformátum megváltoztatására

  9.   giselabra dijo

    A naptár nagyon jó, csak akkor, ha új esemény hozzáadásakor a dátum alapértelmezés szerint mind az elején, mind a végén angol formátumú, hogyan változtatom meg spanyolra? NN / HH / ÉÉÉÉ lenne. Köszönöm szépen és köszönöm

  10.   Óvatos dijo

    Helló, a naptár nagyon jó, de a dátum frissítésekor nem jelenik meg azonnal a naptárban. Mit tudok tenni ?

    Van egy másik problémám is, hogyan tudom az összes pontot megjeleníteni a havi nézetben, meg lehet-e növelni a négyzetet? mi felel meg egy napnak?

  11.   Alex dijo

    Nekem az a problémám, hogy lokálisan a példa betöltésekor tökéletesen működik, de amikor feltöltöm egy online szerverre, a naptárból csak a gombok jelennek meg. Bármilyen ötlet, hogy mi lehet, vagy mi a baj a szerverrel, hogy kijavítsa.