JQuery ile önyükleme takvimi

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 bir JSON dosyasından kullanıcının tarihlerini çıkarır, ancak yalnızca Creativos Online kullanıcıları için nasıl olduğunu açıklayacağım olayları bir MYSQL veritabanından ayıklayın herhangi bir sistemde mükemmel uygulaması için.

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