網頁日曆顯示控件calendar3.1

時間 2019-12-11

標籤網頁日曆顯示控件 calendar3.1 calendar 欄目 HTML 简体版

原文原文鏈接

關於日曆控件，我作了好屢次嘗試，一直致力於開發一款簡單易用的日曆控件。個人想法是爭取在引用這個控件後，用一行js代碼就能作出一個日曆，若在加點參數，就能自定義外觀和功能豐富多彩的日曆。Calendar 3.1是我初步滿意的一個做品。javascript

日曆的經常使用場景有兩種，一種是用在日期選擇器裏面，好比某個位置須要輸入日期，點一下輸入框會彈出一個日曆以供選擇日期；另外一種是單純的顯示做用，在頁面某個地方顯示日曆，通常起裝飾做用，不少博客首頁都會有這種日曆。我前面的隨筆介紹的都是第一種日曆，而今天要介紹的Calendar 3.1是第二種日曆。有興趣的朋友能夠去個人github主頁上查看，https://github.com/dige1993/calendar.gitcss

首先固然要看的是效果，先看一張素顏：html

而後在調用過程當中指定若干參數，能夠定義出比較漂亮的日曆，這裏僅僅是演示，上一張紅綠配的醜照：java

在區域寬度小於200px的時候，會提示沒法正常顯示日曆：jquery

接下來看下這款控件的用法。git

首先照例是引用jquery庫和calendar-3.1-js，而後準備一個width>=200px的div，高度最好自適應內容，若是這個div的id爲test，則只要一句calendar_init($("#test"));就能在div內顯示日曆了。代碼以下：github

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Calendar 3.1</title>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/calendar-3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
    calendar_init($("#test"));//在id=test的DIV中顯示日曆
});
</script>

<style>
#test {
    width:200px;
    height:auto;
    overflow:hidden;
    border:solid 1px;
    margin-bottom:20px;
}
</style>
</head>

<body>
    <div id="test"></div>
</body>
</html>

以上就是素顏效果的代碼，若是還想自定義UI，能夠在調用calendar_init()時加上第二個參數。濃妝照的代碼以下：web

calendar_init($("#test"),{
        title_color:"yellow",
        title_bg_color:"red",
        day_color:"brown",
        day_bg_color:"green",
        date_bg_color:"pink",
        date_color:"blue",
        date_active_color:"red"
    });

calendar_init函數的第二個參數是可選項，類型是包含鍵值對的對象，下面用表格介紹下這個參數的每一個鍵的含義及其取值：函數

參數	含義及取值
title_bg_color	年月區域的背景顏色，取值遵循web色彩取值規範，默認透明
title_color	年月區域的字體顏色，包括那幾個按鈕的前景色，取值遵循web色彩取值規範，默認透明
line_style	年月區域與星期區域的分隔線的style，取值遵循css邊框取值規範，默認值：solid 1px
day_bg_color	星期區域的背景顏色，取值遵循web色彩取值規範，默認透明
day_color	星期區域的字體顏色，取值遵循web色彩取值規範，默認透明
date_bg_color	日期區域的背景顏色，取值遵循web色彩取值規範，默認透明
date_color	日期區域的字體顏色，取值遵循web色彩取值規範，默認透明
date_active_color	當前日期的背景顏色，取值遵循web色彩取值規範，默認透明
line_height	行高，默認30px