JQuery का साथ बुटस्ट्र्याप क्यालेन्डर

बुटस्ट्र्याप-क्यालेन्डर हामी चारैतिर घुम्ने विशाल समुदायबाट बढ्ता प्रभावित छौं बुटस्ट्र्याप, एक प्रसिद्ध CSS फ्रेमवर्क , ट्विटर द्वारा बनाईएको। यस पटक म तपाईंलाई बुटस्ट्र्याप-आधारित क्यालेन्डर प्रस्तुत गर्दछु जाभास्क्रिप्ट र JQuery को साथ प्रोग्राम, म क्यालेन्डरको अपरेशनको विस्तृत अंश पनि वर्णन गर्नेछु र केही युक्तिहरू र सुधारहरू थप गर्दछु जुन तपाईं गर्न सक्नुहुनेछ।

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

यस बुटस्ट्र्याप क्यालेन्डरको अपरेशन केही जटिल छ, यसले प्रयोगकर्ताको मितिहरू सुरुमा JSON फाईलबाट निकाल्छ, तर क्रेटिभास अनलाइन प्रयोगकर्ताहरूका लागि म कसरी व्याख्या गर्ने छु MYSQL डाटाबेसबाट घटनाहरू निकाल्नुहोस् कुनै पनि प्रणालीमा यसको पूर्ण कार्यान्वयनको लागि।

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

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

अनुप्रयोगको मुख्य फाईलहरूको कार्यहरू:

INDEX.HTML

  • बुटस्ट्र्याप २.2.3.2.२ लोड हुँदै
  • क्यालेन्डर डिजाइन
  • कार्यक्रमहरूको सूची
  • पात्रो नेभिगेट गर्दै
  • बिभिन्न पात्रो दृश्य (दिन / हप्ता / महिना / वर्ष)
  • JS मा अनुप्रयोग लोड गर्दै
  • भाषा चयन

INDEX-BS3.HTML

  • बुटस्ट्र्याप २.3.0.२ लोड हुँदै
  • क्यालेन्डर डिजाइन
  • कार्यक्रम सूची
  • पात्रो नेभिगेट गर्दै
  • बिभिन्न पात्रो दृश्य (दिन / हप्ता / महिना / वर्ष)
  • JS मा अनुप्रयोग लोड गर्दै
  • भाषा चयन

EVENTS.JSON.PHP

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

APP.JS

  • चरहरू जुन अनुप्रयोग कन्फिगरेसन भण्डार गर्दछ।
  • अतिरिक्त JQuery प्रकार्यहरू

CALENDAR.JS

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

CALENDAR.CSS

  • क्यालेन्डर शैलीहरू
  • कार्यक्रम सूची शैलीहरू
  • अन्य उपकरणहरूको लागि क्यालेन्डर शैलीहरू

डाटाबेसबाट घटनाहरू निकाल्नुहोस्

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 | बुटस्ट्र्याप क्यालेन्डर

डाउनलोड गर्नुहोस् बुटस्ट्र्याप क्यालेन्डर

अधिक जानकारी | बुटस्ट्र्याप: CSS फ्रेमवर्क


लेखको सामग्री हाम्रो सिद्धान्तहरूको पालना गर्दछ सम्पादकीय नैतिकता। त्रुटि क्लिक गर्न रिपोर्ट गर्नुहोस् यहाँ.

२ टिप्पणीहरू, तपाइँको छोड्नुहोस्

तपाइँको टिप्पणी छोड्नुहोस्

तपाईंको ईमेल ठेगाना प्रकाशित हुनेछैन। आवश्यक फिल्डहरू चिन्ह लगाइएको छ *

*

*

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

  1.   डेभिड जेड भन्यो

    मैले कोड सर्जियो जाँच गर्दा

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

      कोड पहिले नै जाँच गरीएको छ! केवल एक चीज, तपाईंले तालिका create घटनाहरू create निम्न क्षेत्रहरूसँग तपाईंको डाटाबेसमा सिर्जना गर्नुपर्नेछ: {id | घर | अन्त | नाम | वर्ग | url} र तपाईंको डाटाबेसमा पहुँच कन्फिगर गर्नुहोस्!

      1.    ROS भन्यो

        मैले अरूहरूका लागि ती चरहरू परिवर्तन गरें, र यसले मलाई घटनाहरू मेरो डाटाबेसमा थप्न अनुमति दिएको छ, तर म यो क्यालेन्डरमा प्रतिबिम्बित भएको देख्दिन। र म घटनाक्रमको डाटालाई कसरी पुन: प्राप्ति गर्न सक्छु जुन म क्यालेन्डरमा क्लिक गर्छु?

  2. घटनाहरूको सिर्जना गर्न र प्रदर्शन गर्न, त्यसपछि एक डाटाबेस सिर्जना गर्नुपर्दछ, तर यो के हो यो म घटनाहरू थप्न सक्दछु र पूर्वनिर्धारित रूपमा भाषा स्पेनिश हो किनकि यसलाई पूर्वनिर्धारित रूपमा अंग्रेजीमा परिभाषित गरिएको हुन्छ।

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

      भाषालाई स्प्यानिशमा पूर्वनिर्धारित गर्न, स्पेनिश भाषा फाईलमा अवस्थित स्ट्रिंगहरू अ.्ग्रेजीमा भएका क्यालेन्डर। js फाइलमा प्रतिस्थापन गर्नु उत्तम हुन्छ। जे होस्, त्यहाँ अन्य सफा तरीका छन्, तपाईं तिनीहरूलाई यो स्क्रिप्टको मुख्य वेबसाइटमा वा गितुब समुदायमा पाउन सक्नुहुनेछ, जुन यो पोष्टमा संलग्न छ।
      साथै, म केहि हप्तामा नयाँ पोष्ट अपलोड गर्न कोशिस गर्नेछु जहाँ म डाटाबेसमा घटनाहरू सम्मिलित गर्ने तरीका कसरी वर्णन गर्ने छु।

  3. धेरै धेरै धन्यवाद, म घटनाहरू सम्मिलित गर्न पोष्टलाई सराहना गर्छु :)

  4.   जेयर भन्यो

    हेलो मलाई समस्या छ जब म डेटा कनेक्ट गर्न को लागी सबै डेटा ठीक गर्न को लागी डाटाबेस बाट निकाल्छ यसले मलाई कुनै घटनाहरू देखाउँदैन

  5.   डिएगो भन्यो

    डाटाबेसमा घटना घुसाउँदैन

  6.   गोन्जा भन्यो

    के तपाइँ घटनाहरू घुसाउन सक्नुहुन्छ भनेर पोष्ट गर्न सक्नुहुन्छ? सुरूवात र अन्त्य फिल्डहरूमा यो कस्तो प्रकारको डाटा हो? टाइमस्ट्याम्प? "०" बाँकी, मैले ईन्सर्ट गर्न र घटनाहरू सम्पादन गर्न सक्षम हुनु आवश्यक छ। धन्यबाद

  7.   थर्स भन्यो

    डाटाबेस सिर्जना गर्नुहोस् यदि अवस्थित छैन `बुटस्ट्र्याप_ क्यालेन्डर / *!
    USE `bootstrap_cocolate`;
    - MySQL १०.१10.13 वितरण .5.6.13..32.१86, WinXNUMX (xXNUMX) को लागि
    -
    - होस्ट: १२127.0.0.1.०.०.१ डाटाबेस: बुटस्ट्र्याप_कलेन्डर
    - ——————————————————
    - सर्भर संस्करण .5.5.27..XNUMX.२XNUMX

    / *! 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०१०XNUMX SET @OLD_TIME_ZONE = @@ TIME_ZONE * /;
    / *! 40103 SET TIME_ZONE = '+ 00:00 ′ * /;
    / *! 40014००१0 SET @old_UNIQUE_CHECKS = @@ UNIQUE_CHECKS, UNIQUE_CHECKS = ० * /;
    / *! 40014००१0 SET @OLD_FOREIGN_KEY_CHECKS = @@ FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS = ० * /;
    / *! 40101०१०१ SET @OLD_SQL_MODE = @@ SQL_MODE, SQL_MODE = 'NO_AUTO_VALUE_ON_ZERO' * / /;
    / *! 40111०१११ SET @OLD_SQL_NOTES = @@ SQL_NOTES, SQL_NOTES = ० * /;

    -
    - तालिका Table घटनाहरू` का लागि तालिका संरचना
    -

    तालिका ड्रप गर्नुहोस् यदि `घटनाहरू`;
    / *! 40101०१०१ SET @saved_cs_client = @@ वर्ण_सेट_client * /;
    / *! 40101 SET वर्ण_सेट_client = utf8 * /;
    तालिका सिर्जना गर्नुहोस् `घटनाहरू (
    `id` int (10) हस्ताक्षर नगरिएको NULL AUTO_INCREMENT,
    `शीर्षक` varchar (१ 150०) COLLATE utf8_spane_ci DEFULT NULL,
    `बडी` पाठ COLLATE utf8_spane_ci NULL छैन,
    `url` varchar (१ 150०) रद्द गर्नुहोस् utf8_spane_ci NULL,
    `class` varchar () 45) COLLATE utf8_spane_ci NIFL DEFULT 'जानकारी' होइन,
    `start` varchar (१)) रद्द गर्नुहोस् utf15_spane_ci NULL छैन,
    `end` varchar (१)) रद्द गर्नुहोस् utf15_spane_ci NULL,
    प्राथमिक कुञ्जी (`id`)
    ) ENGINE = InnoDB DEFULT CHARSET = utf8 COLLATE = utf8_spनिश_ci;
    / *! 40101०१०१ SET वर्ण_सेट_client = @ सुरक्षित_सीएस_कमानी * /;

    -
    - तालिका `घटना` का लागि डम्पि data डाटा
    -

    लक तालिकाहरू `घटनाहरू- WRITE;
    / *! 40000 ALL TABLE - घटनाहरू - अक्षम कुञ्जी * /;
    / *! 40000 ALL TABLE `घटनाहरू K सक्षम कुञ्जी * /;
    ट्याबहरू अनलक गर्नुहोस्;
    / *! 40103०१०XNUMX 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 COLLATION_CONNECTION = @ OLD_COLLATION_CONNECTION * /;
    / *! 40111०१११ SET SQL_NOTES = @ OLD_SQL_NOTES * /;

    - डम्प २०१-2014-०05-31१ १:14::38:२ on मा सम्पन्न भयो

  8.   juan77 भन्यो

    नमस्ते माइगोस JSON मिति ढाँचा परिवर्तन गर्न कुनै तरिका छ

  9.   giselabra भन्यो

    क्यालेन्डर एकदम राम्रो छ, मात्र जब नयाँ घटना मिति जोड्दछ जब यो पूर्वनिर्धारित रूपमा लिन्छ दुवै सुरु र अन्तमा अंग्रेजी ढाँचामा छ, म कसरी यसलाई स्पेनिशमा परिवर्तन गर्ने? यो DD / MM / YYYY हुनेछ। धेरै धेरै धन्यबाद

  10.   फ्याबियनको भन्यो

    नमस्कार, क्यालेन्डर एकदम राम्रो छ, तर मिति अपडेट गर्ने बित्तिकै यो क्यालेन्डरमा प्रतिबिम्बित हुँदैन। म के गर्न सक्छु ?

    मसँग अर्को समस्या पनि छ, म सबै पोइन्टहरू मासिक दृश्यमा कसरी प्रदर्शन गर्न सक्छु, वर्ग विस्तार गर्न सम्भव छ? के एक दिन संग मेल खान्छ?

  11.   एलेक्स भन्यो

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