Zabuto Calendar 日歷插件使用指南

Zabuto Calendar 日歷插件demo翻譯

  • 日歷插件需要依賴于JQuery和Twitter的bootstrap來讓函數正確的運行；在引入javascript和css樣式表后就可以使用這個插件和庫，然后通過定義一個DOM元素和初始化插件來觀察日歷插件；

案例１：

...

<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

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容