Kalendarju Bootstrap b'JQuery

bootstrap-kalendarju Aħna dejjem aktar impressjonati mill-komunità immensa li ddur madwarha Bootstrap, qafas CSS magħruf , maħluqa minn Twitter. Din id-darba nippreżentalek kalendarju bbażat fuq Bootstrap ipprogrammat bil-Javascript u JQuery, Se nispjega wkoll fid-dettall parti mill-operat tal-kalendarju u se nżid xi tricks u titjib li tista 'tagħmel.

Dan il-kalendarju Bootstrap għandu disinn nadif u huwa totalment jirrispondu, se jidher tajjeb mill-apparati kollha! Tinkorpora wkoll traduzzjoni f'aktar minn 7 lingwi u kollox id-dati festivi ta 'kull pajjiż huma enfasizzati u nnotati. Lussu!

L-operazzjoni ta ’dan il-Kalendarju Bootstrap hija kemmxejn kumplessa, hija estratta d-dati ta’ l-utent minn fajl JSON inizjalment, iżda, esklussivament għal utenti ta ’Creativos Online, jiena nispjega kif estratt l-avvenimenti minn database MYSQL għall-implimentazzjoni perfetta tagħha fi kwalunkwe sistema.

Sistema ta 'Database Magħrufa

Sistema ta 'Database Magħrufa

Funzjonijiet tal-fajls ewlenin tal-applikazzjoni:

INDEX.HTML

  • Bootstrap 2.3.2 tagħbija
  • Disinn tal-Kalendarju
  • Lista ta 'Avvenimenti
  • Navigazzjoni fil-Kalendarju
  • Veduti differenti tal-Kalendarju (Jum / Ġimgħa / Xahar / Sena)
  • Tagħbija tal-applikazzjoni f'JS
  • Għażla tal-lingwa

INDIĊI-BS3.HTML

  • Bootstrap 3.0 tagħbija
  • Disinn tal-Kalendarju
  • Lista tal-avvenimenti
  • Navigazzjoni fil-Kalendarju
  • Veduti differenti tal-kalendarju (Jum / Ġimgħa / Xahar / Sena)
  • Tagħbija tal-applikazzjoni f'JS
  • Għażla tal-lingwa

EVENTI.JSON.PHP

  • Lista ta 'Avvenimenti bid-dejta li ġejja:
    • id: identifikatur tal-avveniment
    • titlu: titlu tal-avveniment
    • url: url tal-avveniment
    • klassi: tip ta 'avveniment (info | twissija | ...) għal kuluri sussegwenti.
    • ibda: data tal-bidu
    • tmiem: data tat-tmiem

APP.JS

  • Varjabbli li jaħżnu l-konfigurazzjoni tal-applikazzjoni.
  • Funzjonijiet JQuery Extra

CALENDAR.JS

  • Is-settings ewlenin tal-applikazzjoni
  • Funzjonijiet ewlenin tal-Kalendarju
  • Estrazzjoni u Trattament ta 'avvenimenti
  • Dati tal-festi
  • Tagħbija tal-Lingwa
  • Tagħbija tal-lista tal-Avvenimenti
  • Tagħbija tal-veduti tal-Kalendarju differenti (Jum / Ġimgħa / Xahar / Sena)

CALENDAR.CSS

  • Stili tal-Kalendarju
  • Stili tal-lista tal-avvenimenti
  • Stili tal-kalendarju għal apparati oħra

Oħroġ avvenimenti minn database

Biex tiġbed l-avvenimenti minn database MYSQL aħna nissostitwixxu l-linji tal-fajl events.json.php minn:

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

Niżżel | Kalendarju Bootstrap

Tgħallem aktar | Bootstrap: Qafas CSS


Il-kontenut tal-artikolu jaderixxi mal-prinċipji tagħna ta ' etika editorjali. Biex tirrapporta żball ikklikkja hawn.

14 kummenti, ħalli tiegħek

Ħalli l-kumment tiegħek

Your email address mhux se jkun ippubblikat. oqsma meħtieġa huma mmarkati bl *

*

*

  1. Responsabbli għad-dejta: Miguel Ángel Gatón
  2. Għan tad-dejta: Kontroll SPAM, ġestjoni tal-kummenti.
  3. Leġittimazzjoni: Il-kunsens tiegħek
  4. Komunikazzjoni tad-dejta: Id-dejta ma tiġix ikkomunikata lil partijiet terzi ħlief b'obbligu legali.
  5. Ħażna tad-dejta: Bażi tad-dejta ospitata minn Occentus Networks (UE)
  6. Drittijiet: Fi kwalunkwe ħin tista 'tillimita, tirkupra u tħassar l-informazzjoni tiegħek.

  1.   David Z qal

    kif niċċekkja l-kodiċi Sergio

    1.    Sergio Ródenas qal

      Il-kodiċi huwa diġà ċċekkjat! L-unika ħaġa, għandek toħloq it-tabella «avvenimenti» fid-database tiegħek bl-oqsma li ġejjin: {id | dar | tmiem | isem | klassi | url} u kkonfigurat l-aċċess għad-database tiegħek!

      1.    ros qal

        Biddilt dawk il-varjabbli għal oħrajn, u ppermettuli nżid l-avveniment mad-database tiegħi, imma ma narahx rifless fil-kalendarju. U kif nista 'nirkupra d-dejta tal-avvenimenti skont il-ġurnata li nikklikkja fuq il-kalendarju?

  2.   jose luis zamudio (@JoseZami) qal

    Biex tagħmel u twettaq il-ħolqien ta 'avvenimenti, allura trid tinħoloq database, imma x'inhu dwaru li nista' ndaħħal l-avvenimenti miegħu u bħala default il-lingwa hija l-Ispanjol għax hija definita bħala Ingliż awtomatikament

    1.    Sergio Ródenas qal

      Biex il-lingwa tkun default għall-Ispanjol, huwa aħjar li tissostitwixxi l-kordi eżistenti fil-fajl tal-lingwa Spanjola ma 'dawk bl-Ingliż fil-fajl calendar.js. Madankollu, hemm metodi oħra aħjar, tista 'ssibhom fuq il-websajt ewlenija tal-iskritt jew fil-komunità Github, mehmuża ma' din il-kariga.
      Ukoll, se nipprova ntella 'kariga ġdida fi ftit ġimgħat fejn nispjega kif toħloq l-inserzjoni ta' avvenimenti fid-database.

  3.   jose luis zamudio (@JoseZami) qal

    Grazzi ħafna, napprezza l-post biex niddaħħal avvenimenti :)

  4.   jair qal

    bonjour għandi problema meta nirranġa kollox biex nikkonnettja u neħħi d-dejta tiegħi mid-database ma jurini l-ebda avveniment

  5.   diego qal

    ma jdaħħalx l-avveniment fid-database

  6.   Gonza qal

    Tista 'tpoġġi kif ddaħħal l-avvenimenti? fl-oqsma tal-bidu u tat-tmiem liema tip ta 'dejta hi? timestamp? baqa '"0", għandi bżonn niddaħħal u nkun kapaċi neditja l-avvenimenti. Grazzi

  7.   Il-Ħam qal

    Oħloq DATABASE JEKK MA JEŻISTIX `bootstrap_calendar` / *! 40100 SET KARATTERISTIKU DEFAULT utf8 COLLATE utf8_spanish_ci * /;
    UŻA "bootstrap_calendar";
    - MySQL dump 10.13 Distrib 5.6.13, għal Win32 (x86)
    -
    - Ospitanti: 127.0.0.1 Database: bootstrap_calendar
    - ———————————————————
    - Verżjoni tas-server 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 ISMIJIET SET 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 * /;

    -
    - Struttura tal-mejda għal "avvenimenti" tal-mejda
    -

    TABELLA TAL-QATT JEKK EŻISTI "avvenimenti";
    / *! 40101 SET @saved_cs_client = @@ character_set_client * /;
    / *! 40101 SET character_set_client = utf8 * /;
    Oħloq TABELLA "avvenimenti" (
    "id" int (10) mhux iffirmat MHUX NULL AUTO_INCREMENT,
    `title` varchar (150) COLLATE utf8_spanish_ci DEFAULT NULL,
    test "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 'info',
    `start` varchar (15) COLLATE utf8_spanish_ci NOT NULL,
    `end` varchar (15) COLLATE utf8_spanish_ci NOT NULL,
    EWLENIN PRIMARJA ("id")
    ) MAGNA = InnoDB DEFAULT CHARSET = utf8 COLLATE = utf8_spanish_ci;
    / *! 40101 SET character_set_client = @saved_cs_client * /;

    -
    - Id-dejta tad-dumping għal "avvenimenti" tat-tabella
    -

    IKKLIBRA L-AVVENIMENTI TAT-TABELLI TA 'LOCK
    / *! 40000 ALTER TABLE `avvenimenti` DISAJNI EWLENIN * /;
    / *! 40000 ALTER TABLE `avvenimenti` ENABLE KEYS * /;
    TISTABBILI TABELLI;
    / *! 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 komplut fl-2014-05-31 14:38:23

  8.   juan77 qal

    hello migos hemm xi mod biex tbiddel il-format tad-data JSON

  9.   ġiselabra qal

    Il-kalendarju huwa tajjeb ħafna, biss meta żżid avveniment ġdid id-data li tieħu awtomatikament kemm fil-bidu kif ukoll fit-tmiem hija fil-format Ingliż, kif nibdilha għal Spanjol? Ikun JJ / XX / SSSS. Grazzi ħafna u tislijiet

  10.   Fabian qal

    Hello, il-kalendarju huwa tajjeb ħafna, iżda meta taġġorna data ma jiġix rifless immedjatament fil-kalendarju. X'nista 'nagħmel?

    Għandi problema oħra wkoll, kif nista 'nagħmel il-punti kollha li jidhru fil-vista ta' kull xahar, huwa possibbli li tkabbar il-kwadru? x'jikkorrispondi għal ġurnata?

  11.   Alex qal

    Għandi l-problema li lokalment meta tgħabbi l-eżempju jaħdem perfettament imma meta ntella 'fuq server online ma jurini xejn mill-kalendarju l-buttuni biss. Kull idea x'jista 'jkun jew x'inhu ħażin fis-server biex jirranġaha jekk jogħġbok.