Bootstrap dagatal með JQuery

bootstrap-dagatal Við erum í auknum mæli hrifin af gríðarlegu samfélagi sem snýst um Bootstrap, þekktur CSS rammi , búin til af Twitter. Að þessu sinni kynni ég þér Bootstrap-dagatal forritað með Javascript og JQuery, Ég mun einnig útskýra ítarlega hluta af starfsemi dagatalsins og ég mun bæta við nokkrum brögðum og endurbótum sem þú getur gert.

Þetta Bootstrap dagatal hefur hreina hönnun og er algerlega móttækilegur, það mun líta vel út úr öllum tækjum! Það felur einnig í sér a þýðing á meira en 7 tungumál og allt hátíðardagsetningar hvers lands eru dregnar fram og tekið fram. Lúxus!

Rekstur þessa Bootstrap Calendar er nokkuð flókinn, hann dregur út dagsetningar notandans úr JSON skrá upphaflega, en eingöngu fyrir Creativos Online notendur mun ég útskýra hvernig draga atburði úr MYSQL gagnagrunni fyrir fullkomna útfærslu þess í hvaða kerfi sem er.

Þekkt gagnagrunnskerfi

Þekkt gagnagrunnskerfi

Aðgerðir helstu skrár forritsins:

INDEX.HTML

  • Bootstrap 2.3.2 ferming
  • Dagbókarhönnun
  • Listi yfir viðburði
  • Vafrað um dagatalið
  • Mismunandi dagatalssýn (dagur / vika / mánuður / ár)
  • Hleður forritinu í JS
  • Tungumálaval

INDEX-BS3.HTML

  • Bootstrap 3.0 ferming
  • Dagbókarhönnun
  • Viðburðalisti
  • Vafrað um dagatalið
  • Mismunandi dagatalssýn (dagur / vika / mánuður / ár)
  • Hleður forritinu í JS
  • Tungumálaval

EVENTS.JSON.PHP

  • Listi yfir atburði með eftirfarandi gögnum:
    • auðkenni: auðkenni atburðar
    • titill: titill atburðar
    • url: viðburðarslóð
    • bekkur: gerð atburðar (upplýsingar | viðvörun | ...) fyrir síðari liti.
    • byrjun: upphafsdagsetning
    • enda: uppsagnardagur

APP.JS

  • Breytur sem geyma stillingar forritsins.
  • Auka JQuery virka

Dagatal.JS

  • Helstu stillingar forrita
  • Helstu aðgerðir dagatalsins
  • Útdráttur og meðferð viðburða
  • Hátíðardagsetningar
  • Tungumál Hleðsla
  • Hleður viðburðalistanum
  • Hleður inn mismunandi dagbókarskoðanir (Dagur / Vika / Mánuður / Ár)

Dagatal.CSS

  • Dagatalstílar
  • Stílar viðburðalista
  • Dagatalstílar fyrir önnur tæki

Dragðu atburði úr gagnagrunni

Til að draga atburðina úr MYSQL gagnagrunni við munum skipta um línur skráarinnar events.json.php eftir:

<?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 dagatal

Sækja | Bootstrap Calendar

Nánari upplýsingar | Bootstrap: CSS Framework


Innihald greinarinnar fylgir meginreglum okkar um siðareglur ritstjórnar. Til að tilkynna um villu smelltu hér.

14 athugasemdir, láttu þitt eftir

Skildu eftir athugasemd þína

Netfangið þitt verður ekki birt. Nauðsynlegir reitir eru merktir með *

*

*

  1. Ábyrgðarmaður gagna: Miguel Ángel Gatón
  2. Tilgangur gagnanna: Control SPAM, umsögn stjórnun.
  3. Lögmæti: Samþykki þitt
  4. Samskipti gagna: Gögnunum verður ekki miðlað til þriðja aðila nema með lagalegri skyldu.
  5. Gagnageymsla: Gagnagrunnur sem Occentus Networks (ESB) hýsir
  6. Réttindi: Hvenær sem er getur þú takmarkað, endurheimt og eytt upplýsingum þínum.

  1.   Davíð Z sagði

    þegar ég athuga kóðann Sergio

    1.    Sergio Ródenas sagði

      Kóðinn er þegar merktur! Það eina, þú verður að búa til töfluna «atburði» í gagnagrunninum þínum með eftirfarandi reitum: {id | heimili | enda | nafn | bekkur | url} og stilltu aðgang að gagnagrunninum þínum!

      1.    rós sagði

        Ég hef breytt þessum breytum fyrir aðra og það hefur gert mér kleift að bæta viðburðinum í gagnagrunninn minn, en ég sé það ekki endurspeglast í dagatalinu. Og hvernig gat ég endurheimt gögn atburðanna eftir því á hvaða degi ég smellti á dagatalið?

  2.   José Luis Zamudio (@JoseZami) sagði

    Til að búa til og framkvæma gerð atburða, þá verður þú að búa til gagnagrunn, en það sem er málið er að ég get bætt viðburðum við það og sjálfgefið er tungumálið spænskt því það er sjálfgefið skilgreint sem enska

    1.    Sergio Ródenas sagði

      Til að stilla tungumálið yfir í spænsku er best að skipta út núverandi strengjum í spænsku tungumálaskránni fyrir þá sem eru á ensku í Calendar.js skránni. Hins vegar eru aðrar snyrtilegri aðferðir, þú getur fundið þær á aðalvefhandriti handritsins eða í Github samfélaginu sem fylgir þessari færslu.
      Einnig mun ég reyna að hlaða inn nýrri færslu á nokkrum vikum þar sem ég mun útskýra hvernig á að búa til innsetningu atburða í gagnagrunninn.

  3.   José Luis Zamudio (@JoseZami) sagði

    Takk kærlega, ég mun þakka færsluna til að setja inn viðburði :)

  4.   Jair sagði

    halló ég er í vandræðum þegar ég laga allt til að tengja og draga gögnin mín úr gagnagrunninum það sýnir mér enga atburði

  5.   Diego sagði

    setur ekki atburð í gagnagrunninn

  6.   Gonza sagði

    Gætirðu sent hvernig þú setur inn viðburði? í upphafs- og lokasviðum hvers konar gögn eru það? tímastimpill? „0“ eftir, þarf ég að setja inn og geta breytt atburðunum. Takk fyrir

  7.   Fim sagði

    BÚA TIL Gagnasafns ef EKKI er til „bootstrap_calendar“ / *! 40100 STANDASTI EIGINLEIKASETT utf8 SOLLA utf8_spanish_ci * /;
    NOTAÐ „bootstrap_calendar“;
    - MySQL dump 10.13 Distrib 5.6.13, fyrir Win32 (x86)
    -
    - Gestgjafi: 127.0.0.1 Gagnagrunnur: bootstrap_calendar
    - ———————————————————
    - Netþjónaútgáfa 5.5.27

    / *! 40101 SETJA @OLD_CHARACTER_SET_CLIENT = @@ CHARACTER_SET_CLIENT * /;
    / *! 40101 SETJA @OLD_CHARACTER_SET_RESULTS = @@ CHARACTER_SET_RESULTS * /;
    / *! 40101 SET @OLD_COLLATION_CONNECTION = @@ COLLATION_CONNECTION * /;
    / *! 40101 SETNEFNI utf8 * /;
    / *! 40103 SET @OLD_TIME_ZONE = @@ TIME_ZONE * /;
    / *! 40103 SET TIME_ZONE = '+ 00:00 ′ * /;
    / *! 40014 SETJA @OLD_UNIQUE_CHECKS = @@ UNIQUE_CHECKS, UNIQUE_CHECKS = 0 * /;
    / *! 40014 SETJA @OLD_FOREIGN_KEY_CHECKS = @@ FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS = 0 * /;
    / *! 40101 SETJA @OLD_SQL_MODE = @@ SQL_MODE, SQL_MODE = 'NO_AUTO_VALUE_ON_ZERO' * /;
    / *! 40111 SETJA @OLD_SQL_NOTES = @@ SQL_NOTES, SQL_NOTES = 0 * /;

    -
    - Uppbygging borðs fyrir borðatburði
    -

    DROPT Töflu ef til er „atburðir“;
    / *! 40101 SETJA @saved_cs_client = @@ character_set_client * /;
    / *! 40101 SETT character_set_client = utf8 * /;
    BÚA TÖFLU „atburði“ (
    `id` int (10) óundirritað EKKI NULL AUTO_INCREMENT,
    „title“ varchar (150) SOLLA utf8_spanish_ci STANDARNEMI NÚLL,
    texti „body“ COLLATE utf8_spanish_ci EKKI NULL,
    `url` varchar (150) SOLLA utf8_spanish_ci EKKI NULL,
    'class' varchar (45) COLLATE utf8_spanish_ci EKKI NULL STANDARD 'upplýsingar',
    `start` varchar (15) SOLLA utf8_spanish_ci EKKI NULL,
    'end' varchar (15) SOLLA utf8_spanish_ci EKKI NULL,
    PRIMARY KEY („id“)
    ) VÉL = InnoDB STANDASTI CHARSET = utf8 COLLATE = utf8_spanish_ci;
    / *! 40101 SET character_set_client = @saved_cs_client * /;

    -
    - Úrgangsgögn fyrir „atburði“ í töflu
    -

    LÁSTÖFLUR `viðburðir` SKRIFA;
    / *! 40000 ALTER TABLE `atburðir` DISABLE LYKLAR * /;
    / *! 40000 ALTER TABLE `atburðir` KEMA LYKLAR * /;
    OPNA TÖFLUR;
    / *! 40103 SET TIME_ZONE = @ OLD_TIME_ZONE * /;

    / *! 40101 SETJA SQL_MODE = @ OLD_SQL_MODE * /;
    / *! 40014 SET FOREIGN_KEY_CHECKS = @ OLD_FOREIGN_KEY_CHECKS * /;
    / *! 40014 SETJA UNIQUE_CHECKS = @ OLD_UNIQUE_CHECKS * /;
    / *! 40101 SETT CHARACTER_SET_CLIENT = @ OLD_CHARACTER_SET_CLIENT * /;
    / *! 40101 SETJA CHARACTER_SET_RESULTS = @ OLD_CHARACTER_SET_RESULTS * /;
    / *! 40101 SET COLLATION_CONNECTION = @ OLD_COLLATION_CONNECTION * /;
    / *! 40111 SETJU SQL_NOTES = @ OLD_SQL_NOTES * /;

    - Úrgangi lokið 2014-05-31 14:38:23

  8.   juan77 sagði

    halló migos er einhver leið til að breyta dagsetningarsniði JSON

  9.   giselabra sagði

    Dagatalið er mjög gott, aðeins þegar nýjum viðburði er bætt við er dagsetningin sem hún tekur sjálfgefið bæði í byrjun og á endanum á ensku sniði, hvernig breyti ég því í spænsku? Það væri DD / MM / ÁÁÁÁ. Kærar þakkir og kveðjur

  10.   Fabian sagði

    Halló, dagatalið er mjög gott en þegar dagsetning er uppfærð kemur það ekki fram strax í dagatalinu. Hvað get ég gert ?

    Ég er líka með annað vandamál, hvernig get ég látið alla punktana birtast í mánaðarskjánum, er mögulegt að stækka torgið? hvað samsvarar degi?

  11.   Alex sagði

    Ég er með vandamálið að á staðnum þegar dæmið er hlaðið virkar það fullkomlega en þegar ég set það inn á netþjón þá sýnir það mér ekki neitt úr dagatalinu aðeins hnappana. Einhverjar hugmyndir um hvað kann að vera eða hvað er athugavert við netþjóninn til að laga það takk.