Kami semakin terkesan dengan komunitas besar yang berputar-putar Bootstrap, kerangka kerja CSS yang terkenal , dibuat oleh Twitter. Kali ini saya sajikan kalender berbasis Bootstrap diprogram dengan Javascript dan JQuerySelain itu, saya akan menjelaskan secara detail bagian pengoperasian kalender dan saya akan menambahkan beberapa trik dan perbaikan yang dapat Anda lakukan.
Kalender Bootstrap ini memiliki desain yang bersih dan benar-benar responsif, ini akan terlihat bagus dari semua perangkat! Ini juga mencakup a terjemahan ke lebih dari 7 bahasa dan semua tanggal perayaan di setiap negara disorot dan dicatat. Sebuah kemewahan!
Pengoperasian Kalender Bootstrap ini agak rumit, awalnya mengekstrak tanggal pengguna dari file JSON, tetapi, khusus untuk pengguna Creativos OnlineSaya akan menjelaskan caranya ekstrak acara dari database MYSQL untuk penerapannya yang sempurna di sistem apa pun.
Sistem Database yang Dikenal
Fungsi file utama aplikasi:
INDEKS.HTML
- Bootstrap 2.3.2 memuat
- Desain Kalender
- Daftar Acara
- Menavigasi Kalender
- Tampilan Kalender yang berbeda (Hari / Minggu / Bulan / Tahun)
- Memuat aplikasi di JS
- Pilihan bahasa
INDEKS-BS3.HTML
- Bootstrap 3.0 memuat
- Desain Kalender
- Daftar acara
- Menavigasi Kalender
- Tampilan kalender berbeda (Hari / Minggu / Bulan / Tahun)
- Memuat aplikasi di JS
- Pilihan bahasa
ACARA.JSON.PHP
- Daftar Acara dengan data sebagai berikut:
- id: pengenal acara
- Judul: judul acara
- url: url acara
- kelas: jenis acara (info | peringatan |…) untuk warna selanjutnya.
- Mulailah: tanggal mulai
- akhir: tanggal terminasi
APLIKASI.JS
- Variabel yang menyimpan konfigurasi aplikasi.
- Fungsi JQuery ekstra
KALENDER.JS
- Pengaturan aplikasi utama
- Fungsi utama Kalender
- Ekstraksi dan Pengobatan acara
- Tanggal yang meriah
- Pemuatan Bahasa
- Memuat daftar Acara
- Memuat tampilan Kalender yang berbeda (Hari / Minggu / Bulan / Tahun)
KALENDER.CSS
- Gaya Kalender
- Gaya daftar acara
- Gaya kalender untuk perangkat lain
Ekstrak peristiwa dari database
Untuk mengekstrak acara dari database MYSQL kami akan mengganti baris file event.json.php oleh:
<?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 | Kalender Bootstrap
Unduh | Kalender Bootstrap
Pelajari lebih lanjut | Bootstrap: Kerangka CSS
saat saya memeriksa kode Sergio
Kode sudah diperiksa! Satu-satunya hal, Anda harus membuat tabel «peristiwa» di database Anda dengan kolom berikut: {id | rumah | akhir | nama | kelas | url} dan konfigurasikan akses ke database Anda!
Saya telah mengubah variabel tersebut untuk orang lain, dan itu memungkinkan saya untuk menambahkan acara ke database saya, tetapi saya tidak melihatnya tercermin di kalender. Dan bagaimana saya bisa memulihkan data acara tergantung pada hari saya mengklik kalender?
Untuk melakukan dan melakukan pembuatan acara maka Anda harus membuat database, tetapi yang penting adalah saya dapat melampirkan acara ke sana dan secara default bahasa ke Spanyol karena itu didefinisikan sebagai bahasa Inggris secara default
Untuk default bahasa ke Spanyol, yang terbaik adalah mengganti string yang ada di file bahasa Spanyol dengan yang ada dalam bahasa Inggris di file calendar.js. Namun, ada metode lain yang lebih rapi, Anda dapat menemukannya di situs web utama skrip atau di komunitas Github, terlampir pada posting ini.
Juga, saya akan mencoba mengunggah posting baru dalam beberapa minggu di mana saya akan menjelaskan cara membuat penyisipan acara di database.
Terima kasih banyak, saya akan menghargai posting untuk memasukkan acara :)
halo saya punya masalah ketika saya memperbaiki semuanya untuk menghubungkan dan mengekstrak data saya dari database itu tidak menunjukkan kejadian apa pun
tidak memasukkan acara dalam database
Bisakah Anda memposting cara menyisipkan acara? di bidang awal dan akhir, jenis data apa itu? cap waktu? ada sisa "0", saya harus menyisipkan dan bisa mengedit acara. Terima kasih
BUAT DATABASE JIKA TIDAK ADA `bootstrap_calendar` / *! 40100 SET KARAKTER DEFAULT utf8 COLLATE utf8_spanish_ci * /;
GUNAKAN `bootstrap_calendar`;
- MySQL dump 10.13 Distrib 5.6.13, untuk Win32 (x86)
-
- Host: 127.0.0.1 Basis data: bootstrap_calendar
- ——————————————————
- Versi 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 SET NAMA 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 * /;
-
- Struktur tabel untuk `peristiwa` tabel
-
TABEL JIKA ADA `peristiwa`;
/ *! 40101 SET @saved_cs_client = @@ character_set_client * /;
/ *! 40101 SET character_set_client = utf8 * /;
BUAT `peristiwa` TABEL (
`id` int (10) unsigned NOT NULL AUTO_INCREMENT,
`title` varchar (150) COLLATE utf8_spanish_ci DEFAULT NULL,
teks `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,
KUNCI UTAMA (`id`)
) ENGINE = CHARSET DEFAULT InnoDB = utf8 COLLATE = utf8_spanish_ci;
/ *! 40101 SET character_set_client = @saved_cs_client * /;
-
- Dumping data untuk tabel `peristiwa`
-
LOCK TABLES` events` MENULIS;
/ *! 40000 ALTER TABLE `events` DISABLE KEYS * /;
/ *! 40000 ALTER TABLE `events` KUNCI AKTIFKAN * /;
BUKA TABEL;
/ *! 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 * /;
- Pembuangan selesai pada 2014-05-31 14:38:23
halo migos apakah ada cara untuk mengubah format tanggal JSON
Kalendernya sangat bagus, hanya ketika menambahkan acara baru tanggal yang dibutuhkan secara default baik di awal dan di akhir dalam format bahasa Inggris, bagaimana cara mengubahnya ke bahasa Spanyol? Ini akan menjadi DD / MM / YYYY. Terima kasih banyak dan salam
Halo, kalendernya sangat bagus, tetapi saat memperbarui tanggal itu tidak langsung tercermin di kalender. Apa yang saya bisa lakukan ?
Saya juga punya masalah lain, bagaimana saya bisa membuat semua titik ditampilkan dalam tampilan bulanan, apakah mungkin memperbesar kotak? apa yang sesuai dengan hari?
Saya memiliki masalah bahwa secara lokal ketika memuat contoh itu berfungsi dengan sempurna tetapi ketika saya mengunggahnya ke server online, itu tidak menunjukkan kepada saya apa pun dari kalender hanya tombolnya. Tahu apa yang mungkin atau apa yang salah dengan server untuk memperbaikinya.