Valtava yhteisö, joka pyörii, on meille yhä vaikuttavampi Bootstrap, tunnettu CSS-kehys , luonut Twitter. Tällä kertaa esitän sinulle Bootstrap-pohjaisen kalenterin ohjelmoitu Javascriptilla ja JQueryllä, Selitän myös osan kalenterin toiminnasta yksityiskohtaisesti ja lisätään joitain temppuja ja parannuksia, joita voit tehdä.
Tämä Bootstrap-kalenteri on puhdas muotoilu ja on täysin herkkä, se näyttää hyvältä kaikilta laitteilta! Se sisältää myös a käännös yli 7 kielelle ja kaikki kunkin maan juhlapäivät korostetaan ja merkitään muistiin. Ylellisyyttä!
Tämän Bootstrap-kalenterin toiminta on melko monimutkaista, se poimii käyttäjän päivämäärät alun perin JSON-tiedostosta, mutta yksinomaan Creativos OnlineSelitän miten poimia tapahtumat MYSQL-tietokannasta sen täydelliseen toteuttamiseen missä tahansa järjestelmässä.
Tunnettu tietokantajärjestelmä
Sovelluksen päätiedostojen toiminnot:
INDEKSI.HTML
- Bootstrap 2.3.2 lataus
- Kalenterin suunnittelu
- Luettelo tapahtumista
- Kalenterissa liikkuminen
- Eri kalenterinäkymät (päivä / viikko / kuukausi / vuosi)
- Ladataan sovellusta JS: ään
- Kielen valinta
HAKEMISTO-BS3.HTML
- Bootstrap 3.0 lataus
- Kalenterin suunnittelu
- Tapahtumaluettelo
- Kalenterissa liikkuminen
- Eri kalenterinäkymät (päivä / viikko / kuukausi / vuosi)
- Ladataan sovellusta JS: ään
- Kielen valinta
TAPAHTUMAT.JSON.PHP
- Luettelo tapahtumista, joissa on seuraavat tiedot:
- id: tapahtuman tunniste
- otsikko: tapahtuman otsikko
- url: tapahtuman URL-osoite
- luokka: tapahtuman tyyppi (info | varoitus |…) seuraaville väreille.
- alkaa: aloituspäivämäärä
- end: irtisanomispäivä
APP.JS
- Muuttujat, jotka tallentavat sovelluksen kokoonpanon.
- JQuery-lisätoiminnot
KALENTERI.JS
- Sovelluksen pääasetukset
- Kalenterin päätoiminnot
- Poiminta ja tapahtumien käsittely
- Juhlapäivät
- Kieli ladataan
- Ladataan Tapahtumat-luetteloa
- Eri kalenterinäkymien lataaminen (päivä / viikko / kuukausi / vuosi)
KALENTERI.CSS
- Kalenterityylit
- Tapahtumaluettelotyylit
- Muiden laitteiden kalenterityylit
Pura tapahtumat tietokannasta
Poimia tapahtumat MYSQL-tietokannasta korvataan tiedoston rivit events.json.php by:
<?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-kalenteri
Lataa | Bootstrap-kalenteri
Lisätietoja | Bootstrap: CSS-kehys
kun tarkistan koodin Sergio
Koodi on jo tarkistettu! Ainoa asia, sinun on luotava taulukko «tapahtumat» tietokantaan seuraavilla kentillä: {id | koti | loppu | nimi | luokka | url} ja määritä pääsy tietokantaan!
Olen muuttanut näitä muuttujia muille, ja se on antanut minun lisätä tapahtuman tietokantaani, mutta en näe sitä kalenterissa. Ja miten voin palauttaa tapahtumien tiedot riippuen päivästä, jolloin napsautan kalenteria?
Tapahtumien luominen ja toteuttaminen edellyttää tietokannan luomista, mutta kyse on siitä, että voin liittää siihen tapahtumia ja oletuksena kieli on espanja, koska se on oletusarvoisesti englanti
Jos oletuksena on kieli espanjaksi, on parasta korvata olemassa olevat kielet espanjankielisessä tiedostossa englanninkielisillä kielillä calendar.js-tiedostossa. On kuitenkin muitakin siistimpiä menetelmiä, jotka löydät tämän käsikirjoituksen pääsivustolta tai Github-yhteisöstä.
Yritän myös ladata uuden viestin muutaman viikon kuluttua, jossa selitän, miten tapahtumien lisäys luodaan tietokantaan.
Paljon kiitoksia, kiitän viestiä tapahtumien lisäämiseksi :)
hei Minulla on ongelma, kun korjaan kaiken yhteyden muodostamiseksi ja poimin tietoni tietokannasta, se ei näytä minulle mitään tapahtumia
ei lisää tapahtumaa tietokantaan
Voisitko lähettää miten lisätä tapahtumia? millaista tietoa alku- ja loppukentissä on? aikaleima? "0" jäljellä, minun täytyy lisätä ja pystyä muokkaamaan tapahtumia. Kiitos
LUO TIETOKANTA, JOS EI OLE "bootstrap_calendar" / *! 40100 OLETUSLOMAKEASETUS utf8 COLLATE utf8_spanish_ci * /;
KÄYTÄ `bootstrap_calendar`;
- MySQL dump 10.13 Distrib 5.6.13, Win32: lle (x86)
-
- Isäntä: 127.0.0.1 Tietokanta: bootstrap_calendar
- ——————————————————
- Palvelinversio 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 ASETTAVAT NIMET utf8 * /;
/ *! 40103 SET @OLD_TIME_ZONE = @@ TIME_ZONE * /;
/ *! 40103 ASETA 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 * /;
-
- Taulukon rakenne tapahtumia varten
-
PUDOTUSTAULUKKO, JOS ON "tapahtumia";
/ *! 40101 SET @saved_cs_client = @@ merkki_set_client * /;
/ *! 40101 SET merkki_set_asiakkaan = utf8 * /;
LUO TAULUKKO "tapahtumat" (
`id` int (10) allekirjoittamaton EI NULL AUTO_INCREMENT,
`title` varchar (150) COLLATE utf8_spanish_ci OLETUS NULL,
`body` text COLLATE utf8_spanish_ci EI NULL,
`url` varchar (150) COLLATE utf8_spanish_ci EI NULL,
`class` varchar (45) COLLATE utf8_spanish_ci EI NULL DEFAULT 'info',
`start` varchar (15) COLLATE utf8_spanish_ci EI NULL,
`end` varchar (15) COLLATE utf8_spanish_ci EI NULL,
ENSIMMÄINEN AVAIN (`id ')
) MOOTTORI = InnoDB-OLETUSARVO = utf8 COLLATE = utf8_spanish_ci;
/ *! 40101 SET character_set_client = @saved_cs_client * /;
-
- Taulukon "tapahtumia" koskevat tiedot
-
LUKITTAVAT TAULUKOT `tapahtumat` KIRJOITA;
/ *! 40000 ALTER TAULUKKO `tapahtumia` POISTA AVAIMET * /;
/ *! 40000 ALTER TABLE `tapahtumat` KÄYTÄ AVAIMET * /;
AVAA PÖYTÄT;
/ *! 40103 ASETA TIME_ZONE = @ OLD_TIME_ZONE * /;
/ *! 40101 SET SQL_MODE = @ OLD_SQL_MODE * /;
/ *! 40014 SET FOREIGN_KEY_CHECKS = @ OLD_FOREIGN_KEY_CHECKS * /;
/ *! 40014 ASETA 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 * /;
- Kaatopaikka valmistunut 2014-05-31 14:38:23
hei migos onko mitään keinoa muuttaa JSON päivämäärämuotoa
Kalenteri on erittäin hyvä, vain kun lisäät uuden tapahtuman, päivämäärä, jonka se ottaa oletusarvoisesti sekä alussa että lopussa, on englanninkielinen, miten vaihdan sen espanjaksi? Se olisi PP / KK / VVVV. Paljon kiitoksia ja terveisiä
Hei, kalenteri on erittäin hyvä, mutta päivämäärän päivittäminen ei näy heti kalenterissa. Mitä voin tehdä ?
Minulla on myös toinen ongelma, kuinka voin saada kaikki pisteet näkymään kuukausinäkymässä, onko mahdollista suurentaa neliötä? mikä vastaa päivää?
Minulla on ongelma, että paikallisesti esimerkkiä ladattaessa se toimii täydellisesti, mutta kun lataan sen online-palvelimelle, se ei näytä minulle mitään kalenterista, vain painikkeita. Idea mikä voi olla tai mikä vikaa palvelimella korjata se kiitos.