Kalendari bootstrap me JQuery

Sergio Ródenas

Minuta 2

kalendari bootstrap

Ne jemi gjithnjë e më të impresionuar nga komuniteti i pamasë që rrotullohet Bootstrap, një kornizë e njohur CSS , krijuar nga Twitter. Këtë herë ju prezantoj një kalendar të bazuar në Bootstrap programuar me Javascript dhe JQuery, Unë gjithashtu do të shpjegoj në detaje një pjesë të funksionimit të kalendarit dhe do të shtoj disa truke dhe përmirësime që mund të bëni.

Ky kalendar Bootstrap ka një dizajn të pastër dhe është tërësisht responsiv, do të duket mirë nga të gjitha pajisjet! Ai gjithashtu përfshin një përkthim në më shumë se 7 gjuhë dhe të gjitha datat festive të secilit vend janë theksuar dhe shënuar. Një luks!

Funksionimi i këtij Kalendari Bootstrap është disi kompleks, ai nxjerr fillimisht datat e përdoruesit nga një skedar JSON, por, ekskluzivisht për përdoruesit e Creativos Online, unë do të shpjegoj se si nxjerrni ngjarjet nga një bazë e të dhënave MYSQL për implementimin perfekt të tij në çdo sistem.

Sistemi i njohur i bazës së të dhënave

Sistemi i njohur i bazës së të dhënave

Funksionet e skedarëve kryesorë të aplikacionit:

INDEX.HTML

  • Bootstrap 2.3.2 po ngarkohet
  • Hartimi i kalendarit
  • Lista e ngjarjeve
  • Lundrimi në Kalendar
  • Pamje të ndryshme të kalendarit (dita / java / muaji / viti)
  • Duke ngarkuar aplikacionin në JS
  • Përzgjedhja e gjuhës

INDEX-BS3.HTML

  • Bootstrap 3.0 po ngarkohet
  • Hartimi i kalendarit
  • Lista e ngjarjeve
  • Lundrimi në Kalendar
  • Pamje të ndryshme të kalendarit (Dita / Java / Muaji / Viti)
  • Duke ngarkuar aplikacionin në JS
  • Përzgjedhja e gjuhës

NGJARJE.JSON.PHP

  • Lista e Ngjarjeve me të dhënat e mëposhtme:
    • ID: identifikuesi i ngjarjes
    • Titulli: titulli i ngjarjes
    • url: url e ngjarjes
    • klasa: lloji i ngjarjes (informacion | paralajmërim |…) për ngjyrat pasuese.
    • filloni: data e fillimit
    • fundi: data e përfundimit

APP.JS

  • Variablat që ruajnë konfigurimin e aplikacionit.
  • Funksione shtesë JQuery

KALENDARI.JS

  • Cilësimet kryesore të aplikacionit
  • Funksionet kryesore të Kalendarit
  • Nxjerrja dhe trajtimi i ngjarjeve
  • Datat festive
  • Gjuha po ngarkohet
  • Duke ngarkuar listën e Ngjarjeve
  • Duke ngarkuar pamjet e ndryshme të Kalendarit (Dita / Java / Muaji / Viti)

KALENDAR.CSS

  • Stilet e kalendarit
  • Stilet e listës së ngjarjeve
  • Stilet e kalendarit për pajisjet e tjera

Nxirrni ngjarje nga një bazë të dhënash

Për të nxjerrë ngjarjet nga një bazë të dhënash MYSQL ne do të zëvendësojmë linjat e skedarit ngjarjet.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));

?>

github | Kalendari i bootstrap

Shkarkoni | Kalendari i bootstrap

Mëso më shumë | Bootstrap: Kuadri CSS