JQuery সহ বুটস্ট্র্যাপ ক্যালেন্ডার

বুটস্ট্র্যাপ-ক্যালেন্ডার চারপাশে ঘোরাফেরা করা বিশাল সম্প্রদায় দ্বারা আমরা ক্রমশ মুগ্ধ হয়েছি বুটস্ট্র্যাপ, একটি সুপরিচিত সিএসএস ফ্রেমওয়ার্ক , টুইটার দ্বারা নির্মিত। এবার আমি আপনাকে বুটস্ট্র্যাপ ভিত্তিক ক্যালেন্ডার উপস্থাপন করছি জাভাস্ক্রিপ্ট এবং জ্যাকুয়ারি দিয়ে প্রোগ্রাম করা, আমি ক্যালেন্ডারের অপারেশনের অংশটিও বিশদভাবে বর্ণনা করব এবং আমি কিছু কৌশল এবং উন্নতি করব যা আপনি করতে পারেন।

এই বুটস্ট্র্যাপ ক্যালেন্ডারে একটি পরিষ্কার নকশা রয়েছে এবং এটি সম্পূর্ণরূপে প্রতিক্রিয়াশীল, এটি সমস্ত ডিভাইস থেকে দেখতে ভাল লাগবে! এটি অন্তর্ভুক্ত a 7 টিরও বেশি ভাষায় অনুবাদ এবং সব প্রতিটি দেশের উত্সব তারিখগুলি হাইলাইট এবং উল্লেখ করা হয়। একটি বিলাসিতা!

এই বুটস্ট্র্যাপ ক্যালেন্ডারের কাজটি কিছুটা জটিল, এটি প্রাথমিকভাবে কোনও JSON ফাইল থেকে ব্যবহারকারীর তারিখগুলি বের করে, তবে কেবল ক্রিয়েটিভস অনলাইন ব্যবহারকারীদের জন্য, আমি কীভাবে ব্যাখ্যা করব একটি এমওয়াইএসকিউএল ডেটাবেস থেকে ইভেন্টগুলি বের করুন যে কোনও সিস্টেমে এর নিখুঁত বাস্তবায়নের জন্য।

সুপরিচিত ডাটাবেস সিস্টেম

সুপরিচিত ডাটাবেস সিস্টেম

অ্যাপ্লিকেশনটির প্রধান ফাইলগুলির কাজগুলি:

INDEX.HTML

  • বুটস্ট্র্যাপ ২.৩.২ লোড হচ্ছে
  • ক্যালেন্ডার ডিজাইন
  • ইভেন্ট তালিকা
  • ক্যালেন্ডার নেভিগেট করা হচ্ছে
  • বিভিন্ন ক্যালেন্ডার দর্শন (দিন / সপ্তাহ / মাস / বছর)
  • জেএসে অ্যাপ্লিকেশন লোড হচ্ছে
  • ভাষা নির্বাচন

ইন্ডেক্স-বিএস 3.এইচটিএমএল

  • বুটস্ট্র্যাপ ২.৩.২ লোড হচ্ছে
  • ক্যালেন্ডার ডিজাইন
  • ইভেন্টের তালিকা
  • ক্যালেন্ডার নেভিগেট করা হচ্ছে
  • বিভিন্ন ক্যালেন্ডার দর্শন (দিন / সপ্তাহ / মাস / বছর)
  • জেএসে অ্যাপ্লিকেশন লোড হচ্ছে
  • ভাষা নির্বাচন

ইভেন্টস.জেএসএন.পিএইচপি

  • নিম্নলিখিত তথ্য সহ ইভেন্টগুলির তালিকা:
    • আইডি: ইভেন্ট সনাক্তকারী
    • খেতাব: ইভেন্ট শিরোনাম
    • URL: ইভেন্ট 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));

?>

গিথুব | বুটস্ট্র্যাপ ক্যালেন্ডার

ডাউনলোড | বুটস্ট্র্যাপ ক্যালেন্ডার

আরও তথ্য | বুটস্ট্র্যাপ: সিএসএস ফ্রেমওয়ার্ক


নিবন্ধটির বিষয়বস্তু আমাদের নীতিগুলি মেনে চলে সম্পাদকীয় নীতি। একটি ত্রুটি রিপোর্ট করতে ক্লিক করুন এখানে.

14 মন্তব্য, আপনার ছেড়ে

আপনার মন্তব্য দিন

আপনার ইমেল ঠিকানা প্রকাশিত হবে না। প্রয়োজনীয় ক্ষেত্রগুলি দিয়ে চিহ্নিত করা *

*

*

  1. ডেটার জন্য দায়বদ্ধ: মিগুয়েল অ্যাঞ্জেল গাটান
  2. ডেটার উদ্দেশ্য: নিয়ন্ত্রণ স্প্যাম, মন্তব্য পরিচালনা।
  3. আইনীকরণ: আপনার সম্মতি
  4. তথ্য যোগাযোগ: ডেটা আইনি বাধ্যবাধকতা ব্যতীত তৃতীয় পক্ষের কাছে জানানো হবে না।
  5. ডেটা স্টোরেজ: ওসেন্টাস নেটওয়ার্কস (ইইউ) দ্বারা হোস্ট করা ডেটাবেস
  6. অধিকার: যে কোনও সময় আপনি আপনার তথ্য সীমাবদ্ধ করতে, পুনরুদ্ধার করতে এবং মুছতে পারেন।

  1.   ডেভিড জেড তিনি বলেন

    আমি সার্জিও কোডটি যাচাই করি

    1.    সার্জিও রাডেনাস তিনি বলেন

      কোডটি ইতিমধ্যে পরীক্ষিত! কেবলমাত্র, আপনাকে নীচের ক্ষেত্রগুলি সহ আপনার ডাটাবেসে সারণী «ইভেন্টগুলি create তৈরি করতে হবে: {id | হোম | শেষ | নাম | ক্লাস | url} এবং আপনার ডাটাবেস অ্যাক্সেস কনফিগার!

      1.    Ros তিনি বলেন

        আমি অন্যদের জন্য এই পরিবর্তনগুলি পরিবর্তন করেছি, এবং এটি আমাকে আমার ডাটাবেসে ইভেন্টটি যুক্ত করার অনুমতি দিয়েছে, তবে আমি এটি ক্যালেন্ডারে প্রতিফলিত দেখতে পাচ্ছি না। এবং আমি ক্যালেন্ডারে যে দিন ক্লিক করি তার উপর নির্ভর করে আমি কীভাবে ইভেন্টগুলির ডেটা পুনরুদ্ধার করতে পারি?

  2.   জোস লুইস জামুদিও (@ জোসেমি) তিনি বলেন

    ইভেন্টগুলি তৈরি এবং সম্পাদন করার জন্য একটি ডাটাবেস তৈরি করা আবশ্যক, তবে এটি হ'ল আমি এতে ইভেন্টগুলি যুক্ত করতে পারি এবং ডিফল্টরূপে স্প্যানিশ ভাষায় ভাষা যুক্ত করতে পারি কারণ এটি ডিফল্টরূপে ইংরেজী হিসাবে সংজ্ঞায়িত হয়

    1.    সার্জিও রাডেনাস তিনি বলেন

      স্প্যানিশ ভাষাকে ডিফল্ট করতে, স্পেনীয় ভাষার ফাইলটিতে বিদ্যমান স্ট্রিংগুলিকে ক্যালেন্ডার.জেএস ফাইলে থাকা ইংরেজির সাথে প্রতিস্থাপন করা ভাল। তবে অন্যান্য পরিষ্কার পদ্ধতি রয়েছে, আপনি এগুলি স্ক্রিপ্টের মূল ওয়েবসাইটে বা এই পোস্টের সাথে সংযুক্ত গিথুব সম্প্রদায়টিতে পেতে পারেন।
      এছাড়াও, আমি কয়েক সপ্তাহের মধ্যে একটি নতুন পোস্ট আপলোড করার চেষ্টা করব যেখানে আমি ডেটাবেসগুলিতে ইভেন্টগুলির সন্নিবেশ কীভাবে তৈরি করব তা ব্যাখ্যা করব।

  3.   জোস লুইস জামুদিও (@ জোসেমি) তিনি বলেন

    আপনাকে অনেক ধন্যবাদ, আমি ইভেন্টগুলি সন্নিবেশ করানোর জন্য পোস্টটির প্রশংসা করব :)

  4.   যায়ীরের তিনি বলেন

    হ্যালো আমার একটি সমস্যা আছে যখন আমি ডেটাবেস থেকে আমার ডেটা সংযোগ স্থাপন এবং নিষ্কাশন করার জন্য সবকিছু ঠিক করি এটি কোনও ঘটনা দেখায় না

  5.   দিয়েগো তিনি বলেন

    ডাটাবেসে ইভেন্ট notোকায় না

  6.   গঞ্জা তিনি বলেন

    আপনি কীভাবে ইভেন্টগুলি toোকাতে পারবেন? শুরু এবং শেষ ক্ষেত্রগুলিতে এটি কোন ধরণের ডেটা? টাইমস্ট্যাম্প? "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_RESULTS = @@ CHARACTER_SET_RESULTS * /;
    / *! 40101 SET @OLD_COLLATION_CONNECTION = @@ সংগ্রহ_CONNECTION * /;
    / *! 40101 সেট নামগুলি utf8 * /;
    / *! 40103 SET @OLD_TIME_ZONE = @@ টিআইএম_জোন * /;
    / *! 40103 SET TIME_ZONE = '+ 00:00 ′ * /;
    / *! 40014 SET @OLD_UNIQUE_CHECKS = @@ UNIQUE_CHECKS, UNIQUE_CHECKS = 0 * /;
    / *! 40014 SET @OLD_FOREIGN_KEY_CHECKS = @@ বিদেশী_কি_ইচইএইচসিএইচএস, ফরেইগ_কেই_চেকস = 0 * /;
    /!
    / *! 40111 SET @OLD_SQL_NOTES = @@ এসকিউএল_নোটেস, এসকিউএল_নোটেস = 0 * /;

    -
    - টেবিলের জন্য টেবিল কাঠামো `ইভেন্টস``
    -

    টেবিল ড্রপ যদি উপস্থিত থাকে `ইভেন্ট`;
    / *! 40101 SET @ সেভড_সিএস_সিলেট = @@ অক্ষর_সেট_ক্রিয়েন্ট * /;
    / *! 40101 SET অক্ষর_সেট_স্লিয়েন্ট = utf8 * /;
    টেবিল তৈরি করুন `ইভেন্টস` (
    `id` int (10) স্বাক্ষরিত নন স্বতঃসিদ্ধ না,
    `শিরোনাম` বর্ণাচরণ (150) কল করুন utf8_spane_ci শূন্য,
    `বডি` পাঠ্যটি কল করুন utf8_spanish_ci নাল নয়,
    `url` varchar (150) কল করুন utf8_spane_ci নাল নয়,
    `শ্রেণির বর্ণ (45) কল করুন utf8_spane_ci 'তথ্য' রক্ষা করবেন না,
    `স্টার্ট` বর্ণাবার (15) কল করুন utf8_spane_ci নল নয়,
    `শেষ বর্ণমালা (15) কল করুন utf8_spane_ci নল নয়,
    প্রাথমিক কী (`id`)
    ) ইঞ্জিন = ইনোডিবি ডিফল্ট চিয়ারস = utf8 কলেজ = utf8_spanish_ci;
    / *! 40101 SET অক্ষর_সেট_স্লিয়েন্ট = @ সংরক্ষিত_সিএস_স্রাবী * /;

    -
    - সারণী `ইভেন্টস` এর জন্য ডেপিং ডেটা`
    -

    লক ট্যাবলেটগুলি `ইভেন্টস` রাইটিং;
    / *! 40000 অল্টার টেবিল `ইভেন্টস - অক্ষম কীগুলি * /;
    / *! 40000 অল্টার টেবিল `ইভেন্টস K কীগুলি সক্ষম করুন * /;
    ট্যাবলেটগুলি আনলক করুন;
    / *! 40103 SET TIME_ZONE = @ OLD_TIME_ZONE * /;

    / *! 40101 এসটি এসকিউএল_মোডি = @ ওলডিএসকিউএল_মোডি * /;
    / *! 40014 SET FOREIGN_KEY_CHECKS = @ ওল্ড_ফোরআইজি_কেই_চেকস * /;
    / *! 40014 SEI UNIQUE_CHECKS = @ OLD_UNIQUE_CHECKS * /;
    / * 40101 SET CHARACTER_SET_CLIENT = @ OLD_CHARACTER_SET_CLIENT * /;
    / *! 40101 SET CHARACTER_SET_RESULTS = @ OLD_CHARACTER_SET_RE صلاحts * /;
    / *! 40101 SET COLLATION_CONNECTION = @ OLD_COLLATION_CONNECTION * /;
    / *! 40111 এসটি এসকিউএল_এনটেস = @ ওলডিএসকিউএল_নোটেস * /;

    - ডাম্প 2014-05-31 14:38:23 এ শেষ হয়েছে

  8.   juan77 তিনি বলেন

    হ্যালো মিগোজগুলি JSON তারিখের ফর্ম্যাটটি পরিবর্তন করার কোনও উপায় আছে

  9.   গিসেলাব্রা তিনি বলেন

    ক্যালেন্ডারটি খুব ভাল, কেবলমাত্র কোনও নতুন ইভেন্টের শুরুতে এবং শেষটি উভয়ভাবে ইংরেজি ফর্ম্যাটে যে তারিখটি ডিফল্টরূপে গ্রহণ করা হয়, যুক্ত করার সময়, আমি কীভাবে এটি স্প্যানিশে পরিবর্তন করব? এটি ডিডি / এমএম / ওয়াইওয়াইওয়াই হবে। আপনাকে অনেক ধন্যবাদ এবং শুভেচ্ছা

  10.   দীর্ঘসূত্রী তিনি বলেন

    হ্যালো, ক্যালেন্ডারটি খুব ভাল তবে কোনও তারিখ আপডেট করার সময় তা ক্যালেন্ডারে তাৎক্ষণিকভাবে প্রতিফলিত হয় না। আমি কি করতে পারি ?

    আমার আরও একটি সমস্যা আছে, আমি কীভাবে সমস্ত পয়েন্টগুলি মাসিক ভিউতে প্রদর্শন করতে পারি, বর্গক্ষেত্রটি বাড়ানো কি সম্ভব? একটি দিনের সাথে কি মিলছে?

  11.   অ্যালেক্স তিনি বলেন

    আমার সমস্যা আছে যে স্থানীয়ভাবে উদাহরণটি লোড করার সময় এটি পুরোপুরি কার্যকর হয় তবে আমি যখন এটি একটি অনলাইন সার্ভারে আপলোড করি তখন এটি ক্যালেন্ডার থেকে আমাকে কিছুই দেখায় না, কেবল বোতামগুলি। এটিকে ঠিক করার জন্য সার্ভারের সাথে কী বা ভুল কী হতে পারে কোনও ধারণা দয়া করে।