JQuery के साथ बूटस्ट्रैप कैलेंडर

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

हम तेजी से घूमने वाले विशाल समुदाय से प्रभावित हैं बूटस्ट्रैप, एक प्रसिद्ध सीएसएस फ्रेमवर्क , ट्विटर द्वारा बनाया गया। इस बार मैं आपके लिए बूटस्ट्रैप-आधारित कैलेंडर प्रस्तुत करता हूं जावास्क्रिप्ट और JQuery के साथ क्रमादेशित, मैं कैलेंडर के संचालन के बारे में विस्तार से बताऊंगा और मैं कुछ ट्रिक्स और सुधार जोड़ूंगा जो आप कर सकते हैं।

यह बूटस्ट्रैप कैलेंडर एक साफ डिजाइन है और पूरी तरह से है उत्तरदायी, यह सभी उपकरणों से अच्छा लगेगा! इसमें ए भी शामिल है 7 से अधिक भाषाओं में अनुवाद और सभी प्रत्येक देश की त्योहारों की तारीखों को हाइलाइट और नोट किया जाता है। एक विलासितापूर्ण!

इस बूटस्ट्रैप कैलेंडर का संचालन कुछ जटिल है, यह शुरुआत में JSON फ़ाइल से उपयोगकर्ता की तारीखें निकालता है, लेकिन, विशेष रूप से Creativos Onlineमैं समझाऊंगा कैसे MYSQL डेटाबेस से घटनाओं को निकालें किसी भी प्रणाली में इसके सही कार्यान्वयन के लिए।

ज्ञात डेटाबेस सिस्टम

ज्ञात डेटाबेस सिस्टम

आवेदन की मुख्य फाइलों के कार्य:

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

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

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

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

घटनाक्रम.JSON.PHP

  • निम्न डेटा वाले ईवेंट की सूची:
    • आईडी: घटना पहचानकर्ता
    • शीर्षक: कार्यक्रम का शीर्षक
    • यूआरएल: घटना url
    • वर्ग: बाद के रंगों के लिए ईवेंट प्रकार (जानकारी | चेतावनी |…)।
    • शुरू: प्रारंभ तिथि
    • समाप्त: निष्कासन तिथि

एपीपी.जेएस

  • चर जो अनुप्रयोग कॉन्फ़िगरेशन को संग्रहीत करते हैं।
  • अतिरिक्त JQuery कार्य करता है

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

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

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

  • कैलेंडर शैलियाँ
  • इवेंट सूची शैलियों
  • अन्य उपकरणों के लिए कैलेंडर शैलियों

डेटाबेस से ईवेंट निकालें

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

?>

जीठब | बूटस्ट्रैप कैलेंडर

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

अधिक जानें | बूटस्ट्रैप: सीएसएस फ्रेमवर्क


अपनी टिप्पणी दर्ज करें

आपका ईमेल पता प्रकाशित नहीं किया जाएगा। आवश्यक फ़ील्ड के साथ चिह्नित कर रहे हैं *

*

*

  1. डेटा के लिए जिम्मेदार: मिगुएल elngel Gatón
  2. डेटा का उद्देश्य: नियंत्रण स्पैम, टिप्पणी प्रबंधन।
  3. वैधता: आपकी सहमति
  4. डेटा का संचार: डेटा को कानूनी बाध्यता को छोड़कर तीसरे पक्ष को संचार नहीं किया जाएगा।
  5. डेटा संग्रहण: ऑकेंटस नेटवर्क्स (EU) द्वारा होस्ट किया गया डेटाबेस
  6. अधिकार: किसी भी समय आप अपनी जानकारी को सीमित, पुनर्प्राप्त और हटा सकते हैं।

  1.   डेविड जेड कहा

    जैसा कि मैंने कोड सर्जियो की जांच की

    1.    सर्जियो रोडेनस कहा

      कोड पहले से ही जांचा हुआ है! केवल एक चीज, आपको अपने डेटाबेस में निम्नलिखित क्षेत्रों के साथ तालिका «ईवेंट्स» बनाना होगा: {आईडी | घर | अंत | नाम | वर्ग | url} और अपने डेटाबेस तक पहुँच को कॉन्फ़िगर करें!

      1.    रोस कहा

        मैंने दूसरों के लिए उन चर को बदल दिया है, और इसने मुझे अपने डेटाबेस में घटना को जोड़ने की अनुमति दी है, लेकिन मैं इसे कैलेंडर में परिलक्षित नहीं देखता। और जिस दिन मैं कैलेंडर पर क्लिक करता हूं, उसके आधार पर मैं घटनाओं का डेटा कैसे पुनर्प्राप्त कर सकता हूं?

  2.   जोस लुइस ज़मुदियो (@JoseZami) कहा

    घटनाओं के निर्माण और प्रदर्शन करने के लिए, तो आपको एक डेटाबेस बनाना होगा, लेकिन क्या बात है कि मैं घटनाओं को इसमें जोड़ सकता हूं और डिफ़ॉल्ट रूप से भाषा स्पेनिश है क्योंकि यह डिफ़ॉल्ट रूप से अंग्रेजी के रूप में परिभाषित किया गया है

    1.    सर्जियो रोडेनस कहा

      भाषा को स्पेनिश में डिफ़ॉल्ट करने के लिए, कैलेंडर भाषा में अंग्रेजी में उन लोगों के साथ स्पेनिश भाषा में मौजूदा तार को बदलना सबसे अच्छा है। जेएस फाइल। हालांकि, अन्य नीटर तरीके हैं, आप उन्हें इस पोस्ट से जुड़ी स्क्रिप्ट की मुख्य वेबसाइट या गितुब समुदाय में पा सकते हैं।
      इसके अलावा, मैं कुछ हफ्तों में एक नई पोस्ट अपलोड करने का प्रयास करूंगा जहां मैं समझाऊंगा कि डेटाबेस में घटनाओं का सम्मिलन कैसे बनाया जाए।

  3.   जोस लुइस ज़मुदियो (@JoseZami) कहा

    बहुत बहुत धन्यवाद, मैं घटनाओं डालने के लिए पोस्ट की सराहना करूंगा :)

  4.   याईर कहा

    हैलो मुझे एक समस्या है जब मैं डेटाबेस से अपना डेटा कनेक्ट करने और निकालने के लिए सब कुछ ठीक करता हूं तो यह मुझे कोई ईवेंट नहीं दिखाता है

  5.   डिएगो कहा

    डेटाबेस में ईवेंट नहीं डालें

  6.   Gonza कहा

    क्या आप पोस्ट कर सकते हैं कि ईवेंट कैसे डालें? आरंभ और अंत फ़ील्ड में यह किस प्रकार का डेटा है? टाइमस्टैम्प? "0" बचे हुए हैं, मुझे घटनाओं को संपादित करने और सक्षम करने की आवश्यकता है। धन्यवाद

  7.   गुरु कहा

    DATABASE क्रिएट करें यदि 'बूटस्ट्रैप_कैलेन्डर' / * नहीं है तो? 40100 DEFAULT CHARACTER SET utf8 COLLATE utf8_spanish_ci * /;
    उपयोग करें
    - Win10.13 (x5.6.13) के लिए MySQL डंप 32 डिस्ट्रिब्यूट 86,
    -
    - होस्ट: 127.0.0.1 डेटाबेस: बूटस्ट्रैप_कैलेन्डर
    ———————————————————————————
    - सर्वर संस्करण 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 * /;
    / *; ४०१०१ सेट नेम्स utf40101 * /;
    / *! 40103 SET @OLD_TIME_ZONE = @@ TIME_ZONE * /;
    / *! 40103 सेट 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 * /;

    -
    - टेबल `घटनाओं` के लिए टेबल संरचना
    -

    DROP TABLE IF EXISTS `घटनाओं`;
    / *; 40101 SET @saved_cs_client = @@ character_set_client * /;
    / *; 40101 SET character_set_client = utf8 * /;
    बनाने की घटना `घटनाओं` (
    `आईडी` इंट (10) अहस्ताक्षरित नहीं पूर्ण AUTO_INCREMENT,
    `शीर्षक` वर्चर (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 NOT NULL DEFAULT 'जानकारी',
    `start` varchar (15) COLLATE utf8_spanish_ci नहीं है,
    `अंत` वर्चर (15) COLLATE utf8_spanish_ci नहीं,
    प्राथमिक कुंजी (`आईडी`)
    ) इंजन = InnoDB DEFAULT CHARSET = utf8 COLLATE = utf8_spanish_ci;
    / *! 40101 SET character_set_client = @ saved_cs_client * /;

    -
    - तालिका `घटनाओं` के लिए डेटा डंपिंग
    -

    लॉक टेबल `घटनाओं` राइट;
    / *; 40000 से अधिक टेबल `घटनाओं` अक्षम कुंजी * /;
    / *; 40000 से अधिक टेबल `घटनाओं` सक्षम कुंजी * /;
    अनलॉक टैब;
    / *! 40103 सेट TIME_ZONE = @ OLD_TIME_ZONE * /;

    / *! 40101 सेट SQL_MODE = @ OLD_SQL_MODE * /;
    / *; 40014 SET FOREIGN_KEY_CHECKS = @ OLD_FOREIGN_KEY_CHECKS * /;
    / *; 40014 SET UNIQUE_CHECKS = @ OLD_UNIQUE_CHECKS * /;
    / *; 40101 सेट करें CHARACTER_SET_CLIENT = @ OLD_CHARACTER_SET_CLIENT * /;
    / *; 40101 सेट करें CHARACTER_SET_RESULTS = @ OLD_CHARACTER_SET_RESULTS * /;
    / *! 40101 सेट करें 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.   एलेक्स कहा

    मुझे समस्या यह है कि स्थानीय रूप से उदाहरण लोड करते समय यह पूरी तरह से काम करता है, लेकिन जब मैं इसे एक ऑनलाइन सर्वर पर अपलोड करता हूं तो यह मुझे कैलेंडर से केवल बटन पर कुछ भी नहीं दिखाता है। कृपया इसे ठीक करने के लिए सर्वर के साथ कोई भी विचार या क्या गलत हो सकता है।