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 brugere af Creativos OnlineJeg vil forklare hvordan udpak begivenhederne fra en MYSQL-database for dens perfekte implementering i ethvert system.
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
som jeg tjekker koden Sergio
Koden er allerede kontrolleret! Det eneste, du skal oprette tabellen «begivenheder» i din database med følgende felter: {id | hjem | slut | navn | klasse | url} og konfigurer adgang til din database!
Jeg har ændret disse variabler for andre, og det har tilladt mig at føje begivenheden til min database, men jeg kan ikke se den afspejles i kalenderen. Og hvordan kunne jeg gendanne dataene for begivenhederne afhængigt af den dag, jeg klikker på kalenderen?
For at udføre og udføre oprettelsen af begivenheder skal der oprettes en database, men hvad er pointen er, at jeg kan føje begivenheder til den og som standard sproget til spansk, fordi det er defineret som engelsk som standard
For at standardsprog skal være spansk, er det bedst at erstatte de eksisterende strenge i den spanske sprogfil med dem på engelsk i filen calendar.js. Der er dog andre pænere metoder, du kan finde dem på scriptets hovedwebsted eller i Github-samfundet, der er knyttet til dette indlæg.
Jeg vil også prøve at uploade et nyt indlæg om et par uger, hvor jeg vil forklare, hvordan jeg opretter indsættelse af begivenheder i databasen.
Mange tak, jeg vil sætte pris på indlægget for at indsætte begivenheder :)
hej Jeg har et problem, når jeg løser alt for at oprette forbindelse og udtrække mine data fra databasen, det viser mig ingen begivenheder
indsætter ikke begivenhed i databasen
Kan du sende, hvordan du indsætter begivenheder? i start- og slutfelterne, hvilken type data er det? tidsstempel? der er "0" tilbage, jeg skal indsætte og være i stand til at redigere begivenhederne. Tak
Opret DATABASE, HVIS IKKE FINDER `bootstrap_calendar` / *! 40100 STANDARDKARAKTER SÆT utf8 COLLATE utf8_spanish_ci * /;
BRUG `bootstrap_calendar`;
- MySQL dump 10.13 Distrib 5.6.13 til Win32 (x86)
—
- Vært: 127.0.0.1 Database: 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 SÆT NAVNE 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 * /;
—
- Tabelstruktur til tabel `begivenheder`
—
DROPTABEL, HVIS der findes 'begivenheder';
/ *! 40101 SET @saved_cs_client = @@ character_set_client * /;
/ *! 40101 SET character_set_client = utf8 * /;
Opret TABEL `begivenheder` (
`id` int (10) usigneret IKKE NULL AUTO_INCREMENT,
`title` varchar (150) COLLATE utf8_spanish_ci STANDARD NULL,
`body`-tekst COLLATE utf8_spanish_ci IKKE NULL,
`url` varchar (150) COLLATE utf8_spanish_ci IKKE NULL,
`class` varchar (45) COLLATE utf8_spanish_ci NOT NULL DEFAULT 'info',
`start` varchar (15) COLLATE utf8_spanish_ci IKKE NULL,
`end` varchar (15) COLLATE utf8_spanish_ci IKKE NULL,
PRIMÆR NØGLE (`id`)
) MOTOR = InnoDB STANDARD CHARSET = utf8 COLLATE = utf8_spanish_ci;
/ *! 40101 SET character_set_client = @saved_cs_client * /;
—
- Dumping af data for tabelhændelser
—
LÅS TABLER `begivenheder` SKRIV;
/ *! 40000 ALTER TABLE `begivenheder` Deaktiver nøgler * /;
/ *! 40000 ALTER TABLE `begivenheder` AKTIVER NØGLER * /;
LÅS OP TABLER;
/ *! 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 afsluttet 2014-05-31 14:38:23
hej migos er der nogen måde at ændre JSON-datoformatet på
Kalenderen er meget god, kun når der tilføjes en ny begivenhed, er den dato, som den tager som standard både i begyndelsen og i slutningen, i engelsk format, hvordan ændrer jeg den til spansk? Det ville være DD / MM / ÅÅÅÅ. Mange tak og hilsner
Hej, kalenderen er meget god, men når du opdaterer en dato, afspejles den ikke med det samme i kalenderen. Hvad kan jeg gøre ?
Jeg har også et andet problem, hvordan kan jeg få vist alle punkter i månedsvisningen, er det muligt at forstørre pladsen? hvad svarer til en dag?
Jeg har problemet, at det lokalt, når jeg indlæser eksemplet, fungerer perfekt, men når jeg uploader det til en online server, viser det mig ikke kun noget fra kalenderen knapperne. Enhver idé om hvad der kan være, eller hvad der er galt med serveren for at rette det tak.