从Ace官网–日历部分(http://ace.jeka.by/calendar.html)下载代码;
删减后,相关保留代码:
CSS
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/fullcalendar.min.css" rel="stylesheet" />
<link href="css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" rel="stylesheet" />
JavaScript
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/fullcalendar.min.js"></script>
<script src="js/bootbox.js"></script>
以上引用的css及js,需看你项目需求来进行删减;
日历样式:
我这是修改相关样式后的日历样式。
对于使日历显示中文月份,及汉字可进行(fullcalendar.min.js)以下修改:
monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], //为“月、天”显示模式,添加中文月份日期
monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], //为“周”显示模式,添加中文月份日期
dayNames: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"], //为“天”显示模式,添加中文日期
dayNamesShort: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"], //为“月、周”显示模式,添加中文日期
buttonText: {
prev: "prev",
next: "next",
prevYear: "prev year",
nextYear: "next year",
year: "year",
today: "今天",
month: "月",
week: "周",
day: "天"
},
这样就把日历显示的英文变成了中文。
如果想为日历添加上年切换按钮,可这样操作:
在HTML页面下面的 js 里找到 header,在 left 项添加 prevYear 和 right 项添加 nextYear 就OK了;
(注意添加位置)