Litepicker: added filter hook for amount of months displayed (mobile)

Readme.md

@@ -55,6 +55,10 @@ CommonsBooking is a plugin for the management and booking of common goods. This
 > This might fail, if you don't have the PHP extension [uopz](https://www.php.net/manual/en/book.uopz.php) installed. Try running `composer install --no-dev && npm install && npm run dist`  if you just quickly want to test a specific branch without installing the extension.
 5. Activate the plugin in the plugins dashboard
 
+## Usage
+
+Apart from the documentation mentioned above, we document the WordPress action and filter hooks in the following file: [docs/examples/filters.md](https://github.com/wielebenwir/commonsbooking/blob/master/docs/examples/filters.md)
+
 ## Contribute
 
 Either through translating WordPress into your native tongue ([see the already existing WordPress Plugin Translations](https://translate.wordpress.org/projects/wp-plugins/commonsbooking/)) or through developing and testing new versions of the application.

assets/public/js/public.js

@@ -701,6 +701,7 @@ document.addEventListener("DOMContentLoaded", () => {
                             lockDaysFormat: "YYYY-MM-DD",
                             lockDays: [],
                             lockDaysInclusivity: "[]",
+                            mobileCalendarMonthCount: 1,
                             disallowLockDaysInRange: !0,
                             countLockedDays: !1,
                             countLockedDaysMax: 0,
@@ -1456,7 +1457,7 @@ document.addEventListener("DOMContentLoaded", () => {
                         window.addEventListener("orientationchange", function(e) {
                             var i = function() {
                                 if (p.isMobile() && t.isShowning() && ("landscape" === p.getOrientation() ? (t.options.numberOfMonths = 2, 
-                                t.options.numberOfColumns = 2) : (t.options.numberOfMonths = 1, 
+                                t.options.numberOfColumns = 2) : (t.options.numberOfMonths = t.options.mobileCalendarMonthCount, 
                                 t.options.numberOfColumns = 1), t.render(), !t.options.inlineMode)) {
                                     var e = t.picker.getBoundingClientRect();
                                     t.picker.style.top = "calc(50% - " + e.height / 2 + "px)", 
@@ -2042,6 +2043,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
                 disallowLockDaysInRange: globalCalendarData["disallowLockDaysInRange"],
                 disallowHolidaysInRange: globalCalendarData["disallowLockDaysInRange"],
                 mobileFriendly: true,
+                mobileCalendarMonthCount: globalCalendarData["mobileCalendarMonthCount"],
                 selectForward: true,
                 useResetBtn: true,
                 maxDays: globalCalendarData["maxDays"],

assets/public/js/src/litepicker.js

@@ -261,6 +261,7 @@ document.addEventListener("DOMContentLoaded", function (event) {
                 "disallowLockDaysInRange": globalCalendarData['disallowLockDaysInRange'],
                 "disallowHolidaysInRange": globalCalendarData['disallowLockDaysInRange'], //we treat holidays as locked days
                 "mobileFriendly": true,
+                "mobileCalendarMonthCount": globalCalendarData['mobileCalendarMonthCount'],
                 "selectForward": true,
                 "useResetBtn": true,
                 "maxDays": globalCalendarData['maxDays'],

docs/examples/filters.md

@@ -0,0 +1,23 @@
+# Hooks and Filters
+
+WordPress and WordPress plugins can be customized via so-called [action hooks and filters](https://developer.wordpress.org/plugins/hooks/).
+The customizations are defined in PHP code, so for example you need to place them as PHP code in the themes `functions.php` of your website. 
+
+## Actions
+
+These are the [action hooks](https://developer.wordpress.org/plugins/hooks/actions/) exposed by the plugin.
+
+## Filters
+
+These are the [filter hooks](https://developer.wordpress.org/plugins/hooks/filters/) exposed by the plugin.
+
+### Filter `commonsbooking_mobile_calendar_month_count`
+
+Lets you define the number of months that are displayed in the mobile layout of the calendar view using a filter.
+
+Example usage:
+
+```php
+// Sets the mobile calendar view to display 2 month
+add_filter('commonsbooking_mobile_calendar_month_count', fn(): int => 2);
+```

src/View/Calendar.php

@@ -489,6 +489,27 @@ private static function getDefaultCalendarEnddateTimestamp( $startDate ) {
 		return strtotime( 'last day of +3 months', $startDate->getDateObject()->getTimestamp() );
 	}
 
+	/**
+	 * The value for the amount of months shown in the Litepicker mobile view portrait mode.
+	 * Fixes #1103, an issue where one instance has issues with switching the months on mobile.
+	 * This value is configurable through a filter hook only.
+	 *
+	 * Default value is 1.
+	 *
+	 * @return int
+	 */
+	private static function getMobileCalendarMonthCount(): int {
+		$month = 1;
+		/**
+		 * Default amount of months shown in the Litepicker mobile view portrait mode.
+		 *
+		 * @since 2.10.3
+		 *
+		 * @param int $month defaults is 1
+		 */
+		return apply_filters( 'commonsbooking_mobile_calendar_month_count', $month );
+	}
+
 	/**
 	 * Returns JSON-Data for Litepicker calendar.
 	 *
@@ -546,6 +567,7 @@ public static function prepareJsonResponse(
 				'disallowLockDaysInRange' => true,
 				'countLockDaysInRange' => true,
 				'advanceBookingDays'      => $advanceBookingDays,
+				'mobileCalendarMonthCount' => self::getMobileCalendarMonthCount(),
 			];
 
 			if ( count( $locations ) === 1 ) {