beforeShowDays on Pikaday

[recruitname]

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 ?

var disallowedDates = [
    '2015-01-01','2015-12-25','2015-12-26','2016-01-01','2016-12-25','2016-12-26','2015-12-28','2016-03-25','2016-03-28','2016-05-02','2016-05-30','2016-08-29','2016-12-27'
]

disableDayFn: function(theDate) {
    theDate = theDate.toISOString().split('T')[0];

    if (disallowedDates.indexOf(theDate) != -1) {
        console.log(theDate+' - BLOCKED');
    } else {
        console.log(theDate);
    }

    return (disallowedDates.indexOf(theDate) != -1)
}

[AleksMx]

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'];
}