Add example

Author: marcelltoth

docs-site/src/components/Examples/examples.scss

@@ -133,6 +133,11 @@
   color: #f00;
 }
 
+.react-datepicker__week.highlighted {
+  background-color: #ddffdd;
+  border-radius: 5px;
+}
+
 .example-custom-input {
   cursor: pointer;
   padding: 5px 15px;

docs-site/src/components/Examples/index.jsx

@@ -18,6 +18,7 @@ import CustomDateFormat from "../../examples/customDateFormat?raw";
 import CustomClassName from "../../examples/customClassName?raw";
 import CustomCalendarClassName from "../../examples/customCalendarClassName?raw";
 import CustomDayClassName from "../../examples/customDayClassName?raw";
+import CustomWeekClassName from "../../examples/customWeekClassName?raw";
 import CustomTimeClassName from "../../examples/customTimeClassName?raw";
 import Today from "../../examples/today?raw";
 import PlaceholderText from "../../examples/placeholderText?raw";
@@ -222,6 +223,10 @@ export default class exampleComponents extends React.Component {
       title: "Custom day class name",
       component: CustomDayClassName,
     },
+    {
+      title: "Custom week class name",
+      component: CustomWeekClassName,
+    },
     {
       title: "Custom date format",
       component: CustomDateFormat,

docs-site/src/examples/customWeekClassName.js

@@ -0,0 +1,12 @@
+() => {
+  const [selectedDate, setSelectedDate] = useState(new Date());
+  return (
+    <DatePicker
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
+      weekClassName={(date) =>
+        getDate(date) % 2 === 0 ? "highlighted" : undefined
+      }
+    />
+  );
+};