Zabuto Calendar 日历插件使用指南

Posted 2020-09-11

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