JQuery सह बूटस्ट्रॅप कॅलेंडर

बूटस्ट्रॅप-कॅलेंडर

आजूबाजूला फिरणा the्या अफाट समुदायामुळे आपण अधिकाधिक प्रभावित झालो आहोत बूटस्ट्रॅप, एक सुप्रसिद्ध सीएसएस फ्रेमवर्क , ट्विटर द्वारा निर्मित. यावेळी मी एक बूटस्ट्रॅप-आधारित कॅलेंडर सादर करतो जावास्क्रिप्ट आणि JQuery सह प्रोग्राम केलेले, मी कॅलेंडरच्या ऑपरेशनचा काही तपशील तपशीलवार देखील सांगेन आणि आपण करू शकणार्‍या काही युक्त्या आणि सुधारणा मी जोडेल.

या बूटस्ट्रॅप कॅलेंडरमध्ये एक स्वच्छ डिझाइन आहे आणि पूर्णपणे आहे प्रतिसाद, ते सर्व उपकरणांमधून चांगले दिसेल! त्यात ए 7 पेक्षा जास्त भाषांमध्ये अनुवाद आणि सर्व प्रत्येक देशाच्या सणाच्या तारखा ठळकपणे नमूद केल्या जातात. एक लक्झरी!

या बूटस्ट्रॅप कॅलेंडरचे ऑपरेशन काहीसे क्लिष्ट आहे, ते सुरुवातीला JSON फाईलमधून वापरकर्त्याच्या तारखा काढते, परंतु केवळ वापरकर्त्यांसाठी Creativos Onlineकसे ते मी समजावून सांगेन एमवायएसक्यूएल डेटाबेसमधून कार्यक्रम काढा कोणत्याही सिस्टीमच्या परिपूर्ण अंमलबजावणीसाठी.

ज्ञात डेटाबेस प्रणाली

ज्ञात डेटाबेस प्रणाली

अनुप्रयोगाच्या मुख्य फायलींची कार्येः

INDEX.HTML

  • बूटस्ट्रॅप 2.3.2 लोड करणे
  • कॅलेंडर डिझाइन
  • घटनांची यादी
  • कॅलेंडर नेव्हिगेट करत आहे
  • भिन्न कॅलेंडर दृश्ये (दिवस / आठवडा / महिना / वर्ष)
  • जेएस मध्ये अर्ज लोड करीत आहे
  • भाषा निवड

इंडेक्स-बीएस 3.एचटीएमएल

  • बूटस्ट्रॅप 3.0 लोड करणे
  • कॅलेंडर डिझाइन
  • कार्यक्रम यादी
  • कॅलेंडर नेव्हिगेट करत आहे
  • भिन्न कॅलेंडर दृश्ये (दिवस / आठवडा / महिना / वर्ष)
  • जेएस मध्ये अर्ज लोड करीत आहे
  • भाषा निवड

इव्हेंट्स.जेसन / पीएचपी

  • खालील डेटासह इव्हेंटची सूचीः
    • id: कार्यक्रम अभिज्ञापक
    • शीर्षक: कार्यक्रमाचे शीर्षक
    • यूआरएलः कार्यक्रमाची url
    • वर्ग: त्यानंतरच्या रंगांसाठी इव्हेंट प्रकार (माहिती | चेतावणी |…).
    • प्रारंभः प्रारंभ तारीख
    • समाप्त: समाप्तीची तारीख

एपीपी.जेएस

  • अनुप्रयोग सेटिंग्ज संचयित करणारे व्हेरिएबल्स
  • अतिरिक्त JQuery कार्ये

कॅलेंडर.जे.एस.

  • मुख्य अनुप्रयोग सेटिंग्ज
  • कॅलेंडरची मुख्य कार्ये
  • कार्यक्रमांचा माहिती आणि माहिती
  • उत्सवाच्या तारखा
  • भाषा लोड करीत आहे
  • कार्यक्रम सूची लोड करीत आहे
  • भिन्न कॅलेंडर दृश्ये लोड करीत आहे (दिवस / आठवडा / महिना / वर्ष)

कॅलेंडर.सीएसएस

  • कॅलेंडर शैली
  • कार्यक्रम सूची शैली
  • इतर डिव्हाइससाठी कॅलेंडर शैली

डेटाबेसमधून कार्यक्रम काढा

एमवायएसक्यूएल डेटाबेसमधून इव्हेंट्स काढण्यासाठी आपण फाईलच्या ओळी बदलू इव्हेंट.जसन.पीपीपी पोर:

<?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));

?>

गीथब | बूटस्ट्रॅप कॅलेंडर

डाउनलोड | बूटस्ट्रॅप कॅलेंडर

अधिक माहिती | बूटस्ट्रॅप: सीएसएस फ्रेमवर्क


आपली टिप्पणी द्या

आपला ई-मेल पत्ता प्रकाशित केला जाणार नाही. आवश्यक फील्ड चिन्हांकित केले आहेत *

*

*

  1. डेटा जबाबदार: मिगुएल Áन्गल गॅटन
  2. डेटाचा उद्देशः नियंत्रण स्पॅम, टिप्पणी व्यवस्थापन.
  3. कायदे: आपली संमती
  4. डेटा संप्रेषण: कायदेशीर बंधन वगळता डेटा तृतीय पक्षास कळविला जाणार नाही.
  5. डेटा संग्रहण: ओकेन्टस नेटवर्क (EU) द्वारा होस्ट केलेला डेटाबेस
  6. अधिकारः कोणत्याही वेळी आपण आपली माहिती मर्यादित, पुनर्प्राप्त आणि हटवू शकता.

  1.   डेव्हिड झेड म्हणाले

    मी सर्जिओ कोड तपासतो

    1.    सर्जिओ रोडेनास म्हणाले

      कोड आधीच तपासलेला आहे! फक्त एक गोष्ट, आपण आपल्या फील्डमध्ये खालील फील्डसह डेटाबेसमध्ये टेबल «कार्यक्रम create तयार कराव्यात: {id | मुख्यपृष्ठ | शेवट | नाव | वर्ग | url} आणि आपल्या डेटाबेसमध्ये प्रवेश कॉन्फिगर करा!

      1.    ROS म्हणाले

        मी हे बदल इतरांसाठी बदलले आहेत आणि यामुळे मला हा कार्यक्रम माझ्या डेटाबेसमध्ये जोडण्याची परवानगी मिळाली आहे, परंतु हे कॅलेंडरमध्ये प्रतिबिंबित होत नाही. आणि मी दिनदर्शिकेवर क्लिक केल्याच्या दिवशी मी घटनांचा डेटा कसा पुनर्प्राप्त करू शकतो?

  2.   जोसे लुईस जमुडिओ (@ जोसेझमी) म्हणाले

    इव्हेंट्सची निर्मिती करणे आणि करणे यासाठी डेटाबेस तयार करणे आवश्यक आहे, परंतु त्यातून मी घटनांमध्ये समाविष्ट करू शकतो आणि डीफॉल्टनुसार भाषा स्पॅनिश आहे कारण ती इंग्रजी म्हणून डीफॉल्टनुसार परिभाषित केली जाते.

    1.    सर्जिओ रोडेनास म्हणाले

      भाषेला स्पॅनिशमध्ये डीफॉल्ट बनविण्यासाठी, स्पॅनिश भाषेच्या फाईलमधील विद्यमान तारांना कॅलेंडर.js फाईलमधील इंग्रजी असलेल्या जागी पुनर्स्थित करणे चांगले. तथापि, तेथे आणखी काही सुबक पद्धती आहेत, आपण या पोस्टशी संलग्न असलेल्या स्क्रिप्टच्या मुख्य वेबसाइटवर किंवा गीथब समुदायात शोधू शकता.
      तसेच, मी काही आठवड्यांत नवीन पोस्ट अपलोड करण्याचा प्रयत्न करेन जिथे डेटाबेसमधील इव्हेंट्स समाविष्ट करणे कसे तयार करावे याबद्दल मी स्पष्ट करतो.

  3.   जोसे लुईस जमुडिओ (@ जोसेझमी) म्हणाले

    मनापासून धन्यवाद, कार्यक्रम समाविष्ट करण्यासाठी मी पोस्टचे कौतुक करेन :)

  4.   जेयर म्हणाले

    हॅलो मला एक समस्या आहे जेव्हा मी डेटाबेसमधून माझा डेटा कनेक्ट करण्यासाठी आणि काढण्यासाठी सर्व काही निश्चित करतो तेव्हा तो मला कोणताही कार्यक्रम दर्शवित नाही

  5.   दिएगो म्हणाले

    डेटाबेसमध्ये इव्हेंट समाविष्ट करत नाही

  6.   गोंझा म्हणाले

    आपण इव्हेंट्स कसे घालायचे ते पोस्ट करू शकाल? प्रारंभ आणि शेवटच्या शेतात, तो कोणत्या प्रकारचा डेटा आहे? टाइमस्टॅम्प? "0" शिल्लक, मला समाविष्ट करणे आवश्यक आहे आणि कार्यक्रम संपादित करण्यास सक्षम असणे आवश्यक आहे. धन्यवाद

  7.   थर्स म्हणाले

    अस्तित्त्वात नसल्यास डेटाबेस तयार करा `बूटस्ट्रॅप_कलेंडर` / *!
    `बूटस्ट्रॅप_कलेंडर` वापरा;
    - विन 10.13 (x5.6.13) साठी मायएसक्यूएल डंप 32 86 वितरीत करा
    -
    - होस्टः 127.0.0.1 डेटाबेस: बूटस्ट्रॅप_कॅलेंडर
    -
    - सर्व्हर आवृत्ती 5.5.27

    / *! 40101 SET @OLD_CHARACTER_SET_CLIENT = @ CHARACTER_SET_CLIENT * /;
    / *! 40101 SET @OLD_CHARACTER_SET_RE صلاحTS = @@ CHARACTER_SET_RE صلاحts * /;
    / *! 40101 SET @OLD_COLLATION_CONNECTION = @@ COLLATION_CONNECTION * /;
    / *! 40101 सेट नावे 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 = @@ विदेशी विदेश_केई_ CHECKS, फॉरेग_केई_एचईसीईके = 0 * /;
    / *! 40101 SET @OLD_SQL_MODE = @@ एसक्यूएल_मोड, एसक्यूएल_मोडे = 'नाही_अटो_व्हॅलयू_कॉन_झेरो' * / /;
    / *! 40111 SET @OLD_SQL_NOTES = @@ एस क्यू एल_NOTES, एस क्यू एल_NOTES = 0 * /;

    -
    - टेबल structure कार्यक्रम` साठी सारणी रचना
    -

    अस्तित्त्वात असल्यास सारणी ड्रॉप करा `कार्यक्रम`;
    / *! 40101 SET @saved_cs_client = @@ कॅरेक्टर_सेट_क्लीएंट * /;
    / *! 40101 SET कॅरेक्टर_सेट_क्लीएंट = utf8 * /;
    सारणी तयार करा `कार्यक्रम` (
    `आयडी इंट (10) स्वाक्षरीकृत नाही स्वत: चे प्रमाण,
    `शीर्षक- वर्णचर (१ )०) कॉल अप्ट 150_स्पॅनिश_सी निकट,
    `मुख्य भाग मजकूर कॉल करा utf8_spane_ci शून्य नाही,
    `url` varchar (१ )०) कॉल utt150_spane_ci नाही,
    `वर्ग` वार्चर () 45) कॉल करा utf8_spane_ci नाही 'माहिती' गमावू,
    `स्टार्ट वार्चर (15) कॉल करा utf8_spane_ci NULL नाही,
    `end` varchar (15) कॉल utt8_spane_ci NULL नाही,
    प्राथमिक की (`id`)
    ) ENGINE = InnoDB DEFAULT CHARSET = utf8 COLLATE = utf8_spanish_ci;
    / *! 40101 SET कॅरेक्टर_सेट_क्लीएंट = @ सेवेड_सीएस_क्लियंट * /;

    -
    - सारणी `कार्यक्रम` साठी डम्पिंग डेटा
    -

    लॉक सारण्या `कार्यक्रम- लिहा;
    / *! 40000 ALTER TABLE `ઘટના- अक्षम कीज * /;
    / *! 40000 ALTER TABLE `ઘટના- सक्षम की * *;
    सारण्या अनलॉक करा;
    / *! 40103 SET TIME_ZONE = @ OLD_TIME_ZONE * /;

    / *! 40101 SET SQL_MODE = @ OLD_SQL_MODE * /;
    / *! 40014 SET FOREIGN_KEY_CHECKS = @ OLD_FOREIGN_KEY_CHECKS * /;
    / *! 40014 SEI UNIQUE_CHECKS = @ OLD_UNIQUE_CHECKS * /;
    / *! 40101 SET CHARACTER_SET_CLIENT = @ OLD_CHARACTER_SET_CLIENT * /;
    / *! 40101 SET CHARACTER_SET_RE صلاحTS = @ OLD_CHARACTER_SET_RE صلاحts * /;
    / *!
    / *! 40111 SET SQL_NOTES = @ OLD_SQL_NOTES * /;

    - डंप 2014-05-31 14:38:23 रोजी पूर्ण झाला

  8.   जुआन 77 म्हणाले

    हॅलो मिगोसमध्ये जेएसओएन तारीख स्वरूप बदलण्याचा कोणताही मार्ग आहे

  9.   गिसेलाब्रा म्हणाले

    कॅलेंडर खूप चांगले आहे, जेव्हा एखादी नवीन घटना सुरुवातीस आणि शेवटी इंग्रजी स्वरूपात घेतली जाते त्या तारखेस ती तारीख जोडते तेव्हाच मी ते स्पॅनिशमध्ये कसे बदलू? तो डीडी / एमएम / वायवायवाय असेल. खूप खूप धन्यवाद आणि शुभेच्छा

  10.   Fabian म्हणाले

    नमस्कार, कॅलेंडर खूप चांगले आहे, परंतु तारीख अद्यतनित करताना ते कॅलेंडरमध्ये तत्काळ प्रतिबिंबित होत नाही. मी काय करू शकता ?

    मला आणखी एक अडचण आहे, मासिक दृश्यात मी सर्व बिंदू कसे प्रदर्शित करू शकतो, चौकोन वाढविणे शक्य आहे काय? एका दिवसाचे काय अनुरुप आहे?

  11.   अॅलेक्स म्हणाले

    मला त्रास आहे की स्थानिक पातळीवर उदाहरण लोड करताना ते उत्तम प्रकारे कार्य करते परंतु जेव्हा मी ते ऑनलाइन सर्व्हरवर अपलोड करतो तेव्हा ते मला कॅलेंडरमधून काहीही दर्शवित नाही, फक्त बटणे. कृपया निराकरण करण्यासाठी सर्व्हरमध्ये काय असू शकते किंवा काय अयोग्य आहे याची काही कल्पना करा.