feat: add getMonth data for all calendars

README.md

@@ -53,6 +53,7 @@ If you want to use with [Vue.js](https://vuejs.org/), you may interested in [vue
   }
   selected: Date | Date[] | undefined
   isHighlighted: (target: Date, selected: Date | Date[] | undefined) => boolean
+  getClass: (target: Date) => string
   locale: Locale
 }
 ```
@@ -76,6 +77,7 @@ Similar to DateCalendar but can be selected range of two dates.
   }
   selected: Date | Date[] | undefined
   hovered: Date | undefined
+  getClass: (target: Date) => string
   second: boolean // `true` if it is going to select the second date
   locale: Locale
 }
@@ -95,6 +97,7 @@ Similar to DateCalendar but can be selected range of two dates.
   currentYear: number
   selected: Date | Date[] | undefined
   isHighlighted: (target: Date, selected: Date | Date[] | undefined) => boolean
+  getClass: (target: Date) => string
   locale: Locale
 }
 ```
@@ -115,6 +118,7 @@ Similar to MonthCalendar but can be selected range of two months.
   currentYear: number
   selected: Date | Date[] | undefined
   hovered: Date | undefined
+  getClass: (target: Date) => string
   second: boolean // `true` if it is going to select the second month
   locale: Locale
 }

src/DateCalendar.html

@@ -17,7 +17,7 @@
       {{#each calendar as row}}
       <tr>
         {{#each row as cell, i}}
-        <td class="date-calendar-cell {{ weekClass(i) }}">
+        <td class="date-calendar-cell {{ weekClass(i) }} {{ getClass && cell ? getClass(cell) : '' }}">
           {{#if cell}}
           <CellButton selected="{{ isSelected(cell, selected) }}" highlighted="{{ isHighlighted(cell, selected) }}" on:click="onClickCell(cell)"
             on:mouseenter="onHoverCell(cell)">

src/DateRangeCalendar.html

@@ -1,4 +1,4 @@
-<DateCalendar current="{{ current }}" selected="{{ selected }}" locale="{{ locale }}" isHighlighted="{{ isHighlighted(hovered, second) }}"
+<DateCalendar current="{{ current }}" selected="{{ selected }}" getClass="{{ getClass }}" locale="{{ locale }}" isHighlighted="{{ isHighlighted(hovered, second) }}"
   on:select="onSelect(event)" on:hover="onHover(event)"></DateCalendar>
 
 <script>

src/MonthCalendar.html

@@ -4,7 +4,7 @@
 
   <ul class="month-calendar-list" on:mouseleave="onHoverOut()">
     {{#each calendar as month }}
-    <li class="month-calendar-item">
+    <li class="month-calendar-item {{ getClass ? getClass(month) : '' }}">
       <CellButton selected="{{ isSelected(month, selected) }}" highlighted="{{ isHighlighted(month, selected) }}" on:mouseenter="onHoverCell(month)"
         on:click="onClickCell(month)">
         {{ format(locale.months[month.getMonth()]) }}

src/MonthRangeCalendar.html

@@ -1,4 +1,4 @@
-<MonthCalendar currentYear="{{ currentYear }}" selected="{{ selected }}" locale="{{ locale }}" isHighlighted="{{ isHighlighted(hovered, second) }}"
+<MonthCalendar currentYear="{{ currentYear }}" selected="{{ selected }}" getClass="{{ getClass }}" locale="{{ locale }}" isHighlighted="{{ isHighlighted(hovered, second) }}"
   on:select="onSelect(event)" on:hover="onHover(event)"></MonthCalendar>
 
 <script>