Bootstrapi kalender JQueryga

bootstrap-kalender Ümbritsev tohutu kogukond avaldab meile üha suuremat muljet Bootstrap, tuntud CSS-i raamistik , mille lõi Twitter. Seekord esitlen Bootstrapil põhinevat kalendrit programmeeritud Javascripti ja JQuery abilLisaks selgitan üksikasjalikult osa kalendri toimimisest ja lisan mõned nipid ja täiustused, mida saate teha.

See Bootstrapi kalender on puhta kujundusega ja täiesti tundlik, see näeb hea välja kõigist seadmetest! See sisaldab ka a tõlge enam kui 7 keelde ja kõik iga riigi pidulikud kuupäevad on esile toodud ja ära märgitud. Luksus!

Selle Bootstrapi kalendri toimimine on mõnevõrra keeruline, see võtab kasutaja kuupäevad algselt JSON-failist välja, kuid ainult Creativos Online'i kasutajate jaoks selgitan, kuidas sündmuste väljavõtmine MYSQL-i andmebaasist selle täiuslikuks rakendamiseks mis tahes süsteemis.

Tuntud andmebaasisüsteem

Tuntud andmebaasisüsteem

Rakenduse põhifailide funktsioonid:

INDEX.HTML

  • Bootstrapi 2.3.2 laadimine
  • Kalendri kujundus
  • Sündmuste loend
  • Kalendris navigeerimine
  • Erinevad kalendrivaated (päev / nädal / kuu / aasta)
  • Rakenduse laadimine JS-i
  • Keelevalik

INDEX-BS3.HTML

  • Bootstrapi 3.0 laadimine
  • Kalendri kujundus
  • Sündmuste loend
  • Kalendris navigeerimine
  • Erinevad kalendrivaated (päev / nädal / kuu / aasta)
  • Rakenduse laadimine JS-i
  • Keelevalik

SÜNDMUSED.JSON.PHP

  • Järgmiste andmetega sündmuste loend:
    • id: sündmuse tunnus
    • pealkiri: ürituse pealkiri
    • url: sündmuse URL
    • klass: sündmuse tüüp (info | hoiatus |…) järgnevate värvide jaoks.
    • algus: alguskuupäev
    • lõpp: lõpetamise kuupäev

APP.JS

  • Muutujad, mis salvestavad rakenduse konfiguratsiooni.
  • JQuery lisafunktsioonid

KALENDER.JS

  • Peamised rakenduse seaded
  • Kalendri põhifunktsioonid
  • Sündmuste väljavõtmine ja käsitlemine
  • Pidulikud kuupäevad
  • Keele laadimine
  • Sündmuste loendi laadimine
  • Erinevate kalendrivaadete laadimine (päev / nädal / kuu / aasta)

KALENDER.CSS

  • Kalendri stiilid
  • Sündmuste loendi stiilid
  • Muude seadmete kalendristiilid

Eemaldage sündmused andmebaasist

Sündmuste väljavõtmiseks MYSQL-i andmebaasist asendame faili read events.json.php poolt:

<?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 | Bootstrapi kalender

Laadige alla Bootstrapi kalender

Lisateave | Bootstrap: CSS-i raamistik


Artikli sisu järgib meie põhimõtteid toimetuse eetika. Veast teatamiseks klõpsake nuppu siin.

14 kommentaari, jätke oma

Jäta oma kommentaar

Sinu e-postiaadressi ei avaldata. Kohustuslikud väljad on tähistatud *

*

*

  1. Andmete eest vastutab: Miguel Ángel Gatón
  2. Andmete eesmärk: Rämpsposti kontrollimine, kommentaaride haldamine.
  3. Seadustamine: teie nõusolek
  4. Andmete edastamine: andmeid ei edastata kolmandatele isikutele, välja arvatud juriidilise kohustuse alusel.
  5. Andmete salvestamine: andmebaas, mida haldab Occentus Networks (EL)
  6. Õigused: igal ajal saate oma teavet piirata, taastada ja kustutada.

  1.   David Z DIJO

    kui kontrollin koodi Sergio

    1.    Sergio Ródenas DIJO

      Kood on juba kontrollitud! Ainuke asi, peate looma oma andmebaasi tabeli «events» järgmiste väljadega: {id | kodu | lõpp | nimi | klass | url} ja konfigureerige juurdepääs oma andmebaasile!

      1.    Roos DIJO

        Olen neid muutujaid teiste jaoks muutnud ja see on lubanud mul sündmuse oma andmebaasi lisada, kuid ma ei näe, et see kalendris kajastuks. Ja kuidas saaksin sündmuste andmed taastada sõltuvalt kalendril klõpsamise päevast?

  2.   jose luis zamudio (@JoseZami) DIJO

    Sündmuste loomiseks ja loomiseks tuleb luua andmebaas, kuid see on see, et saan sellele lisada sündmused ja vaikimisi keele hispaania keelde, kuna see on vaikimisi määratletud inglise keeles

    1.    Sergio Ródenas DIJO

      Keele eelseadistamiseks hispaania keeles on kõige parem asendada olemasolevad stringid hispaaniakeelses failis ingliskeelsete stringidega failis calendar.js. Siiski on ka teisi korralikumaid meetodeid, leiate need skripti põhiveebisaidilt või Githubi kogukonnast, mis on lisatud sellele postitusele.
      Samuti proovin mõne nädala pärast üles laadida uue postituse, kus selgitan, kuidas luua sündmuste sisestamine andmebaasi.

  3.   jose luis zamudio (@JoseZami) DIJO

    Suur aitäh, hindan postitust sündmuste lisamiseks :)

  4.   telklaagriteks DIJO

    tere, mul on probleem, kui ma parandan kõik ühendamiseks ja oma andmete andmebaasist väljavõtmiseks, see ei näita mulle ühtegi sündmust

  5.   diego DIJO

    ei sisesta sündmust andmebaasi

  6.   Gonza DIJO

    Kas saaksite postitada, kuidas sündmusi lisada? millised andmed on algus- ja lõppväljadel? ajatempel? "0" on jäänud, pean sündmused sisestama ja saama neid muuta. Aitäh

  7.   Neljapäev DIJO

    LOE ANDMEBAAS, KUI POLE OLEMAS `bootstrap_calendar` / *! 40100 VAIKLIK CHARACTER SET UT8 KOGUMIK utf8_spanish_ci * /;
    KASUTA `bootstrap_calendar`;
    - MySQLi prügimägi 10.13, levitamine 5.6.13, Win32 (x86) jaoks
    -
    - Host: 127.0.0.1 Andmebaas: bootstrap_calendar
    - ——————————————————
    - Serveri versioon 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 MÄÄRATA NIMI 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 * /;

    -
    - tabeli struktuur sündmuste jaoks
    -

    LENNU TABEL, KUI ON "sündmusi";
    / *! 40101 SET @saved_cs_client = @@ character_set_client * /;
    / *! 40101 SET märk_komplekti_klient = utf8 * /;
    LOE TABEL "sündmused" (
    `id` int (10) allkirjastatud EI TÕLKE AUTO_INCREMENT,
    "pealkiri" varchar (150) COLLATE utf8_spanish_ci DEFAULT NULL,
    `body` text COLLATE utf8_spanish_ci EI NULL,
    `url` varchar (150) COLLATE utf8_spanish_ci EI NULL,
    `class` varchar (45) COLLATE utf8_spanish_ci EI NULL DEFAULT 'info',
    `start` varchar (15) COLLATE utf8_spanish_ci EI NULL,
    `end` varchar (15) COLLATE utf8_spanish_ci EI NULL,
    PÕHIVÕTI (`id`)
    ) MOOTOR = InnoDB DEFAULT CHARSET = utf8 COLLATE = utf8_spanish_ci;
    / *! 40101 SET character_set_client = @salvestatud_cs_client * /;

    -
    - tabeli sündmuste dumpinguandmed
    -

    LUKUSTUSLAUAD `üritused` KIRJUTA;
    / *! 40000 ALTER TABEL `sündmused` KEELAVAD Klahvid * /;
    / *! 40000 ALTER TABEL `sündmused` LUBA VÕTMED * /;
    AVA LAUAD;
    / *! 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 * /;

    - prügila valmis 2014-05-31 14:38:23

  8.   juan77 DIJO

    tere, migos on JSON-i kuupäeva vormingu muutmise viis

  9.   giselabra DIJO

    Kalender on väga hea, ainult et uue sündmuse lisamisel on nii alguses kui ka lõpus vaikimisi kuluv kuupäev inglise keeles, kuidas ma saan selle muuta hispaania keeleks? See oleks PP / KK / AAAA. Suur aitäh ja tervitused

  10.   Fabian DIJO

    Tere, kalender on väga hea, kuid kuupäeva värskendades ei kajastu see kohe kalendris. Mida ma teha saan?

    Mul on ka teine ​​probleem, kuidas saan kõik punktid kuvada kuuvaates, kas ruudu on võimalik laiendada? mis vastab päevale?

  11.   Alex DIJO

    Mul on probleem, et näite laadimisel töötab see suurepäraselt, kuid kui laadin selle veebiserverisse üles, ei näita see mulle kalendrist midagi vaid nuppe. Palun mõelge, mis serveril võib olla või mis sellega viga on.