„Bootstrap“ kalendorius su „JQuery“

bootstrap-kalendorius Mums vis didesnį įspūdį daro didžiulė bendruomenė, kuri sukasi aplinkui „Bootstrap“, gerai žinoma CSS sistema , sukurta „Twitter“. Šį kartą pristatau jums „Bootstrap“ pagrįstą kalendorių užprogramuotas naudojant „Javascript“ ir „JQuery“, Taip pat išsamiai paaiškinsiu dalį kalendoriaus veikimo ir pridėsiu keletą gudrybių bei patobulinimų, kuriuos galite padaryti.

Šis „Bootstrap“ kalendorius yra švaraus dizaino ir yra visiškai reaguojantis, tai gerai atrodys iš visų įrenginių! Jame taip pat yra a vertimas į daugiau nei 7 kalbas ir viskas išryškinamos ir pažymimos kiekvienos šalies šventinės datos. Prabanga!

Šio „Bootstrap“ kalendoriaus veikimas yra šiek tiek sudėtingas, jis iš pradžių iš JSON failo ištraukia vartotojo datas, tačiau paaiškinsiu, tik išimtinai „Creativos Online“ vartotojams. išskleisti įvykius iš MYSQL duomenų bazės dėl tobulo jo įgyvendinimo bet kurioje sistemoje.

Žinoma duomenų bazių sistema

Žinoma duomenų bazių sistema

Pagrindinių programos failų funkcijos:

INDEX.HTML

  • Bootstrap 2.3.2 pakrovimas
  • Kalendoriaus dizainas
  • Renginių sąrašas
  • Naršymas kalendoriuje
  • Skirtingi kalendoriaus rodiniai (diena / savaitė / mėnuo / metai)
  • Įkeliama programa į JS
  • Kalbos pasirinkimas

INDEKSAS-BS3.HTML

  • Bootstrap 3.0 pakrovimas
  • Kalendoriaus dizainas
  • Įvykių sąrašas
  • Naršymas kalendoriuje
  • Skirtingi kalendoriaus rodiniai (diena / savaitė / mėnuo / metai)
  • Įkeliama programa į JS
  • Kalbos pasirinkimas

RENGINIAI.JSON.PHP

  • Įvykių sąrašas su šiais duomenimis:
    • ID numeris: įvykio identifikatorius
    • pavadinimas: renginio pavadinimas
    • URL: įvykio URL
    • klasė: įvykio tipas (informacija | įspėjimas |…) kitoms spalvoms.
    • pradžia: pradžios data
    • galas: nutraukimo data

APP.JS

  • Kintamieji, kuriuose saugoma programos konfigūracija.
  • Papildomos „JQuery“ funkcijos

CALENDAR.JS

  • Pagrindiniai programos nustatymai
  • Pagrindinės kalendoriaus funkcijos
  • Įvykių išskyrimas ir gydymas
  • Šventinės datos
  • Kalba įkeliama
  • Įkeliamas įvykių sąrašas
  • Įkeliami skirtingi kalendoriaus rodiniai (diena / savaitė / mėnuo / metai)

KALENDORIUS.CSS

  • Kalendoriaus stiliai
  • Įvykių sąrašo stiliai
  • Kitų įrenginių kalendoriaus stiliai

Ištraukite įvykius iš duomenų bazės

Norėdami išgauti įvykius iš MYSQL duomenų bazės pakeisime failo eilutes įvykiai.json.php pagal:

<?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));

?>

Githubas „Bootstrap“ kalendorius

Atsisiųsti | „Bootstrap“ kalendorius

Sužinokite daugiau | „Bootstrap“: CSS sistema


Straipsnio turinys atitinka mūsų principus redakcijos etika. Norėdami pranešti apie klaidą, spustelėkite čia.

14 komentarai, palikite savo

Palikite komentarą

Jūsų elektroninio pašto adresas nebus skelbiamas. Privalomi laukai yra pažymėti *

*

*

  1. Atsakingas už duomenis: Miguel Ángel Gatón
  2. Duomenų paskirtis: kontroliuoti šlamštą, komentarų valdymą.
  3. Įteisinimas: jūsų sutikimas
  4. Duomenų perdavimas: Duomenys nebus perduoti trečiosioms šalims, išskyrus teisinius įsipareigojimus.
  5. Duomenų saugojimas: „Occentus Networks“ (ES) talpinama duomenų bazė
  6. Teisės: bet kuriuo metu galite apriboti, atkurti ir ištrinti savo informaciją.

  1.   Deividas Z sakė

    kaip aš tikrinu kodą Sergio

    1.    Sergio Ródenas sakė

      Kodas jau patikrintas! Vienintelis dalykas, jūs turite sukurti lentelę «įvykiai» savo duomenų bazėje su šiais laukais: {id | namai | pabaiga | vardas | klasė | url} ir sukonfigūruokite prieigą prie savo duomenų bazės!

      1.    Rožė sakė

        Aš pakeičiau tuos kintamuosius kitiems, ir tai leido man pridėti įvykį prie savo duomenų bazės, bet nematau, kad jis atsispindėtų kalendoriuje. O kaip aš galėčiau atkurti įvykių duomenis, priklausomai nuo dienos, kai spusteliu kalendorių?

  2.   Jose Luis Zamudio (@JoseZami) sakė

    Norint atlikti ir kurti įvykius, reikia sukurti duomenų bazę, bet kokia prasmė yra ta, kad galiu pridėti įvykių prie jos ir kaip numatytąją kalbą ispanų kalba, nes pagal numatytuosius nustatymus ji yra apibrėžta kaip anglų

    1.    Sergio Ródenas sakė

      Norint iš anksto nustatyti kalbą ispanų kalba, geriausia pakeisti esamas eilutes ispanų kalbos faile angliškomis faile calendar.js. Tačiau yra ir kitų tvarkingesnių metodų, kuriuos galite rasti pagrindinėje scenarijaus svetainėje arba „Github“ bendruomenėje, pridedamoje prie šio įrašo.
      Be to, po kelių savaičių bandysiu įkelti naują įrašą, kuriame paaiškinsiu, kaip sukurti įvykių įterpimą į duomenų bazę.

  3.   Jose Luis Zamudio (@JoseZami) sakė

    Labai ačiū, įvertinsiu įrašą, kad įterpčiau įvykius :)

  4.   Jair sakė

    sveiki, turiu problemą, kai viską išsprendžiu, kad galėčiau prisijungti ir išgauti duomenis iš duomenų bazės, man tai nerodo jokių įvykių

  5.   diego sakė

    neįterpia įvykio į duomenų bazę

  6.   Gonza sakė

    Ar galėtumėte paskelbti, kaip įterpti įvykius? kokio tipo duomenys yra pradžios ir pabaigos laukuose? laiko žymė? liko „0“, turiu įterpti ir galėti redaguoti įvykius. Dėkoju

  7.   Ketvirtadienis sakė

    SUKURKITE DUOMENŲ BAZAS, JEI NEBUVA `bootstrap_calendar` / *! 40100 Numatytasis simbolių rinkinys utf8 COLLATE utf8_spanish_ci * /;
    NAUDOTI `bootstrap_calendar`;
    - „MySQL“ sąvartynas 10.13, paskirstymas 5.6.13, „Win32“ (x86)
    -
    - Priimančioji: 127.0.0.1 Duomenų bazė: bootstrap_calendar
    - ——————————————————
    - Serverio versija 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 NUSTATYTI PAVADINIMUS utf8 * /;
    / *! 40103 SET @OLD_TIME_ZONE = @@ TIME_ZONE * /;
    / *! 40103 NUSTATYTI 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 * /;

    -
    - Stalo struktūra „įvykiams“
    -

    LAISYTI LENTEL IF, JEI YRA „įvykių“;
    / *! 40101 SET @saved_cs_client = @@ character_set_client * /;
    / *! 40101 NUSTATYK simbolių rinkinio_klientas = utf8 * /;
    KURTI LENTELLE `renginiai` (
    `id` int (10) nepasirašytas NE NULL AUTO_INCREMENT,
    `title` varchar (150) COLLATE utf8_spanish_ci Numatytasis NULL,
    „body“ text 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 'informacija',
    `start` varchar (15) COLLATE utf8_spanish_ci NOT NULL,
    `end` varchar (15) COLLATE utf8_spanish_ci NE NULL,
    PAGRINDINIS RAKTAS („id“)
    ) VARIKLIS = „InnoDB“ Numatytasis rinkinys = utf8 COLLATE = utf8_spanish_ci;
    / *! 40101 NUSTATYK simbolių rinkinio_klientą = @ išsaugotą_klieną * /;

    -
    - Deklaruoti lentelės „įvykių“ duomenys
    -

    UŽRAKINIMO LENTELĖS `renginiai` RAŠYTI;
    / *! 40000 ALTER LENTELĖ `įvykiai` NEGALIMI RAKTAI * /;
    / *! 40000 ALTER TABLE `įvykiai` ĮJUNGTI RAKTUS * /;
    ATRAKINTI LENTELES;
    / *! 40103 NUSTATYTI TIME_ZONE = @ OLD_TIME_ZONE * /;

    / *! 40101 NUSTATYTI SQL_MODE = @ OLD_SQL_MODE * /;
    / *! 40014 SET FOREIGN_KEY_CHECKS = @ OLD_FOREIGN_KEY_CHECKS * /;
    / *! 40014 NUSTATYKITE UNIKALIUS_CHECKUS = @ OLD_UNIQUE_CHECKUS * /;
    / *! 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 NUSTATYTI SQL_NOTES = @ OLD_SQL_NOTES * /;

    - Sąvartynas baigtas 2014-05-31 14:38:23

  8.   juan77 sakė

    sveiki migos ar yra koks nors būdas pakeisti JSON datos formatą

  9.   giselabra sakė

    Kalendorius yra labai geras, tik pridedant naują įvykį data, kuri užtrunka pagal numatytuosius nustatymus tiek pradžioje, tiek pabaigoje, yra angliška, kaip jį pakeisti į ispanų? Tai būtų DD / MM / YYYY. Labai ačiū ir linkėjimai

  10.   Fabianietis sakė

    Sveiki, kalendorius yra labai geras, bet atnaujinant datą jis ne iš karto atsispindi kalendoriuje. Ką aš galiu padaryti ?

    Taip pat turiu dar vieną problemą, kaip padaryti, kad mėnesio rodinyje būtų rodomi visi taškai, ar galima padidinti kvadratą? kas atitinka dieną?

  11.   alex sakė

    Turiu problemą, kad vietoje įkeliant pavyzdį jis veikia puikiai, bet kai įkeliu jį į internetinį serverį, iš kalendoriaus man nieko nerodo tik mygtukai. Bet kokia idėja, kas gali būti, ar kas yra blogai, kai serveris ją taiso