Bootstrap kalendář s JQuery

bootstrap-kalendář Stále více na nás dělá dojem ohromná komunita, která se točí kolem Bootstrap, známý rámec CSS , vytvořený Twitterem. Tentokrát vám představuji kalendář založený na Bootstrapu programováno pomocí Javascript a JQuery, Také podrobně vysvětlím část fungování kalendáře a přidám několik triků a vylepšení, které můžete udělat.

Tento kalendář Bootstrap má čistý design a je naprosto citlivý, bude to vypadat dobře ze všech zařízení! Zahrnuje také a překlad do více než 7 jazyků a všechno sváteční data každé země jsou zvýrazněna a zaznamenána. Luxusní!

Provoz tohoto Bootstrap kalendáře je poněkud složitý, zpočátku extrahuje data uživatele ze souboru JSON, ale výhradně pro uživatele Creativos Online vysvětlím, jak extrahovat události z databáze MYSQL pro jeho dokonalou implementaci v jakémkoli systému.

Známý databázový systém

Známý databázový systém

Funkce hlavních souborů aplikace:

INDEX.HTML

  • Načítání Bootstrap 2.3.2
  • Návrh kalendáře
  • Seznam událostí
  • Procházení kalendáře
  • Různá zobrazení kalendáře (den / týden / měsíc / rok)
  • Načítání aplikace v JS
  • Výběr jazyka

INDEX-BS3.HTML

  • Načítání Bootstrap 3.0
  • Návrh kalendáře
  • Seznam událostí
  • Procházení kalendáře
  • Různá zobrazení kalendáře (den / týden / měsíc / rok)
  • Načítání aplikace v JS
  • Výběr jazyka

AKCE.JSON.PHP

  • Seznam akcí s následujícími údaji:
    • id: identifikátor události
    • Název: název události
    • url: adresa URL události
    • třída: typ události (informace | varování |…) pro následující barvy.
    • Start: datum zahájení
    • konec: datum ukončení

APP.JS

  • Proměnné, které ukládají konfiguraci aplikace.
  • Extra funkce JQuery

KALENDÁŘ.JS

  • Hlavní nastavení aplikace
  • Hlavní funkce kalendáře
  • Extrakce a zpracování událostí
  • Slavnostní data
  • Načítání jazyků
  • Načítání seznamu událostí
  • Načítání různých zobrazení kalendáře (den / týden / měsíc / rok)

KALENDÁŘ.CSS

  • Styly kalendáře
  • Styly seznamu událostí
  • Styly kalendáře pro jiná zařízení

Extrahujte události z databáze

Extrahovat události z databáze MYSQL nahradíme řádky souboru events.json.php od:

<?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 kalendář

Stáhnout | Bootstrap kalendář

Více informací | Bootstrap: CSS Framework


Obsah článku se řídí našimi zásadami redakční etika. Chcete-li nahlásit chybu, klikněte zde.

14 komentářů, nechte svůj

Zanechte svůj komentář

Vaše e-mailová adresa nebude zveřejněna. Povinné položky jsou označeny *

*

*

  1. Odpovědný za údaje: Miguel Ángel Gatón
  2. Účel údajů: Ovládací SPAM, správa komentářů.
  3. Legitimace: Váš souhlas
  4. Sdělování údajů: Údaje nebudou sděleny třetím osobám, s výjimkou zákonných povinností.
  5. Úložiště dat: Databáze hostovaná společností Occentus Networks (EU)
  6. Práva: Vaše údaje můžete kdykoli omezit, obnovit a odstranit.

  1.   David Z. řekl

    jak jsem zkontroloval kód Sergio

    1.    Sergio Ródenas řekl

      Kód je již zkontrolován! Jediné, co musíte udělat, je vytvořit tabulku «události» ve vaší databázi s následujícími poli: {id | domů | konec | jméno | třída | url} a nakonfigurujte přístup do své databáze!

      1.    ros řekl

        Změnil jsem tyto proměnné pro ostatní a umožnilo mi to přidat událost do mé databáze, ale nevidím to v kalendáři. A jak mohu obnovit data událostí v závislosti na dni, kdy kliknu na kalendář?

  2.   jose luis zamudio (@JoseZami) řekl

    Chcete-li dělat a provádět vytváření událostí, musí být vytvořena databáze, ale o čem to je, že k tomu mohu připojit události a jako výchozí je jazyk španělština, protože je ve výchozím nastavení definována jako angličtina

    1.    Sergio Ródenas řekl

      Chcete-li přednastavit jazyk na španělštinu, je nejlepší nahradit stávající řetězce v souboru španělského jazyka řetězci v angličtině v souboru calendar.js. Existují však i jiné úhlednější metody, které najdete na hlavním webu skriptu nebo v komunitě Github, připojené k tomuto příspěvku.
      Také se pokusím za pár týdnů nahrát nový příspěvek, kde vysvětlím, jak vytvořit vložení událostí do databáze.

  3.   jose luis zamudio (@JoseZami) řekl

    Děkuji moc, oceníme příspěvek k vložení událostí :)

  4.   jair řekl

    ahoj Mám problém, když opravím vše, abych se připojil a extrahoval svá data z databáze, nezobrazuje mi žádné události

  5.   diego řekl

    nevloží událost do databáze

  6.   Gonza řekl

    Mohl byste zveřejnit, jak vkládat události? v počátečním a koncovém poli, o jaké údaje se jedná? časové razítko? zbývá „0“, musím vložit a umět upravovat události. dík

  7.   Čtvrtek řekl

    VYTVOŘIT DATABÁZE, POKUD NEJDE
    USE `bootstrap_calendar`;
    - MySQL dump 10.13 Distrib 5.6.13, pro Win32 (x86)
    -
    - Hostitel: 127.0.0.1 Databáze: bootstrap_calendar
    - ———————————————————
    - Verze serveru 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 NASTAVENÍ NÁZVŮ 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 * /;

    -
    - Struktura tabulky pro „události“ tabulky
    -

    DROP TABLE, POKUD EXISTUJE "události";
    / *! 40101 SET @saved_cs_client = @@ character_set_client * /;
    / *! 40101 SET character_set_client = utf8 * /;
    VYTVOŘIT TABULKU `události` (
    `id` int (10) unsigned NOT NULL AUTO_INCREMENT,
    `title` varchar (150) COLLATE utf8_spanish_ci DEFAULT NULL,
    text `body` 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 'informace',
    `start` varchar (15) COLLATE utf8_spanish_ci NOT NULL,
    `end` varchar (15) COLLATE utf8_spanish_ci NOT NULL,
    PRIMÁRNÍ KLÍČ (`id`)
    ) ENGINE = InnoDB DEFAULT CHARSET = utf8 COLLATE = utf8_spanish_ci;
    / *! 40101 SET character_set_client = @saved_cs_client * /;

    -
    - Dumpingová data pro tabulkové `události`
    -

    ZÁMEK TABULKY `události` NAPISUJTE;
    / *! 40000 ALTER TABLE `events` DISABLE KEYS * /;
    / *! 40000 ALTER TABLE `events` POVOLIT KLÁVESY * /;
    ODEMKNUTÍ STOLŮ;
    / *! 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 * /;

    - Výpis dokončen 2014-05-31 14:38:23

  8.   juan77 řekl

    ahoj migos, existuje nějaký způsob, jak změnit formát data JSON

  9.   giselabra řekl

    Kalendář je velmi dobrý, pouze když přidám novou událost, je datum, které je standardně nastaveno na začátku i na konci, v anglickém formátu, jak jej změním na španělštinu? Bylo by to DD / MM / RRRR. Děkuji moc a pozdravy

  10.   Fabian řekl

    Dobrý den, kalendář je velmi dobrý, ale při aktualizaci data se v kalendáři neprojeví okamžitě. Co mohu udělat ?

    Mám také další problém, jak mohu zobrazit všechny body v měsíčním zobrazení, je možné zvětšit čtverec? co odpovídá dni?

  11.   Alex řekl

    Mám problém, že lokálně při načítání příkladu to funguje perfektně, ale když ho nahraji na online server, neukáže mi to nic z kalendáře, pouze tlačítka. Nějaký nápad, co může být nebo co je se serverem špatně opravit, prosím.