Zabuto Calendar 日曆插件使用指南

Zabuto Calendar 日曆插件demo翻譯

• 日曆插件須要依賴於JQuery和Twitter的bootstrap來讓函數正確的運行；在引入javascript和css樣式表後就能夠使用這個插件和庫，而後經過定義一個DOM元素和初始化插件來觀察日曆插件；

　 案例１：
<!-- include jQuery / Bootstrap -->
...
<!-- include the calendar js and css files -->
<script src="../zabuto_calendar.min.js"></script>
<link rel="stylesheet" type="text/css" href="../zabuto_calendar.min.css">

<!-- define the calendar element --> <div id="my-calendar"></div> <!-- initialize the calendar on ready --> <script type="application/javascript"> $(document).ready(function () { $("#my-calendar").zabuto_calendar(); }); </script>

image.png

• 語言設置
  -
  　　你能夠經過以下方式自定義日曆的語言，設置所須要的語言字符串來設置日曆語言。

　　這個插件支持以下語言：(中文能夠去源碼裏自定義一下)

　　 de Deutsch (German) nl Nederlands (Dutch) en English [default value] pt Portugues (Portuguese) es Espanol (Spanish) ru ру́сский язы́кR (Russian) fr Francais (French) se Svenska (Swedish) it Italiano (Italian) tr Türkçe (Turkish)

　　使用方法：

<!-- set the language code --> <script type="application/javascript"> $(document).ready(function () { $("#my-calendar").zabuto_calendar({ language: "nl" }); }); </script>

Paste_Image.png

• 導航設置 Navigation Settings

• 　　你能夠設置修改這些默認屬性：year，month，show_previous，show_next；

  <!-- set the calendar to March 2015 do not allow previous months and only allow 2 months in the future --> <script type="application/javascript"> $(document).ready(function () { $("#my-calendar").zabuto_calendar({ year: 2015, month: 3, show_previous: false, show_next: 2 }); }); </script>

• 顯示設置 Display Settings
  -
  　　你能夠改變以下幾個日曆的外觀：cell_border（日期的單元格邊框），today(用bootstrap的徽章背景標識出當前日期),show_days(展現日期是周幾),weekstartson(設置爲0就是週一開始),nav_icon(先後改變月份的icon,須要引入bootstrap的圖標)

  <!-- set the border for the days and hide the days of the week header plus start the week on sunday and not monday -->

  <script type="application/javascript">
  $(document).ready(function () {
  $("#my-calendar").zabuto_calendar({
  cell_border: true,
  today: true,
  show_days: false,
  weekstartson: 0,
  nav_icon: {
  prev: '<i class="fa fa-chevron-circle-left"></i>',
  next: '<i class="fa fa-chevron-circle-right"></i>'
  }
  });
  });
  </script>

Paste_Image.png

• 標記顯示 Show Data

• 能夠經過固定設置數據或者Ajax請求獲取特定日期來爲日曆添加標記事件，必須使用指定格式的json編碼，才能產生事件；

  <!-- show date events with a modal window --> <script type="application/javascript"> $(document).ready(function () { $("#my-calendar").zabuto_calendar({ ajax: { url: "show_data.php", modal: true } }); }); </script> <!-- use fixed data --> <script type="application/javascript"> var eventData = [ {"date":"2015-01-01","badge":false,"title":"Example 1"}, {"date":"2015-01-02","badge":true,"title":"Example 2"} ]; $(document).ready(function () { $("#my-calendar").zabuto_calendar({ data: eventData }); }); </script>

Paste_Image.png

• 設置圖例說明標記 Set Legend

• 你能夠添加圖例說明，來解釋日曆中標記出來的事件類型，須要傳入一個lengen列表，包含如下幾個屬性；

  　　type:顯示類型，值能夠是"text",'block','list','spacer'；

　　laber:文本標籤說明只有在顯示類型是text或者是block的時候才能夠使用；

　　badge:在圖裏說明的徽章裏額外顯示的文本信息；

　　classname:爲顯示類型是text或者block的圖例增長css樣式；

　　list:type爲list的時，能夠傳入一個數組，開爲列表中的說明圖例逐一增長樣式
　　

Paste_Image.png

• 動態效果
• 你能夠爲日曆添加一個事件函數，當鼠標點擊特定的日期的時候會觸發事件；

　　　你也能夠添加一個函數，當導航欄點擊前一個月後一個月的時候會觸發事件函數；

有action和action_nav兩種，第一種點擊指定日期觸發，第二種點擊導航欄觸發

　　爲了檢索指定日期來觸發特定的事件函數，你須要訪問日曆插件中的日期id信息是不是指定id，另外你也能夠經過一個日期是否含有觸發事件來檢索指定日期；

myDateFunction(this.id); function myDateFunction(id) { var date = $("#" + id).data("date"); var hasEvent = $("#" + id).data("hasEvent"); }

　　導航欄觸發事件能夠經過檢索日曆導航欄的id信息或者經過訪問導航信息自己的上一個/下一個月的信息；

myNavFunction(this.id); function myNavFunction(id) { var nav = $("#" + id).data("navigation"); var to = $("#" + id).data("to"); }

　　能夠經過實例文件，來進行嘗試，體驗事件的效果；

<div id="date-popover" class="popover top" style="..."> ... <div id="date-popover-content" class="popover-content"></div> </div> <div id="my-calendar"></div> <script type="application/javascript"> $(document).ready(function () { $("#date-popover").popover(...); ... $("#my-calendar").zabuto_calendar({ action: function () {  return myDateFunction(this.id, false); }, action_nav: function () {  return myNavFunction(this.id); }, ajax: { url: "show_data.php?action=1", modal: true }, legend: [ {type: "text", label: "Special event", badge: "00"}, {type: "block", label: "Regular event"} ] }); }); function myDateFunction(id, fromModal) { $("#date-popover").hide(); if (fromModal) { $("#" + id + "_modal").modal("hide"); } var date = $("#" + id).data("date"); var hasEvent = $("#" + id).data("hasEvent"); if (hasEvent && !fromModal) {  return false; } $("#date-popover-content").html('You clicked on date ' + date); $("#date-popover").show();  return true; } function myNavFunction(id) { $("#date-popover").hide(); var nav = $("#" + id).data("navigation"); var to = $("#" + id).data("to"); console.log('nav ' + nav + ' to: \ + to.month + '/' + to.year); } </script>

　　附上源碼下載地址：https://github.com/zabuto/calendar/archive/master.zip