Open recruitname opened 7 years ago
Hello, I have same issue. You need to patch pikaday.js file. It is example of patch:
--- a/libs/pikaday/1.5.1/pikaday.js
+++ b/libs/pikaday/1.5.1/pikaday.js
@@ -292,6 +292,15 @@
if (opts.isDisabled) {
arr.push('is-disabled');
}
+ if (opts.externalUserClass) {
+ if (typeof opts.externalUserClass === 'object') {
+ opts.externalUserClass.forEach (function (userClass) {
+ arr.push(userClass);
+ });
+ } else {
+ arr.push (opts.externalUserClass);
+ }
+ }
if (opts.isToday) {
arr.push('is-today');
}
@@ -664,6 +673,8 @@
opts.disableDayFn = (typeof opts.disableDayFn) === 'function' ? opts.disableDayFn : null;
+ opts.userClassFn = (typeof opts.userClassFn) === 'function' ? opts.userClassFn : null;
+
var nom = parseInt(opts.numberOfMonths, 10) || 1;
opts.numberOfMonths = nom > 4 ? 4 : nom;
@@ -1083,7 +1094,8 @@
isDisabled = (opts.minDate && day < opts.minDate) ||
(opts.maxDate && day > opts.maxDate) ||
(opts.disableWeekends && isWeekend(day)) ||
- (opts.disableDayFn && opts.disableDayFn(day));
+ (opts.disableDayFn && opts.disableDayFn(day)),
+ externalUserClass = opts.userClassFn && opts.userClassFn (day);
if (isEmpty) {
if (i < before) {
@@ -1108,7 +1120,8 @@
isStartRange: isStartRange,
isEndRange: isEndRange,
isInRange: isInRange,
- showDaysInNextAndPreviousMonths: opts.showDaysInNextAndPreviousMonths
+ showDaysInNextAndPreviousMonths: opts.showDaysInNextAndPreviousMonths,
+ externalUserClass: externalUserClass
};
row.push(renderDay(dayConfig));
--
2.7.4
Now you can use userClassFn option:
userClassFn: function (date) {
return 'test-day';
}
or
userClassFn: function (date) {
return ['test-day', ;'test2-day'];
}
Example with moment.js
userClassFn: function (date) {
var dt = moment (date).format ('YYYY-MM-DD');
if (dt == '2017-07-20') {
return 'test3-day';
}
return ['test-day', 'test2-day'];
}
Hi I created a booking form and I'm using Pikaday datepicker plugin on my page.And my booking form is for hotels that is why I have empty days,rezerved days and available days and I want to give a .class these days to colored them on datepicker and I find disableDayFn function for pikaday but I need more to reserved or another special days is there any function on pikaday that we can use ?