Bootstrap-kalender med JQuery

bootstrap-kalender Vi blir alltmer imponerade av det enorma samhället som kretsar kring Bootstrap, ett välkänt CSS-ramverk , skapad av Twitter. Den här gången presenterar jag en Bootstrap-baserad kalender programmerad med Javascript och JQuery, Jag kommer också att förklara i detalj en del av kalenderns funktion och jag kommer att lägga till några knep och förbättringar som du kan göra.

Denna Bootstrap-kalender har en ren design och är helt mottaglig, det kommer att se bra ut från alla enheter! Den innehåller också en översättning till mer än sju språk och alla de festliga datumen i varje land markeras och noteras. En lyx!

Driften av den här Bootstrap-kalendern är något komplicerad, den extraherar användarens datum från en JSON-fil från början, men exklusivt för Creativos Online-användare kommer jag att förklara hur extrahera händelserna från en MYSQL-databas för dess perfekta implementering i alla system.

Välkänt databassystem

Välkänt databassystem

Funktioner för programmets huvudfiler:

INDEX.HTML

  • Bootstrap 2.3.2 laddas
  • Kalenderdesign
  • Lista över händelser
  • Navigera i kalendern
  • Olika kalendervyer (dag / vecka / månad / år)
  • Laddar applikationen i JS
  • Språkval

INDEX-BS3.HTML

  • Bootstrap 3.0 laddas
  • Kalenderdesign
  • Händelselista
  • Navigera i kalendern
  • Olika kalendervyer (dag / vecka / månad / år)
  • Laddar applikationen i JS
  • Språkval

EVENTS.JSON.PHP

  • Lista över händelser med följande data:
    • id: händelseidentifierare
    • Titel: händelsens titel
    • url: url för evenemanget
    • klass: händelsetyp (info | varning |…) för efterföljande färger.
    • Start: startdatum
    • slutet: slutdatum

APP.JS

  • Variabler som lagrar applikationskonfigurationen.
  • Extra JQuery-funktioner

KALENDER.JS

  • Huvudapplikationsinställningar
  • Huvudfunktionerna i kalendern
  • Extraktion och behandling av händelser
  • Festliga datum
  • Språk laddas
  • Laddar händelselistan
  • Laddar olika kalendervyer (dag / vecka / månad / år)

KALENDER.CSS

  • Kalenderstilar
  • Händelselistan stilar
  • Kalenderformat för andra enheter

Extrahera händelser från en databas

För att extrahera händelserna från en MYSQL-databas vi kommer att ersätta filens rader events.json.php med:

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

Ladda ner | Bootstrap-kalender

Mer information | Bootstrap: CSS Framework


Innehållet i artikeln följer våra principer om redaktionell etik. Klicka på för att rapportera ett fel här.

14 kommentarer, lämna din

Lämna din kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade med *

*

*

  1. Ansvarig för uppgifterna: Miguel Ángel Gatón
  2. Syftet med uppgifterna: Kontrollera skräppost, kommentarhantering.
  3. Legitimering: Ditt samtycke
  4. Kommunikation av uppgifterna: Uppgifterna kommer inte att kommuniceras till tredje part förutom enligt laglig skyldighet.
  5. Datalagring: databas värd för Occentus Networks (EU)
  6. Rättigheter: När som helst kan du begränsa, återställa och radera din information.

  1.   David Z sade

    när jag kollar koden Sergio

    1.    Sergio Ródenas sade

      Koden är redan kontrollerad! Det enda, du måste skapa tabellen «händelser» i din databas med följande fält: {id | hem | slut | namn | klass | url} och konfigurera åtkomst till din databas!

      1.    gnawed sade

        Jag har ändrat dessa variabler för andra, och det har gjort det möjligt för mig att lägga till händelsen i min databas, men jag ser det inte återspeglas i kalendern. Och hur kunde jag återställa händelsedata beroende på dagen jag klickade på kalendern?

  2.   Jose Luis Zamudio (@JoseZami) sade

    För att göra och utföra skapandet av händelser måste en databas skapas, men det handlar om att jag kan lägga till händelser till den och som standard är språket spanska eftersom det definieras som engelska som standard

    1.    Sergio Ródenas sade

      För att standardinställa språket till spanska är det bäst att ersätta de befintliga strängarna i den spanska språket med de på engelska i kalendern.js-filen. Det finns dock andra snyggare metoder, du hittar dem på manusens huvudwebbplats eller i Github-communityn, bifogad till det här inlägget.
      Jag kommer också att försöka ladda upp ett nytt inlägg om några veckor där jag kommer att förklara hur man skapar infogning av händelser i databasen.

  3.   Jose Luis Zamudio (@JoseZami) sade

    Tack så mycket, jag kommer att uppskatta inlägget för att infoga händelser :)

  4.   jair sade

    hej jag har ett problem när jag fixar allt för att ansluta och extrahera mina data från databasen det visar mig inga händelser

  5.   diego sade

    infogar inte händelse i databasen

  6.   Gonza sade

    Kan du lägga upp hur du infogar händelser? i start- och slutfälten vilken typ av data är det? tidsstämpel? det finns "0" kvar, jag måste infoga och kunna redigera händelserna. Tack

  7.   Tors sade

    SKAPA DATABAS OM INTE EXISTERAR 'bootstrap_calendar' / *! 40100 STANDARDKARAKTERINSTÄLLNING utf8 COLLATE utf8_spanish_ci * /;
    ANVÄND `bootstrap_calendar`;
    - MySQL dump 10.13 Distrib 5.6.13, för Win32 (x86)
    -
    - Värd: 127.0.0.1 Databas: bootstrap_calendar
    - ———————————————————
    - Serverversion 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 SET NAMN 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 * /;

    -
    - Tabellstruktur för tabellhändelser
    -

    DROP TABELL OM HÄNVISAR "händelser";
    / *! 40101 SET @saved_cs_client = @@ character_set_client * /;
    / *! 40101 SET character_set_client = utf8 * /;
    SKAPA TABELL `händelser` (
    `id` int (10) osignerad INTE NULL AUTO_INCREMENT,
    `title` varchar (150) COLLATE utf8_spanish_ci STANDARD NULL,
    "body" text COLLATE utf8_spanish_ci INTE NULL,
    `url` varchar (150) COLLATE utf8_spanish_ci INTE NULL,
    `class` varchar (45) COLLATE utf8_spanish_ci INTE NULL STANDARD 'info',
    `start` varchar (15) COLLATE utf8_spanish_ci INTE NULL,
    `end` varchar (15) COLLATE utf8_spanish_ci INTE NULL,
    PRIMÄR NYCKEL ("id")
    ) MOTOR = InnoDB STANDARD CHARSET = utf8 COLLATE = utf8_spanish_ci;
    / *! 40101 SET character_set_client = @saved_cs_client * /;

    -
    - Dumpningsdata för tabellhändelser
    -

    LÅSTABELLER `händelser` SKRIV;
    / *! 40000 ALTER TABLE `händelser` INAKTIVERA TANGENTER * /;
    / *! 40000 ALTER TABLE `händelser` AKTIVERA TANGENTER * /;
    Lås upp tabeller;
    / *! 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 * /;

    - Dump slutförd 2014-05-31 14:38:23

  8.   juan77 sade

    hej migos finns det något sätt att ändra JSON-datumformat

  9.   giselabra sade

    Kalendern är väldigt bra, bara när du lägger till en ny händelse är det datum som det tar som standard både i början och i slutändan i engelska format, hur ändrar jag det till spanska? Det skulle vara DD / MM / ÅÅÅÅ. Tack så mycket och hälsningar

  10.   Fabian sade

    Hej, kalendern är väldigt bra, men när du uppdaterar ett datum återspeglas den inte omedelbart i kalendern. Vad jag kan göra ?

    Jag har också ett annat problem, hur kan jag göra att alla punkter visas i månadsvisningen, är det möjligt att förstora torget? vad motsvarar en dag?

  11.   Alex sade

    Jag har problemet att lokalt när jag laddar exemplet fungerar det perfekt men när jag laddar upp det till en online-server visar det mig inget från kalendern, bara knapparna. Någon aning om vad som kan vara eller vad som är fel med servern för att fixa det tack.