README

这个库是一个jQuery插件，允许你将月历添加到你的网页中。

你可以自定义日历的显示，并支持多种语言查看。你也可以使用带有JSON数据的AJAX请求显示日历事件，并添加一个图例。

你可以向日历添加一个函数，当在特定日期上触发onclick事件时执行。

为了使日历正常工作，你需要包含jQuery和Twitter Bootstrap。查看manifest文件zabuto_calendar.jquery.json以获取支持的版本信息。

在你的页面上包含脚本zabuto_calendar.min.js和样式表zabuto_calendar.min.css。

<script src="{YOUR_PATH}/zabuto_calendar.min.js"></script>
<link rel="stylesheet" type="text/css" href="{YOUR_PATH}/zabuto_calendar.min.css">

使用此代码初始化日历

<div id="my-calendar"></div>

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

设置

你可以使用几个设置自定义日历

language (字符串) 设置日历的期望语言（de, en, es, fr, it, nl, pt, ru, se, tr, ar）。
year (整数) 在不同于当前年份的年份初始化日历。
month (整数) 在不同于当前月份的月份（1月=1，12月=12）初始化日历。
show_previous (布尔值|整数) 完全禁用对上一月的导航或仅允许最多几个月。
show_next (布尔值|整数) 完全禁用对下一个月的导航或仅允许最多几个月。
cell_border (布尔值) 在日历本身、星期几标题和单个天数周围设置单元格边框。否则只显示一条线。
today (布尔值) 使用特殊徽章显示今天。
show_days (布尔值) 显示星期几标题。
weekstartson (整数) 从星期天（0）或星期一（1）开始一周。
nav_icon (对象) 覆盖 'prev' 和/或 'next' 图标的HTML

日期事件

你可以使用固定数据或带有JSON数据的AJAX请求添加日期事件。

$("#my-calendar").zabuto_calendar( { data: [] } ); $("#my-calendar").zabuto_calendar( { ajax: { url: "{YOUR_URL}" } } );

JSON数据必须是按指定格式的事件数组。

{date: yyyy-mm-dd, badge: boolean, title: string, body: string: footer: string, classname: string}

模态事件窗口

你可以使用元素数据中的title、body和footer元素在Bootstrap.js模态窗口中。信息将在点击事件的日子时显示。

$("#my-calendar").zabuto_calendar( { ajax: { url: "{YOUR_URL}", modal: true } } );

图例

你可以添加一个图例来阐明日历上显示的日期事件的样式。图例由指定格式的对象数组组成。

{type: string, label: string, badge: string, list: array}

允许的类型值是'text', 'block', 'list'和'spacer'。对于显示类型'text'，label是必需的，对于'block'是可选的。对于'list'或'spacer'，它不使用。徽章可以用于显示类型'text'的额外设置以显示徽章信息。你可以使用classname作为显示类型'text'或'block'的额外设置以添加CSS类到图例项。列表包含CSS类名的数组，用于类型'list'的块列表。

onclick动作

你可以向日历添加函数，当触发onclick事件时执行。

日期

你可以向日历添加一个函数，当在特定日期上触发onclick事件时执行。

使用jQuery选择器$("#my-calendar")来初始化zabuto_calendar插件，其中action属性关联一个函数，该函数通过this.id调用myDateFunction函数。

要获取日期，需要通过日历的日ID访问元素信息。你也可以检查该日期是否有可用的事件。

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

特此授予任何人免费获得本软件及其相关文档文件（“软件”）的副本的权利，无限制地处理软件，包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或销售软件的副本，并允许向软件提供副本的个人这样做，但受以下条件约束

globalmikebracas / calendarr

维护者

详细信息

README

设置

日期事件

模态事件窗口

图例

onclick动作

日期

导航