We raken steeds meer onder de indruk van de immense gemeenschap die er om draait Bootstrap, een bekend CSS-framework , gemaakt door Twitter. Deze keer presenteer ik je een op Bootstrap gebaseerde kalender geprogrammeerd met Javascript en JQueryDaarnaast zal ik een deel van de werking van de kalender in detail uitleggen en zal ik enkele trucs en verbeteringen toevoegen die je kunt doen.
Deze Bootstrap-kalender heeft een strak ontwerp en is helemaal responsive, het ziet er vanaf alle apparaten goed uit! Het bevat ook een vertaling in meer dan 7 talen en alles de feestdata van elk land worden gemarkeerd en genoteerd Een luxe!
De werking van deze Bootstrap-kalender is enigszins complex. In eerste instantie worden de datums van de gebruiker uit een JSON-bestand gehaald, maar exclusief voor gebruikers van Creativos OnlineIk zal uitleggen hoe extraheer de gebeurtenissen uit een MYSQL-database voor de perfecte implementatie in elk systeem.
Bekend databasesysteem
Functies van de belangrijkste bestanden van de applicatie:
INDEX.HTML
- Bootstrap 2.3.2 laden
- Kalender ontwerp
- Lijst met evenementen
- Navigeren door de agenda
- Verschillende agendaweergaven (dag / week / maand / jaar)
- Laden van de applicatie in JS
- Taal selectie
INDEX-BS3.HTML
- Bootstrap 3.0 laden
- Kalender ontwerp
- Lijst met evenementen
- Navigeren door de agenda
- Verschillende kalenderweergaven (dag / week / maand / jaar)
- Laden van de applicatie in JS
- Taal selectie
EVENEMENTEN.JSON.PHP
- Lijst met gebeurtenissen met de volgende gegevens:
- id: gebeurtenis-ID
- titel: titel van het evenement
- url: url van het evenement
- klasse: gebeurtenistype (info | waarschuwing |…) voor volgende kleuren.
- begin: startdatum
- einde: beëindigingsdatum
APP.JS
- Variabelen die de applicatieconfiguratie opslaan.
- Extra JQuery-functies
KALENDER.JS
- Belangrijkste applicatie-instellingen
- Hoofdfuncties van de kalender
- Extractie en behandeling van evenementen
- Feestelijke data
- Taal laden
- Laden van de evenementenlijst
- Laden van de verschillende kalenderweergaven (dag / week / maand / jaar)
KALENDER.CSS
- Kalenderstijlen
- Event lijst stijlen
- Kalenderstijlen voor andere apparaten
Extraheer gebeurtenissen uit een database
Om de gebeurtenissen uit een MYSQL-database te halen we zullen de regels van het bestand vervangen evenementen.json.php door:
<?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-agenda
Downloaden | Bootstrap-agenda
Meer informatie | Bootstrap: CSS Framework
terwijl ik de code Sergio controleer
De code is al gecontroleerd! Het enige is dat u de tabel «events» in uw database moet aanmaken met de volgende velden: {id | huis | einde | naam | klasse | url} en configureer de toegang tot uw database!
Ik heb die variabelen voor anderen gewijzigd en het heeft me toegestaan de gebeurtenis aan mijn database toe te voegen, maar ik zie het niet weerspiegeld in de kalender. En hoe kan ik de gegevens van de evenementen herstellen, afhankelijk van de dag waarop ik op de kalender klik?
Om gebeurtenissen te maken en uit te voeren, moet u een database maken, maar het gaat erom dat ik er gebeurtenissen aan kan toevoegen en standaard is de taal Spaans omdat deze standaard is gedefinieerd als Engels
Om de taal standaard Spaans te maken, is het het beste om de bestaande strings in het Spaanse taalbestand te vervangen door die in het Engels in het bestand calendar.js. Er zijn echter andere nettere methoden, je kunt ze vinden op de hoofdwebsite van het script of in de Github-gemeenschap, die aan dit bericht is toegevoegd.
Ik zal ook proberen om over een paar weken een nieuw bericht te uploaden, waarin ik zal uitleggen hoe je evenementen in de database kunt invoegen.
Heel erg bedankt, ik zal de post om evenementen in te voegen waarderen :)
hallo, ik heb een probleem als ik alles repareer om verbinding te maken en mijn gegevens uit de database te halen, het toont me geen gebeurtenissen
voegt geen gebeurtenis in de database in
Kunt u posten hoe u evenementen invoegt? in de begin- en eindvelden wat voor soort gegevens zijn het? tijdstempel? "0" over, ik moet gebeurtenissen invoegen en kunnen bewerken. Bedankt
CREATE DATABASE INDIEN NIET BESTAAT `bootstrap_calendar` / *! 40100 STANDAARD TEKENSET utf8 COLLATE utf8_spanish_ci * /;
GEBRUIK `bootstrap_calendar`;
- MySQL-dump 10.13 Distrib 5.6.13, voor Win32 (x86)
-
- Host: 127.0.0.1 Database: bootstrap_calendar
- Server versie 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 NAMEN INSTELLEN 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 * /;
-
- Tafelstructuur voor tafel `evenementen`
-
DROP TABLE INDIEN BESTAAT "evenementen";
/ *! 40101 SET @saved_cs_client = @@ character_set_client * /;
/ *! 40101 SET character_set_client = utf8 * /;
MAAK TABEL `events` (
`id` int (10) unsigned NOT NULL AUTO_INCREMENT,
`title` varchar (150) COLLATE utf8_spanish_ci DEFAULT NULL,
`body` tekst COLLATE utf8_spanish_ci NOT NULL,
`url` varchar (150) COLLATE utf8_spanish_ci NIET 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,
PRIMAIRE SLEUTEL (`id`)
) ENGINE = InnoDB DEFAULT CHARSET = utf8 COLLATE = utf8_spanish_ci;
/ *! 40101 SET character_set_client = @saved_cs_client * /;
-
- Dumping data voor tabel `events`
-
LOCK TABLES `events` SCHRIJVEN;
/ *! 40000 WIJZIGINGSTABEL `evenementen` TOETSEN UITSCHAKELEN * /;
/ *! 40000 ALTER TABLE `events` TOETSEN INSCHAKELEN * /;
ONTGRENDEL TABELLEN;
/ *! 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 voltooid op 2014-05-31 14:38:23
hallo migos is er een manier om het JSON-datumnotatie te wijzigen
De kalender is erg goed, alleen bij het toevoegen van een nieuw evenement is de datum die me standaard zowel aan het begin als aan het einde brengt in het Engelse formaat, hoe verander ik het in het Spaans? Het zou DD / MM / JJJJ zijn. Heel erg bedankt en groeten
Hallo, de kalender is erg goed, maar bij het bijwerken van een datum wordt deze niet meteen weerspiegeld in de kalender. Wat ik kan doen ?
Ik heb ook een ander probleem, hoe kan ik ervoor zorgen dat alle punten in de maandelijkse weergave worden weergegeven, is het mogelijk om het vierkant te vergroten? wat komt overeen met een dag?
Ik heb het probleem dat het lokaal bij het laden van het voorbeeld perfect werkt, maar als ik het upload naar een online server, laat het me niets van de kalender zien, alleen de knoppen. Enig idee wat er kan zijn of wat er mis is met de server om het te repareren.