Show date picker always open and visible to users

[Orbitis]

Hi everyone,

I’m working on a WordPress site and using the Flatpickr plugin to integrate a calendar. My goal is to have the calendar always open and visible to users without requiring them to click on an element to display it.

Here’s the current HTML/CSS code for the calendar:

<div tabindex="-1" style="top: 1335.65px; left: 1096.67px; right: auto; display: block;" class="flatpickr-calendar rangeMode animate arrowLeft arrowTop open">...</div>

I’ve tried using the inline: true option in the Flatpickr configuration, but it didn’t work as expected. Here’s what my current JavaScript code looks like:

flatpickr(".flatpickr-calendar", {
  inline: true
});

I’ve also attempted to add custom CSS to force the calendar to stay open:

.flatpickr-calendar {
  display: block !important;
}

Despite these attempts, I can’t seem to achieve the desired outcome. The calendar does not stay open as I would like. I’m wondering if I’m targeting the element incorrectly, or if there’s a conflict with other scripts or styles on my site.

Does anyone have any suggestions or similar experiences to share? Any help or guidance would be greatly appreciated in resolving this issue.

Thanks in advance for your time and assistance!

[andrii]

Hi,

Please note that it is being loaded here on this line: hivepress/assets/js/common.js at master · hivepress/hivepress · GitHub, and we are unfortunately not sure that it is possible to overwrite these settings externally, if you mean the field in our booking form.

[Milosz]

Hi!

If you want the calendar to be initially open, you can use JavaScript to add the ‘open’ class to the calendar, making it open right away

add_filter(
	'hivepress/v1/forms/booking_make',
	function( $form ) {
		?>
		<script>
	
			document.onreadystatechange = function () {
		
			var kalendarz = document.querySelector('.flatpickr-calendar');
			kalendarz.classList.add("open");
		}
		</script>
		<?php

	return $form;
	},
	100,
	2
);