Kami semakin kagum dengan komuniti besar yang berkisar Bootstrap, rangka kerja CSS yang terkenal , dibuat oleh Twitter. Kali ini saya membentangkan kalendar berasaskan Bootstrap diprogramkan dengan Javascript dan JQuery, Saya juga akan menerangkan secara terperinci bahagian operasi kalendar dan saya akan menambahkan beberapa helah dan penambahbaikan yang boleh anda lakukan.
Kalendar Bootstrap ini mempunyai reka bentuk yang bersih dan sepenuhnya responsif, ia akan kelihatan baik dari semua peranti! Ia juga menggabungkan a terjemahan ke dalam lebih daripada 7 bahasa dan semua tarikh perayaan setiap negara diserlahkan dan diperhatikan. Kemewahan!
Pengendalian Kalendar Bootstrap ini agak rumit, ia mengekstrak tarikh pengguna daripada fail JSON pada mulanya, tetapi, secara eksklusif untuk pengguna Creativos OnlineSaya akan terangkan bagaimana ekstrak peristiwa dari pangkalan data MYSQL untuk pelaksanaannya yang sempurna dalam sistem apa pun.
Sistem Pangkalan Data yang terkenal
Fungsi fail utama aplikasi:
INDEX.HTML
- Bootstrap 2.3.2 memuatkan
- Reka Bentuk Kalendar
- Senarai Acara
- Menavigasi Kalendar
- Paparan Kalendar yang berbeza (Hari / Minggu / Bulan / Tahun)
- Memuatkan aplikasi di JS
- Pemilihan bahasa
INDEX-BS3.HTML
- Bootstrap 3.0 memuatkan
- Reka Bentuk Kalendar
- Senarai acara
- Menavigasi Kalendar
- Paparan kalendar berbeza (Hari / Minggu / Bulan / Tahun)
- Memuatkan aplikasi di JS
- Pemilihan bahasa
ACARA.JSON.PHP
- Senarai Acara dengan data berikut:
- ID: pengecam peristiwa
- tajuk: tajuk acara
- url: url acara
- kelas: jenis acara (maklumat | amaran |…) untuk warna berikutnya.
- mulakan: tarikh permulaan
- akhir: tarikh penamatan
APP.JS
- Pemboleh ubah yang menyimpan konfigurasi aplikasi.
- Fungsi JQuery tambahan
KALENDAR.JS
- Tetapan aplikasi utama
- Fungsi utama Kalendar
- Pengekstrakan dan Perlakuan peristiwa
- Tarikh perayaan
- Memuatkan Bahasa
- Memuatkan senarai Acara
- Memuatkan paparan Kalendar yang berbeza (Hari / Minggu / Bulan / Tahun)
KALENDAR.CSS
- Gaya Kalendar
- Gaya senarai acara
- Gaya kalendar untuk peranti lain
Ekstrak peristiwa dari pangkalan data
Untuk mengekstrak peristiwa dari pangkalan data MYSQL kami akan menggantikan barisan fail peristiwa.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 | Kalendar Bootstrap
Muat turun | Kalendar Bootstrap
Ketahui lebih lanjut | Bootstrap: Kerangka CSS
semasa saya memeriksa kod Sergio
Kodnya sudah diperiksa! Satu-satunya perkara, anda mesti membuat jadual «acara» dalam pangkalan data anda dengan bidang berikut: {id | rumah | akhir | nama | kelas | url} dan konfigurasikan akses ke pangkalan data anda!
Saya telah mengubah pemboleh ubah tersebut untuk yang lain, dan ini membolehkan saya menambahkan acara ke pangkalan data saya, tetapi saya tidak melihatnya dapat dilihat dalam kalendar. Dan bagaimana saya dapat memulihkan data acara bergantung pada hari saya mengklik kalendar?
Untuk melakukan dan melakukan penciptaan acara, maka pangkalan data mesti dibuat, tetapi apa yang perlu dilakukan ialah saya dapat menambahkan acara ke dalamnya dan sebagai lalai bahasa itu adalah bahasa Sepanyol kerana secara default ditentukan sebagai bahasa Inggeris
Untuk lalai bahasa ke bahasa Sepanyol, yang terbaik adalah mengganti rentetan yang ada dalam fail bahasa Sepanyol dengan yang dalam bahasa Inggeris dalam fail kalendar.js. Namun, ada kaedah lain yang lebih kemas, anda boleh mencarinya di laman web utama skrip atau di komuniti Github, yang dilampirkan pada siaran ini.
Juga, saya akan cuba memuat naik entri baru dalam beberapa minggu di mana saya akan menerangkan cara membuat penyisipan peristiwa dalam pangkalan data.
Terima kasih banyak, saya akan menghargai siaran untuk memasukkan acara :)
hello Saya menghadapi masalah apabila saya membetulkan semua perkara untuk menyambung dan mengekstrak data saya dari pangkalan data, ia tidak menunjukkan sebarang peristiwa kepada saya
tidak memasukkan peristiwa dalam pangkalan data
Bolehkah anda menyiarkan cara memasukkan acara? dalam bidang permulaan dan akhir jenis data apa itu? cap waktu? ada "0" yang tersisa, saya perlu memasukkan dan dapat menyunting acara. Terima kasih
BUAT DATABASE JIKA TIDAK ADA `bootstrap_calendar` / *! 40100 SET KARAKTER YANG 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 Pangkalan Data: bootstrap_calendar
- ———————————————————
- Versi pelayan 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 jadual untuk jadual `acara '
-
JADUAL HABIS JIKA ADA `peristiwa ';
/ *! 40101 SET @saved_cs_client = @@ character_set_client * /;
/ *! 40101 SET character_set_client = utf8 * /;
BUAT JADUAL `acara` (
`id` int (10) tidak ditandatangani TIDAK NULL AUTO_INCREMENT,
`title` varchar (150) KUMPULKAN utf8_spanish_ci DEFAULT NULL,
teks `body` COLLATE utf8_spanish_ci BUKAN NULL,
`url` varchar (150) KOLEKSI utf8_spanish_ci TIDAK NULL,
`class` varchar (45) KUMPULKAN utf8_spanish_ci TIDAK BOLEH DILAKUKAN 'maklumat',
`start` varchar (15) KUMPULKAN utf8_spanish_ci BUKAN NULL,
`end` varchar (15) KUMPULKAN utf8_spanish_ci TIDAK NULL,
KUNCI PERDANA (`id`)
) ENGINE = CARTA DEFAULT InnoDB = utf8 COLLATE = utf8_spanish_ci;
/ *! 40101 SET character_set_client = @saved_cs_client * /;
-
- Membuang data untuk jadual acara
-
LOCK TABLES `acara` MENULIS;
/ *! 40000 ALTER TABLE `acara` KUNCI MATI * /;
/ *! 40000 ALTER TABLE `acara` KUNCI AKTIF * /;
BUKAN 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 UNIK_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 selesai pada 2014-05-31 14:38:23
hello migos adakah cara untuk mengubah format tarikh JSON
Kalendarnya sangat bagus, hanya apabila menambahkan acara baru pada tarikh yang membawa saya secara lalai pada awal dan akhir adalah dalam format Inggeris, bagaimana saya menukarnya ke bahasa Sepanyol? Ia adalah DD / MM / YYYY. Terima kasih banyak dan salam
Halo, kalendar sangat bagus, tetapi semasa mengemas kini tarikh, ia tidak akan segera ditunjukkan dalam kalendar. Apa boleh saya buat ?
Saya juga mempunyai masalah lain, bagaimana saya dapat membuat semua titik dipaparkan dalam paparan bulanan, adakah mungkin untuk memperbesar kotak? apa yang sesuai dengan sehari?
Saya menghadapi masalah bahawa semasa memuatkan contohnya berfungsi dengan sempurna tetapi apabila saya memuat naiknya ke pelayan dalam talian, ia tidak menunjukkan apa-apa dari kalendar, hanya butang. Sebarang idea apa yang mungkin atau apa yang salah dengan pelayan untuk memperbaikinya.