Vi blir stadig mer imponert over det enorme samfunnet som kretser rundt Bootstrap, et kjent CSS-rammeverk , opprettet av Twitter. Denne gangen presenterer jeg deg en Bootstrap-basert kalender programmert med Javascript og JQueryI tillegg vil jeg forklare i detalj en del av driften av kalenderen, og jeg vil legge til noen triks og forbedringer du kan gjøre.
Denne Bootstrap-kalenderen har et rent design og er helt responsive, det vil se bra ut fra alle enheter! Den inneholder også en oversettelse til mer enn 7 språk og alt de festlige datoene i hvert land blir fremhevet og notert. En luksus!
Driften av denne Bootstrap-kalenderen er noe kompleks, den trekker ut brukerens datoer fra en JSON-fil i utgangspunktet, men utelukkende for brukere av Creativos OnlineJeg vil forklare hvordan trekke ut hendelsene fra en MYSQL-database for den perfekte implementeringen i ethvert system.
Kjent databasesystem
Funksjoner til hovedfilene i applikasjonen:
INDEKS.HTML
- Bootstrap 2.3.2 lasting
- Kalender Design
- Liste over hendelser
- Navigere i kalenderen
- Ulike kalendervisninger (dag / uke / måned / år)
- Laster applikasjonen i JS
- Språkvalg
INDEX-BS3.HTML
- Bootstrap 3.0 lasting
- Kalender Design
- Arrangementsliste
- Navigere i kalenderen
- Ulike kalendervisninger (dag / uke / måned / år)
- Laster applikasjonen i JS
- Språkvalg
EVENTS.JSON.PHP
- Liste over hendelser med følgende data:
- id: hendelsesidentifikator
- tittel: hendelsestittel
- url: hendelses url
- klasse: hendelsestype (info | advarsel |…) for påfølgende farger.
- begynne: startdato
- slutt: sluttdato
APP.JS
- Variabler som lagrer applikasjonskonfigurasjonen.
- Ekstra JQuery-funksjoner
KALENDER.JS
- Hovedapplikasjonsinnstillinger
- Hovedfunksjonene i kalenderen
- Utvinning og behandling av hendelser
- Festlige datoer
- Språkinnlasting
- Laster inn hendelseslisten
- Laster inn de forskjellige kalendervisningene (dag / uke / måned / år)
KALENDER.CSS
- Kalenderstiler
- Hendelseslistestiler
- Kalenderstiler for andre enheter
Pakk ut hendelser fra en database
Å hente hendelsene fra en MYSQL-database vi vil erstatte linjene i filen 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-kalender
Last ned | Bootstrap-kalender
Mer informasjon | Bootstrap: CSS Framework
mens jeg sjekker koden Sergio
Koden er allerede sjekket! Det eneste, du må lage tabellen «hendelser» i databasen din med følgende felt: {id | hjem | slutt | navn | klasse | url} og konfigurer tilgang til databasen din!
Jeg har endret disse variablene for andre, og det har tillatt meg å legge til hendelsen i databasen min, men jeg ser den ikke gjenspeiles i kalenderen. Og hvordan kunne jeg gjenopprette dataene for hendelsene avhengig av dagen jeg klikker på kalenderen?
For å gjøre og utføre opprettelsen av hendelser må du opprette en database, men det som er poenget er at jeg kan knytte hendelser til den og som standard språket til spansk fordi det er definert som engelsk som standard
For å standardspråket til spansk, er det best å erstatte de eksisterende strengene i den spanske språkfilen med de på engelsk i kalenderen.js-filen. Imidlertid er det andre bedre metoder, du kan finne dem på manusens hovedwebside eller i Github-fellesskapet, vedlagt dette innlegget.
Dessuten vil jeg prøve å laste opp et nytt innlegg om noen uker hvor jeg vil forklare hvordan du lager innsetting av hendelser i databasen.
Tusen takk, jeg vil sette pris på innlegget for å sette inn hendelser :)
Hei, jeg har et problem når jeg fikser alt for å koble til og trekke ut dataene mine fra databasen, det viser meg ingen hendelser
setter ikke inn hendelse i databasen
Kan du legge ut hvordan du setter inn hendelser? i start- og sluttfeltene hva slags data er det? tidsstempel? "0" til overs, må jeg sette inn og kunne redigere hendelser. Takk
OPPRETT DATABASE HVIS IKKE "bootstrap_calendar" / *! 40100 STANDARDTEGNESETT utf8 COLLATE utf8_spanish_ci * /;
BRUK `bootstrap_calendar`;
- MySQL dump 10.13 Distrib 5.6.13, for Win32 (x86)
-
- Vert: 127.0.0.1 Database: bootstrap_calendar
- ————————————————————
- Serverversjon 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 SETT NAVN utf8 * /;
/ *! 40103 SET @OLD_TIME_ZONE = @@ TIME_ZONE * /;
/ *! 40103 SET TIME_ZONE = '+ 00:00 ′ * /;
/ *! 40014 SETT @OLD_UNIQUE_CHECKS = @@ UNIQUE_CHECKS, UNIQUE_CHECKS = 0 * /;
/ *! 40014 SETT @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 * /;
-
- Bordstruktur for tabellen `hendelser`
-
DROPTABELL HVIS DET ER `begivenheter`;
/ *! 40101 SETT @saved_cs_client = @@ character_set_client * /;
/ *! 40101 SET character_set_client = utf8 * /;
OPPRETT TABELL `hendelser` (
`id` int (10) usignert 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 IKKE NULL STANDARD 'info',
`start` varchar (15) COLLATE utf8_spanish_ci IKKE NULL,
`end` varchar (15) COLLATE utf8_spanish_ci IKKE NULL,
PRIMÆR NØKKEL (`id`)
) MOTOR = InnoDB STANDARD CHARSET = utf8 COLLATE = utf8_spanish_ci;
/ *! 40101 SET character_set_client = @saved_cs_client * /;
-
- Dumping av data for tabellen `hendelser`
-
LÅS TABELLER `hendelser` SKRIV;
/ *! 40000 ALTER TABLE `hendelser` Deaktiver nøkler * /;
/ *! 40000 ALTER TABLE `events` AKTIVER NØLLER * /;
Lås opp 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 fullført 2014-05-31 14:38:23
hallo migos er det noen måte å endre JSON datoformat på
Kalenderen er veldig bra, bare når du legger til en ny begivenhet, er datoen den tar som standard både i begynnelsen og slutten i engelsk format, hvordan endrer jeg den til spansk? Det ville være DD / MM / ÅÅÅÅ. Tusen takk og hilsen
Hei, kalenderen er veldig bra, men når du oppdaterer en dato, gjenspeiles den ikke umiddelbart i kalenderen. Hva kan jeg gjøre ?
Jeg har også et annet problem. Hvordan kan jeg få alle poengene til å vises i månedsvisningen, er det mulig å forstørre torget? hva tilsvarer en dag?
Jeg har problemet at lokalt når det lastes inn, fungerer det perfekt, men når jeg laster det opp til en online server, viser det meg ikke noe fra kalenderen bare knappene. Enhver ide om hva som kan være eller hva som er galt med serveren for å fikse det, vær så snill.