diff --git a/README.md b/README.md index 6dac7f2..25fc1cf 100644 --- a/README.md +++ b/README.md @@ -59,6 +59,11 @@ $('#ca').calendar({ // override class customClass: '', + // callback to add additional class for every DayItem + dayClass: function(date) { + return ''; + }, + // set display view, optional date or month view: 'date', diff --git a/index.html b/index.html index bf17228..8abc69b 100644 --- a/index.html +++ b/index.html @@ -48,6 +48,10 @@ outline: none; } + .weekend { + color: #f00; + } + @@ -83,11 +87,21 @@

Trigger calendar

value: '2016-10-31' }]; + var dayClass = function(date) { + if (date.getDay() === 0) { + return 'weekend'; + } else if (date.getDay() === 6) { + return 'weekend'; + } + return ''; + }; + // inline var $ca = $('#one').calendar({ // view: 'month', width: 320, height: 320, + dayClass: dayClass, // startWeek: 0, // selectedRang: [new Date(), null], data: data, diff --git a/src/calendar.js b/src/calendar.js index ee92993..a42f981 100644 --- a/src/calendar.js +++ b/src/calendar.js @@ -34,6 +34,11 @@ // 自定义类，用于重写样式 customClass: '', + + // 自定義每一天的class + dayClass: function(date) { + return ''; + }, // 显示视图 // 可选：date, month @@ -275,6 +280,7 @@ this.$element = $(element); this.options = $.extend({}, $.fn.calendar.defaults, options); this.$element.addClass('calendar ' + this.options.customClass); + this.dayClass = this.options.dayClass; this.width = this.options.width; this.height = this.options.height; this.date = this.options.date; @@ -337,6 +343,8 @@ if (dt.isSame(y, m, d)) { data['class'] += ' ' + TODAY_CLASS; } + + data['class'] += this.dayClass(idt); data.date = idt.format(this.options.format); data.action = this.getDayAction(idt);