Etrafında dönen muazzam topluluktan giderek daha fazla etkileniyoruz Bootstrap, iyi bilinen bir CSS çerçevesi , Twitter tarafından oluşturulmuştur. Bu sefer size Bootstrap tabanlı bir takvim sunuyorum Javascript ve JQuery ile programlanmıştırAyrıca takvimin işleyişinin bir kısmını da detaylı olarak anlatacağım ve yapabileceğiniz bazı püf noktaları ve iyileştirmeler ekleyeceğim.
Bu Bootstrap takvimi temiz bir tasarıma sahiptir ve tamamen duyarlı, tüm cihazlardan iyi görünecek! Aynı zamanda bir 7'den fazla dile çeviri ve tüm her ülkenin bayram tarihleri vurgulanır ve not edilir. Bir lüks!
Bu Bootstrap Takviminin çalışması biraz karmaşıktır; başlangıçta kullanıcının tarihlerini bir JSON dosyasından çıkarır, ancak yalnızca Creativos Onlinenasıl olduğunu açıklayacağım olayları bir MYSQL veritabanından ayıklayın herhangi bir sistemde mükemmel uygulaması için.
Tanınmış Veritabanı sistemi
Uygulamanın ana dosyalarının işlevleri:
DİZİN.HTML
- Bootstrap 2.3.2 yükleniyor
- Takvim Tasarımı
- Olayların Listesi
- Takvimde Gezinme
- Farklı Takvim görünümleri (Gün / Hafta / Ay / Yıl)
- Uygulamayı JS'de yükleme
- Dil seçimi
DİZİN-BS3.HTML
- Bootstrap 3.0 yükleniyor
- Takvim Tasarımı
- Etkinlik Listesi
- Takvimde Gezinme
- Farklı takvim görünümleri (Gün / Hafta / Ay / Yıl)
- Uygulamayı JS'de yükleme
- Dil seçimi
ETKİNLİKLER.JSON.PHP
- Aşağıdaki verilere sahip Olayların Listesi:
- id: olay tanımlayıcı
- Başlık: olay başlığı
- url: olayın url'si
- sınıf: sonraki renkler için olay türü (bilgi | uyarı |…).
- başlatın: başlangıç tarihi
- son: bitiş tarihi
APP.JS
- Uygulama yapılandırmasını depolayan değişkenler.
- Ekstra JQuery işlevleri
TAKVİM.JS
- Ana uygulama ayarları
- Takvimin temel işlevleri
- Olayların çıkarılması ve tedavisi
- Bayram tarihleri
- Dil Yükleniyor
- Olaylar listesini yükleme
- Farklı Takvim görünümlerini yükleme (Gün / Hafta / Ay / Yıl)
TAKVİM.CSS
- Takvim Stilleri
- Etkinlik listesi stilleri
- Diğer cihazlar için takvim stilleri
Veritabanından olayları ayıklayın
Olayları bir MYSQL veritabanından çıkarmak için dosyanın satırlarını değiştireceğiz olaylar.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 Takvimi
İndir | Bootstrap Takvimi
Daha fazla bilgi | Önyükleme: CSS Çerçevesi
Sergio kodunu kontrol ederken
Kod zaten kontrol edildi! Tek şey, veritabanınızda aşağıdaki alanlarla «olaylar» tablosunu oluşturmanız gerekir: {id | ana sayfa | son | isim | sınıf | url} ve veritabanınıza erişimi yapılandırın!
Bu değişkenleri başkaları için değiştirdim ve etkinliği veritabanıma eklememe izin verdi, ancak takvime yansıtıldığını görmüyorum. Ve takvime tıkladığım güne bağlı olarak olayların verilerini nasıl kurtarabilirim?
Olayların yaratılması ve yaratılması için bir veritabanı oluşturulmalıdır, ancak bununla ilgili olan olayları ona ekleyebilmem ve varsayılan olarak dil İspanyolcadır çünkü varsayılan olarak İngilizce olarak tanımlanmıştır.
Dili İspanyolca olarak varsayılan olarak ayarlamak için, en iyisi İspanyolca dil dosyasındaki mevcut dizeleri calendar.js dosyasındaki İngilizce dizeleriyle değiştirmek en iyisidir. Bununla birlikte, daha iyi yöntemler de var, bunları komut dosyasının ana web sitesinde veya bu gönderiye ekli Github topluluğunda bulabilirsiniz.
Ayrıca, birkaç hafta içinde veritabanına olayların nasıl ekleneceğini açıklayacağım yeni bir gönderi yüklemeye çalışacağım.
Çok teşekkür ederim, etkinlik eklemek için gönderiyi takdir edeceğim :)
merhaba, verilerimi veritabanından bağlamak ve çıkarmak için her şeyi düzelttiğimde bir sorun yaşıyorum, bana herhangi bir olay göstermiyor
veritabanına olay eklemez
Nasıl etkinlik ekleyeceğinizi gönderebilir misiniz? başlangıç ve bitiş alanlarında ne tür veriler var? zaman damgası? "0" kaldı, olayları eklemem ve düzenleyebilmem gerekiyor. Teşekkürler
MEVCUT DEĞİLSE VERİTABANI OLUŞTUR `bootstrap_calendar` / *! 40100 VARSAYILAN KARAKTER SETİ utf8 TOPLAMA utf8_spanish_ci * /;
`Bootstrap_calendar` KULLANIN;
- Win10.13 (x5.6.13) için MySQL dökümü 32 Dağıt 86
-
- Ana Bilgisayar: 127.0.0.1 Veritabanı: bootstrap_calendar
- ——————————————————
- Sunucu sürümü 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İMLER AYARLA 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 * /;
-
- Tablo "olaylar" için tablo yapısı
-
"Olaylar" VARSA TABLO DÜŞÜR;
/ *! 40101 SET @saved_cs_client = @@ character_set_client * /;
/ *! 40101 SET character_set_client = utf8 * /;
TABLO OLUŞTUR "olaylar" (
`id` int (10) unsigned NOT NULL AUTO_INCREMENT,
`title` varchar (150) COLLATE utf8_spanish_ci VARSAYILAN BOŞ,
"gövde" metni HARMANLA utf8_spanish_ci BOŞ DEĞİL,
`url` varchar (150) HARMANLA utf8_spanish_ci BOŞ DEĞİL,
`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,
BİRİNCİL ANAHTAR ("kimlik")
) MOTOR = InnoDB VARSAYILAN KARAKTER = utf8 COLLATE = utf8_spanish_ci;
/ *! 40101 SET character_set_client = @saved_cs_client * /;
-
- "Olaylar" tablosu için veri dökümü
-
LOCK TABLES` events` WRITE;
/ *! 40000 ALTER TABLE `events` ANAHTARLARI DEVRE DIŞI BIRAK * /;
/ *! 40000 ALTER TABLE `events` ENABLE KEYS * /;
KİLİT AÇMA TABLOLARI;
/ *! 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 COLLATION_CONNECTION SET = @ OLD_COLLATION_CONNECTION * /;
/ *! 40111 SET SQL_NOTES = @ OLD_SQL_NOTES * /;
- Boşaltma 2014-05-31 14:38:23 tarihinde tamamlandı
merhaba migos, JSON tarih biçimini değiştirmenin herhangi bir yolu var mı
Takvim çok iyi, sadece yeni bir etkinlik eklerken varsayılan olarak hem başlangıçta hem de sonda aldığı tarih İngilizce biçimindedir, bunu İspanyolca'ya nasıl değiştirebilirim? GG / AA / YYYY olacaktır. Çok teşekkür ederim ve selamlar
Merhaba, takvim çok iyi, ancak bir tarihi güncellerken takvime hemen yansımıyor. Ne yapabilirim ?
Benim de başka bir sorunum var, aylık görünümde tüm puanları nasıl gösterebilirim, kareyi büyütmek mümkün mü? bir güne karşılık gelen nedir?
Örneği yüklerken yerel olarak mükemmel bir şekilde çalıştığını ancak çevrimiçi bir sunucuya yüklediğimde bana takvimden hiçbir şey göstermemesi, sadece düğmeleri göstermesi sorunum var. Sunucuda ne olabileceği veya neyin yanlış olduğu hakkında herhangi bir fikriniz varsa lütfen düzeltin.