Kalẹnda Bootstrap pẹlu JQuery

bootstrap-kalẹnda A ni itara siwaju sii nipasẹ agbegbe nla ti o yika Bootstrap, ilana CSS ti a mọ daradara , ti a ṣẹda nipasẹ Twitter. Ni akoko yii Mo mu kalẹnda orisun Bootstrap kan fun ọ ti ṣe eto pẹlu Javascript ati JQueryNi afikun, Emi yoo ṣe alaye ni apakan apakan ti iṣẹ ti kalẹnda ati pe Emi yoo ṣafikun diẹ ninu awọn ẹtan ati awọn ilọsiwaju ti o le ṣe.

Kalẹnda Bootstrap yii ni apẹrẹ ti o mọ ati pe o jẹ odidi idahun, yoo dara dara lati gbogbo awọn ẹrọ! O tun ṣafikun a itumọ si diẹ sii ju awọn ede 7 ati gbogbo awọn ọjọ ajọdun ti orilẹ-ede kọọkan ni a ṣe afihan ati akiyesi. Igbadun kan!

Iṣiṣẹ ti Kalẹnda Bootstrap yii jẹ ohun ti o nira pupọ, o fa awọn ọjọ olumulo kuro lati faili JSON lakoko, ṣugbọn, iyasọtọ fun awọn olumulo Ayelujara ti Creativos, Emi yoo ṣalaye bi jade awọn iṣẹlẹ lati inu ibi ipamọ data MYSQL kan fun imuse pipe ni eyikeyi eto.

Eto Database ti a mọ daradara

Eto Database ti a mọ daradara

Awọn iṣẹ ti awọn faili akọkọ ti ohun elo naa:

INDEX.HTML

  • Bootstrap 2.3.2 ikojọpọ
  • Apẹrẹ Kalẹnda
  • Akojọ awọn iṣẹlẹ
  • Lilọ kiri ni Kalẹnda
  • Awọn wiwo Kalẹnda oriṣiriṣi (Ọjọ / Osu / Oṣu / Odun)
  • Ikojọpọ ohun elo ni JS
  • Aṣayan ede

IWE-BS3.HTML

  • Bootstrap 3.0 ikojọpọ
  • Apẹrẹ Kalẹnda
  • Akojọ iṣẹlẹ
  • Lilọ kiri ni Kalẹnda
  • Awọn wiwo kalẹnda oriṣiriṣi (Ọjọ / Osu / Oṣu / Odun)
  • Ikojọpọ ohun elo ni JS
  • Aṣayan ede

Iṣẹlẹ.JSON.PHP

  • Atokọ Awọn iṣẹlẹ pẹlu data atẹle:
    • id: idanimọ iṣẹlẹ
    • akọle: akọle iṣẹlẹ
    • URL: url ti iṣẹlẹ
    • kilasi: iru iṣẹlẹ (alaye | ikilọ |…) fun awọn awọ atẹle.
    • bẹrẹ: ibẹrẹ ọjọ
    • ipari: ọjọ ipari

APP.JS

  • Awọn oniyipada ti o tọju iṣeto ohun elo naa.
  • Awọn iṣẹ JQuery Afikun

KALENDAR.JS

  • Awọn eto elo akọkọ
  • Awọn iṣẹ akọkọ ti Kalẹnda
  • Isediwon ati Itọju awọn iṣẹlẹ
  • Awọn ọjọ ajọdun
  • Ede Loading
  • Ikojọpọ akojọ Awọn iṣẹlẹ
  • Ikojọpọ awọn wiwo Kalẹnda oriṣiriṣi (Ọjọ / Osu / Oṣu / Odun)

CALENDAR.CSS

  • Awọn aza Kalẹnda
  • Awọn aza akojọ iṣẹlẹ
  • Awọn aza kalẹnda fun awọn ẹrọ miiran

Fa awọn iṣẹlẹ jade lati ibi ipamọ data kan

Lati jade awọn iṣẹlẹ lati inu ibi ipamọ data MYSQL kan a yoo ropo awọn ila ti faili naa awọn iṣẹlẹ.json.php nipasẹ:

<?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 | Kalẹnda Bootstrap

Ṣe igbasilẹ | Kalẹnda Bootstrap

Alaye siwaju sii | Bootstrap: Ilana CSS


Awọn akoonu ti nkan naa faramọ awọn ilana wa ti awọn ilana olootu. Lati jabo aṣiṣe kan tẹ nibi.

Awọn asọye 14, fi tirẹ silẹ

Fi ọrọ rẹ silẹ

Adirẹsi imeeli rẹ yoo ko le ṣe atejade. O beere aaye ti wa ni samisi pẹlu *

*

*

  1. Lodidi fun data naa: Miguel Ángel Gatón
  2. Idi ti data naa: SPAM Iṣakoso, iṣakoso ọrọ asọye.
  3. Ofin: Iyọọda rẹ
  4. Ibaraẹnisọrọ data: Awọn data kii yoo ni ifọrọhan si awọn ẹgbẹ kẹta ayafi nipasẹ ọranyan ofin.
  5. Ibi ipamọ data: Alaye data ti o gbalejo nipasẹ Awọn nẹtiwọọki Occentus (EU)
  6. Awọn ẹtọ: Ni eyikeyi akoko o le ni opin, gba pada ki o paarẹ alaye rẹ.

  1.   David Z wi

    bi mo ṣe ṣayẹwo koodu Sergio

    1. Koodu ti wa ni ṣayẹwo tẹlẹ! Ohun kan ṣoṣo, o ni lati ṣẹda tabili «awọn iṣẹlẹ» ninu ibi ipamọ data rẹ pẹlu awọn aaye wọnyi: {id | ile | ipari | orukọ | kilasi | url} ati tunto iraye si ibi ipamọ data rẹ!

      1.    ros wi

        Mo ti yipada awọn oniyipada wọnyẹn fun awọn miiran, ati pe o ti gba mi laaye lati ṣafikun iṣẹlẹ si ibi ipamọ data mi, ṣugbọn Emi ko rii pe o farahan ninu kalẹnda naa. Ati bawo ni MO ṣe le gba data ti awọn iṣẹlẹ pada da lori ọjọ ti Mo tẹ lori kalẹnda naa?

  2. Lati ṣe ati ṣe awọn ẹda ti awọn iṣẹlẹ, lẹhinna o gbọdọ ṣẹda iwe data kan, ṣugbọn kini aaye ni pe MO le fi awọn iṣẹlẹ kun si rẹ ati bi aiyipada ede jẹ ede Spani nitori o ti ṣalaye bi Gẹẹsi nipasẹ aiyipada

    1. Lati ṣe aiyipada ede si Ilu Sipeeni, o dara julọ lati rọpo awọn okun to wa tẹlẹ ninu faili ede Spani pẹlu awọn ti o wa ni Gẹẹsi ninu faili kalẹnda.js. Sibẹsibẹ, awọn ọna imunra miiran wa, o le wa wọn lori oju opo wẹẹbu akọkọ ti iwe afọwọkọ tabi ni agbegbe Github, ti o sopọ mọ ifiweranṣẹ yii.
      Pẹlupẹlu, Emi yoo gbiyanju lati gbejade ifiweranṣẹ tuntun ni awọn ọsẹ diẹ nibiti emi yoo ṣe alaye bi o ṣe ṣẹda ifibọ awọn iṣẹlẹ ni ibi ipamọ data.

  3. O ṣeun pupọ, Emi yoo ni riri lori ifiweranṣẹ lati fi sii awọn iṣẹlẹ :)

  4.   jairi wi

    hello Mo ni iṣoro kan nigbati Mo ṣatunṣe ohun gbogbo lati sopọ ki o jade data mi lati inu data ko fihan mi eyikeyi awọn iṣẹlẹ

  5.   diego wi

    ko fi sii iṣẹlẹ ni ibi ipamọ data

  6.   Gonza wi

    Ṣe o le fiweranṣẹ bi o ṣe le fi sii awọn iṣẹlẹ? ni awọn aaye ibẹrẹ ati ipari iru data wo ni? akoko? o wa "0" ti o ku, Mo nilo lati fi sii ati ni anfani lati ṣatunkọ awọn iṣẹlẹ naa. O ṣeun

  7.   Ojobo wi

    Ṣẹda DATABASE TI KO BA ṢE ṢE “bootstrap_calendar` / *!
    LILO “bootstrap_calendar`;
    - MySQL ida 10.13 Pinpin 5.6.13, fun Win32 (x86)
    -
    - Gbalejo: 127.0.0.1 Database: bootstrap_calendar
    - ———————————————————
    - Ẹya olupin 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 Awọn orukọ 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 * /;

    -
    - Eto tabili fun “awọn iṣẹlẹ tabili”
    -

    JU tabili TI o ba wa "iṣẹlẹ";
    / *! 40101 SET @saved_cs_client = @@ character_set_client * /;
    / *! 40101 SET character_set_client = utf8 * /;
    Ṣẹda Tabili "awọn iṣẹlẹ" (
    "id` int (10) ko ṣe iforukọsilẹ KO NULL AUTO_INCREMENT,
    “title` varchar (150) IKOLE utf8_spanish_ci DEFAULT NULL,
    ọrọ body` COLLATE utf8_spanish_ci NOT NULL,
    `url` varchar (150) IKOLE utf8_spanish_ci NOT NULL,
    “class` varchar (45) COLLATE utf8_spanish_ci NOT NULL DEFAULT 'info',
    “start` varchar (15) IKOLE utf8_spanish_ci NOT NULL,
    “end` varchar (15) IKOLE utf8_spanish_ci NOT NULL,
    Koko akọkọ (`id`)
    ) ENGINE = InnoDB DATAULT CHARSET = utf8 COLLATE = utf8_spanish_ci;
    / *! 40101 SET character_set_client = @saved_cs_client * /;

    -
    - Dumping data fun awọn iṣẹlẹ tabili ”
    -

    Awọn tabili titiipa 'awọn iṣẹlẹ' KỌ;
    / *! 40000 ALAGBARA Tabili “awọn iṣẹlẹ`TI Bọtini IDAGBASO * /;
    / *! 40000 TABI tabili TITUN`` iṣẹlẹ
    Awọn tabili AISI;
    / *! 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 * /;

    - Idasonu ti pari ni ọdun 2014-05-31 14:38:23

  8.   juan77 wi

    hello migos wa ni eyikeyi ọna lati yi ọna kika JSON ọjọ pada

  9.   giselabra wi

    Kalẹnda naa dara pupọ, nikan nigbati o ba nfi iṣẹlẹ tuntun kun ọjọ ti o gba mi ni aiyipada mejeeji ni ibẹrẹ ati opin ni ọna kika Gẹẹsi, bawo ni Mo ṣe le yipada si ede Spani? Yoo jẹ DD / MM / YYYY. Mo ṣeun pupọ ati ikini

  10.   Fabian wi

    Kaabo, kalẹnda naa dara pupọ, ṣugbọn nigbati o ba n ṣe imudojuiwọn ọjọ kan ko han lẹsẹkẹsẹ ninu kalẹnda naa. Kini MO le ṣe?

    Mo ni iṣoro miiran bakanna, bawo ni MO ṣe le ṣe ki gbogbo awọn aaye han ni wiwo oṣooṣu, ṣe o ṣee ṣe lati mu ki onigun gbooro pọ si? kini o baamu ni ọjọ kan?

  11.   Alex wi

    Mo ni iṣoro pe ni agbegbe nigbati o ba n ṣajọpọ apẹẹrẹ o ṣiṣẹ ni pipe ṣugbọn nigbati mo ba gbe si olupin ayelujara ko fihan mi ohunkohun lati kalẹnda nikan awọn bọtini. Imọran eyikeyi kini o le jẹ tabi kini aṣiṣe pẹlu olupin lati ṣatunṣe rẹ jọwọ.