JQuery менен жүктөө жүктөө календары

жүктөө календары Айланабыздагы эбегейсиз чоң жамаат бизге барган сайын көбүрөөк таасир этип жатат Bootstrap, белгилүү CSS алкагы , Twitter тарабынан түзүлгөн. Бул жолу сизге Bootstrap негизделген календарды сунуш кылам Javascript жана JQuery менен программаланганМындан тышкары, мен календардын иштөө бөлүгүн кеңири түшүндүрүп, сиз жасай турган айрым амалдарды жана өркүндөтүүлөрдү кошом.

Бул Bootstrap календары таза дизайнга ээ жана толугу менен сезгич, ал бардык шаймандардан жакшы көрүнөт! Ошондой эле а 7ден ашык тилге которуу жана баары ар бир өлкөнүн майрамдык даталары белгиленип, белгиленет. Кымбатчылык!

Бул Bootstrap Жылнаамасынын иштеши бир аз татаал, колдонуучунун даталарын JSON файлынан бөлүп алат, бирок Creativos Online колдонуучулары үчүн гана, мен кантип түшүндүрөм окуяларды MYSQL маалымат базасынан чыгаруу аны ар кандай системада кемчиликсиз ишке ашыруу үчүн.

Белгилүү маалыматтар базасы тутуму

Белгилүү маалыматтар базасы тутуму

Тиркеменин негизги файлдарынын функциялары:

INDEX.HTML

  • 2.3.2 жүктөө
  • Calendar Design
  • Окуялар тизмеги
  • Жылнаамада чабыттоо
  • Ар кандай календардык көрүнүштөр (Күн / Апта / Ай / Жыл)
  • Колдонмону JSке жүктөө
  • Тил тандоо

INDEX-BS3.HTML

  • 3.0 жүктөө
  • Calendar Design
  • Иш-чаралардын тизмеси
  • Жылнаамада чабыттоо
  • Ар кандай календардык көрүнүштөр (Күн / Апта / Ай / Жыл)
  • Колдонмону JSке жүктөө
  • Тил тандоо

Окуялар.JSON.PHP

  • Төмөнкү маалыматтарды камтыган иш-чаралардын тизмеси:
    • ID: окуя идентификатору
    • аталышы: иш-чаранын аталышы
    • нускага шилтеме: иш-чаранын url
    • класс: кийинки түстөр үчүн окуя түрү (маалымат | эскертүү |…).
    • баштоо: башталган күнү
    • аягы: токтотуу күнү

APP.JS

  • Колдонмонун конфигурациясын сактаган өзгөрмөлөр.
  • Кошумча JQuery функциялары

CALENDAR.JS

  • Колдонмонун негизги орнотуулары
  • Жылнааманын негизги функциялары
  • Окуяларды алуу жана дарылоо
  • Майрамдык даталар
  • Тил жүктөлүүдө
  • Иш-чаралар тизмеси жүктөлүүдө
  • Ар кандай календардык көрүнүштөр жүктөлүүдө (Күн / Апта / Ай / Жыл)

CALENDAR.CSS

  • Calendar Styles
  • Иш-чаралардын тизмесинин стилдери
  • Башка түзмөктөр үчүн жылнаама стилдери

Маалыматтар базасынан окуяларды чыгаруу

MYSQL маалымат базасынан окуяларды чыгаруу файлдын саптарын алмаштырабыз окуялар.json.php менен:

<?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 Календарь

Жүктөө | Bootstrap Calendar

Көбүрөөк маалымат | Bootstrap: CSS Framework


Макаланын мазмуну биздин принциптерге карманат редакциялык этика. Ката жөнүндө кабарлоо үчүн чыкылдатыңыз бул жерде.

14 комментарий, өзүңүздүкүн калтырыңыз

Комментарий калтырыңыз

Сиздин электрондук почта дареги жарыяланбайт. Милдеттүү талаалар менен белгиленет *

*

*

  1. Маалыматтар үчүн жооптуу: Мигель Анхель Гатан
  2. Маалыматтын максаты: СПАМды көзөмөлдөө, комментарийлерди башкаруу.
  3. Мыйзамдуулук: Сиздин макулдугуңуз
  4. Маалыматтарды берүү: Маалыматтар үчүнчү жактарга юридикалык милдеттенмелерден тышкары билдирилбейт.
  5. Маалыматтарды сактоо: Occentus Networks (ЕС) тарабынан уюштурулган маалыматтар базасы
  6. Укуктар: Каалаган убакта маалыматыңызды чектеп, калыбына келтирип жана жок кыла аласыз.

  1.   Дөөтү Z ал мындай деди:

    мен Sergio кодун текшерип жатканда

    1.    Серхио Роденас ал мындай деди:

      Код мурунтан эле текшерилген! Бир гана нерсе, маалымат базасында «окуялар» таблицасын төмөнкү талаалар менен түзүшүңүз керек: {id | үй | аягы | аты | класс | url} жана маалымат базаңызга кирүүнү конфигурациялаңыз!

      1.    дарыялар ал мындай деди:

        Мен ал өзгөрмөлөрдү башкалар үчүн өзгөрттүм жана бул окуяны маалымат базасына кошууга мүмкүнчүлүк берди, бирок ал календарда чагылдырылганын көрө албай жатам. Жана календарды чыкылдаткан күнүмө жараша окуялардын маалыматтарын кантип калыбына келтирсем болот?

  2.   Хосе Луис Замудио (@JoseZami) ал мындай деди:

    Окуяларды жаратуу үчүн жана анда маалымат базасы түзүлүшү керек, бирок мен ага окуяларды жана демейки шартта испан тилин кошо алам, анткени ал англисче демейки катары аныкталат

    1.    Серхио Роденас ал мындай деди:

      Демейки тилди испан тилине которуш үчүн, испан тилиндеги файлдагы саптарды Calendar.js файлындагы англис тилиндеги жазуулар менен алмаштырган оң. Бирок, башка тыкан ыкмалар бар, аларды сценарийдин негизги веб-сайтынан же ушул постко тиркелген Github жамаатынан таба аласыз.
      Ошондой эле, мен бир нече жуманын ичинде жаңы билдирүүнү жүктөөгө аракет кылам, ал жерде маалымат базасында окуяларды кантип киргизүүнү түшүндүрүп берем.

  3.   Хосе Луис Замудио (@JoseZami) ал мындай деди:

    Чоң рахмат, иш-чараларды киргизүү үчүн билдирүүгө ыраазы болом :)

  4.   Жайырдын ал мындай деди:

    Саламатсызбы, мен туташуу үчүн бардык нерсени оңдоп, маалыматтар базасынан чыгарып алсам, анда эч кандай окуялар жок

  5.   Диего ал мындай деди:

    маалымат базасына окуя киргизбейт

  6.   Гонза ал мындай деди:

    Иш-чараларды кантип киргизсе болот? баштоо жана аяктоо талааларында ал кандай маалыматтар? убакыт белгиси? "0" калды, мен окуяларды киргизип, түзөтө алышым керек. Рахмат

  7.   Бейшемби ал мындай деди:

    БОЛБОСО БИЛИМДЕРДИН БАЗАСЫН ТҮЗҮҢҮЗ `bootstrap_calendar` / *!
    КОЛДОНУУ `bootstrap_calendar`;
    - MySQL dump 10.13 Distrib 5.6.13, Win32 үчүн (x86)
    -
    - Хост: 127.0.0.1 Маалыматтар базасы: bootstrap_calendar
    - ———————————————————
    - Сервердин 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 NAMES 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 * /;

    -
    - "окуялар" столунун стол структурасы
    -

    БАР БОЛСО ДАСТОРКОНДУ ТАРТУУ `окуялар`;
    / *! 40101 SET @saved_cs_client = @@ character_set_client * /;
    / *! 40101 SET character_set_client = utf8 * /;
    CREATE TABLE `иш-чаралар` (
    `id` int (10) unsigned NOT NULL AUTO_INCREMENT,
    `title` varchar (150) COLLATE utf8_spanish_ci DEFAULT NULL,
    `body` текст COLLATE utf8_spanish_ci ЖОК,
    `url` varchar (150) COLLATE utf8_spanish_ci ЖОК,
    `class` varchar (45) COLLATE utf8_spanish_ci NULL DEFAULT NOT 'маалымат',
    `start` varchar (15) COLLATE utf8_spanish_ci ЖОК,
    `end` varchar (15) COLLATE utf8_spanish_ci ЖОК,
    БАШКЫ АЧкыч (`id ')
    ) ENGINE = InnoDB DEFAULT CHARSET = utf8 COLLATE = utf8_spanish_ci;
    / *! 40101 SET character_set_client = @saved_cs_client * /;

    -
    - "иш-чаралары" үчүн маалыматтарды демпингдөө
    -

    ТАБЛИЛДЕРДИ БУЛПОО `окуялар` ЖАЗУУ;
    / *! 40000 ALTER TABLE `events` ӨЧҮРҮҮ АЧКЫЧТАРЫ * /;
    / *! 40000 ALTER TABLE `events` ENABLE KEYS * /;
    ТАБЛИЦАЛАРДЫ АЧУУ;
    / *! 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 * /;

    - Таштанды 2014-05-31 14:38:23 бүттү

  8.   juan77 ал мындай деди:

    салам миголор JSON дата форматын өзгөртүүнүн бир дагы жолу бар

  9.   гиселабра ал мындай деди:

    Жылнаама абдан жакшы, жаңы иш-чараны кошкондо гана, башында жана аягында демейки шартта турган күн англис тилинде болот, аны кантип испанчага алмаштырсам болот? Бул DD / MM / YYYY болмок. Сизге чоң рахмат жана салам

  10.   Ник ал мындай деди:

    Салам, календарь абдан жакшы, бирок күндү жаңыртууда ал календарда дароо чагылдырылбайт. Мен эмне кыла алам ?

    Менде дагы бир көйгөй бар, кантип бардык пункттарды ай сайын көрүнүп турушу керек, квадратты чоңойтууга болобу? бир күнгө эмне туура келет?

  11.   Alex ал мындай деди:

    Менде көйгөй бар, мисалды жүктөөдө ал жакшы иштейт, бирок аны онлайн серверге жүктөгөндө ал мага календардан гана баскычтардан эч нерсе көрсөтпөйт. Сураныч, серверде эмне болушу мүмкүн же эмне туура эмес, аны оңдоо үчүн.