Bootstrap-kalender med JQuery

Sergio Ródenas

2 minutter

bootstrap-kalender

Vi bliver mere og mere imponeret over det enorme samfund, der drejer sig om Bootstrap, en velkendt CSS-ramme , oprettet af Twitter. Denne gang præsenterer jeg dig en Bootstrap-baseret kalender programmeret med Javascript og JQuery, Jeg vil også forklare i detaljer en del af kalenderdriften, og jeg vil tilføje nogle tricks og forbedringer, som du kan gøre.

Denne Bootstrap-kalender har et rent design og er helt lydhør, det ser godt ud fra alle enheder! Det indeholder også en oversættelse til mere end 7 sprog og alt de festlige datoer i hvert land fremhæves og bemærkes. En luksus!

Betjeningen af ​​denne Bootstrap-kalender er noget kompleks, den udtrækker brugerens datoer fra en JSON-fil i starten, men udelukkende for Creativos Online-brugere vil jeg forklare, hvordan udpak begivenhederne fra en MYSQL-database for dens perfekte implementering i ethvert system.

Kendt databasesystem

Kendt databasesystem

Funktioner til applikationens hovedfiler:

INDEX.HTML

  • Bootstrap 2.3.2 indlæses
  • Kalender Design
  • Liste over begivenheder
  • Navigering i kalenderen
  • Forskellige kalendervisninger (dag / uge / måned / år)
  • Indlæser applikationen i JS
  • Valg af sprog

INDEX-BS3.HTML

  • Bootstrap 3.0 indlæses
  • Kalender Design
  • Begivenhedsliste
  • Navigering i kalenderen
  • Forskellige kalendervisninger (dag / uge / måned / år)
  • Indlæser applikationen i JS
  • Valg af sprog

BEGIVENHEDER.JSON.PHP

  • Liste over begivenheder med følgende data:
    • id: hændelsesidentifikator
    • titel: begivenhedens titel
    • url: begivenheds url
    • klasse: begivenhedstype (info | advarsel |…) for efterfølgende farver.
    • Start: startdato
    • ende: opsigelsesdato

APP.JS

  • Variabler, der gemmer applikationskonfigurationen.
  • Ekstra JQuery-funktioner

KALENDER.JS

  • Hovedapplikationsindstillinger
  • Hovedfunktionerne i kalenderen
  • Ekstraktion og behandling af begivenheder
  • Festlige datoer
  • Sprog indlæses
  • Indlæser begivenhedslisten
  • Indlæser de forskellige kalendervisninger (dag / uge / måned / år)

KALENDER.CSS

  • Kalenderstilarter
  • Begivenhedsliste stilarter
  • Kalenderformater til andre enheder

Uddrag begivenheder fra en database

At udtrække begivenhederne fra en MYSQL-database vi erstatter linjerne i filen events.json.php ved:

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

Hent | Bootstrap-kalender

Flere oplysninger | Bootstrap: CSS Framework