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