Zabuto Calendar 日歷插件demo翻譯
- 日歷插件需要依賴于JQuery和Twitter的bootstrap來讓函數(shù)正確的運行担租；在引入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>
- 語言設(shè)置
你可以通過如下方式自定義日歷的語言侣诺，設(shè)置所需要的語言字符串來設(shè)置日歷語言。
這個插件支持如下語言：(中文可以去源碼里自定義一下)
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>
- 導(dǎo)航設(shè)置 Navigation Settings
你可以設(shè)置修改這些默認(rèn)屬性：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>
- 顯示設(shè)置 Display Settings
你可以改變?nèi)缦聨讉€日歷的外觀：cell_border（日期的單元格邊框），today(用bootstrap的徽章背景標(biāo)識出當(dāng)前日期),show_days(展示日期是周幾),weekstartson(設(shè)置為0就是周一開始),nav_icon(前后改變月份的icon,需要引入bootstrap的圖標(biāo))
<!-- 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>
標(biāo)記顯示 Show Data
-
可以通過固定設(shè)置數(shù)據(jù)或者Ajax請求獲取特定日期來為日歷添加標(biāo)記事件翰铡，必須使用指定格式的json編碼钝域，才能產(chǎn)生事件；
<!-- 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>
- 設(shè)置圖例說明標(biāo)記 Set Legend
- 你可以添加圖例說明锭魔，來解釋日歷中標(biāo)記出來的事件類型例证，需要傳入一個lengen列表，包含以下幾個屬性迷捧；
type:顯示類型织咧，值可以是"text",'block','list','spacer'胀葱；
laber:文本標(biāo)簽說明只有在顯示類型是text或者是block的時候才可以使用；
badge:在圖里說明的徽章里額外顯示的文本信息笙蒙；
classname:為顯示類型是text或者block的圖例增加css樣式抵屿；
list:type為list的時，可以傳入一個數(shù)組捅位，開為列表中的說明圖例逐一增加樣式
- 動態(tài)效果
- 你可以為日歷添加一個事件函數(shù)轧葛，當(dāng)鼠標(biāo)點擊特定的日期的時候會觸發(fā)事件；
你也可以添加一個函數(shù)艇搀，當(dāng)導(dǎo)航欄點擊前一個月后一個月的時候會觸發(fā)事件函數(shù)尿扯；
有action和action_nav兩種，第一種點擊指定日期觸發(fā)焰雕，第二種點擊導(dǎo)航欄觸發(fā)
為了檢索指定日期來觸發(fā)特定的事件函數(shù)衷笋，你需要訪問日歷插件中的日期id信息是否是指定id，另外你也可以通過一個日期是否含有觸發(fā)事件來檢索指定日期淀散；
myDateFunction(this.id);
function myDateFunction(id) {
var date = $("#" + id).data("date");
var hasEvent = $("#" + id).data("hasEvent");
}
導(dǎo)航欄觸發(fā)事件可以通過檢索日歷導(dǎo)航欄的id信息或者通過訪問導(dǎo)航信息本身的上一個/下一個月的信息右莱；
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
