287 comments found.
Looking at the docs it appears that there is some support for keyboard actions. Using the keyboard I can navigate, but it doesn’t seem that I can select dates with the keyboard. Is that something that can be added?
Did you try space?
Hi, i can enable arrow for navigate months for mobile view? i love the view of mobile but some user dont know he can go next month with swipe, so is some way to add arrows in the month for navigate? regards
Ok i already foung again jajaja sorry
Glad you solved it, I was going to tell you that the arrows are already visible.
Hi, i am trying to set language for the datepicker but this still not working i already try many ways, with navigator language, put direct, with conditional but always puts me in english, i already try ‘es_MX’, ‘es-mx’, ‘es-MX’ but nothing works, can you help me please, regards
$(’.input-date-booking-form’).caleran({ locale: ‘es’, autoCloseOnSelect: true, showFooter: false, showHeader: false, format: ‘MM/DD/YYYY’, minDate: moment(), minSelectedDays: min_days_d });
Ok i already found the mistake i am loading moment.js without the locales
Hi. Thanks for great calendar picker. I have a problem with the DOB picker where I want to limit picking a year of birth after the current year. I manage to stop the YEAR at this year, but now the tool popup it has many blank white blocks? can you help. I did this.. ”..$(”#dob”).caleran({ DOBCalendar: true, startEmpty: true, hideOutOfRange: true, autoCloseOnSelect: true, format: ‘DD-MM-YYYY’, //minDate: moment().startOf(“year”), maxDate: moment().endOf(“year”), //startDate: moment(), endDate: moment() }); “
Hi, Could you please, Help.
When using the plugin in RTL Version, I gave the parent div dir=rtl attribute, and determined the locale when initializing the input, But it still displayed with wrong directions "next - prev navigations".Hi, is this working correct or wrong? https://rettica.com/caleran/docs/readme.html#rtl-support
wrong, the prev button navigate me to the next month.
Did you set `isRTL: true` in the configuration?
I have added it now, The direction and navigations work fine, But there is one new problem: when determining a mindate for example this moment, the prev button displays instead of the next button. there is no next button so I can’t move to the next months. mm, I don’t know how to clarify it without a screenshot.
I understood your problem, but there isnt a fix for that actually. There’s only one thing that’ll solve your problem, disabling hideOutOfRange option, then it’ll both show..
Hi,
How can I mark more different dates to show on the calendar, but that they are clickable. So it’s like we want to show that 3 games are played in months. Eg: var selecteddate = [“2021-11-01”, “2021-11-04”, “2021-11-11”];
Hello bglavan, multiple selections are not supported in this plugin, sorry.
Hello tpaksu,
I bought the caleran date range picker. I want to use it for a hotel booking website.
I try to cover the following use case. I want to allow bookings just from Sunday to Sunday for a certain timeframe, e.g. from 06/01/2021 to 08/31/2021.
Now my question, is possible to cover the described use case with the standard features of the caleran date range picker or do I need to modify the code?
Thanks for your support.
Hi Philipp, did you check the week select mode example in the documentation?
Yes, I did. But is it possible to allow the user to select more than one week, e.g. 2 weeks from Sunday to Sunday? And in addition, is it possible to define additional rules, e.g. min 3 days selection for a different time period for the same calendar object?
Thanks for your support.
Yes, it can do that, but you need to implement what you want with using the info given in the examples.
Hello, I have found a bug or limitation with Caleran, do you offer any paid services to resolve the issue? I can send you a loom video showing you the issue. I will gladly pay for however much time it takes you to resolve the issue.
The basic issue is described here: https://www.loom.com/share/41e5d74c8c2744a9b87b47d7cd44a031 this is the correct version of the calendar using our custom calendar: https://drive.google.com/file/d/1MLI_XY6OfA9pkEC6qhfcOkHYmuzqWMAI/view?usp=sharing this is what caleran displays: https://drive.google.com/file/d/19VDGMf-TkMcOeOcupy9inLMq56peORbP/view?usp=sharingone night between bookings does not seem to be supported?
Let me know!
Brent
Hi Brent, I remember solving something like that but I need to check first. Thanks for reporting that
ok thanks for your response, if there is anything you need from me, please let me know! I will help however possible. Have a great day!
Hello, we were able to identify the bug in the source code and fix it. If this calendar has a public repository we will glady publish the fix for others. thanks!
Brent hi, if you can contact me from my profile contact form, we can continue from e-mail. Sorry, it’s a lot going on on my side so I couldn’t respond earlier.
941ba43e-e67f-415a-a5ad-6211b45b8f40
Can you confirm how to redduce the number of visible calendars on window resize, i only want to show 1 on mobile.
Hello, you can set different mobile options like this
oninit: function(instance){
if(instance.globals.isMobile){
$.extend(true, instance.config, {
calendarCount: 1
}
}
}Hi there,
I recently purchased the plugin and it has been working great however I wanted to ask if it is possible to add a price to the dates if possible so for instance the month of April the prices show up below the dates.
Is this possible with the plugin? If so is it a customisation that is currently not in the plugin? If it is a customisation can I contact you directly for it.
Thanks
Hello, you mean something like this? https://rettica.com/caleran/docs/single-test-33.html You can check the source code to see how it’s done.
On mobile there’s a minor CSS bug btw. I’ll fix that when I have some time. Please remind me if I don’t.
Thanks for the response, that is quite helpful I have another question; when I have two fields depart & return. When I select the date from the picker in the depart field it jumps to the return field and to add the return date. Is there a way to keep the data picker open on the depart field and select the return date too which populates in the return field? Thanks
Sorry for the late reply, I had stuff going on and I needed to finish them before to have time looking here. Do you mean something like this? https://rettica.com/caleran/docs/single-test-34.html
Thats okay, thanks for the reply. Yes the way it adds to the second field. Do I have a look at the code again to make that work? Thanks
Yes you can look at the page source. Copy paste the HTML and the JavaScript will do.
One more question if I can please, how can I embed the calendar view rather than making it as a date picker. Is that possible with this plugin? Any examples? Thanks
Do you mean the inline mode? Like at the top of the documentation page? Just set “inline: true” when initializing.
Okay great and can this be done with single month view as oppose to both? The idea is not to select dates in the picker rather give an overview
Yes all is written in the documentation. Use calendarCount: 1
Thank you!
You’re welcome 
Sorry to trouble you again, is there a way to create shortcuts or is it possible on this calendar so it selects the date based on keys? Example T for today. D 1 day back, A 2 day forward etc
There’s the keyboard navigation, but not as you described. Standard arrow keys with some extra keys for month and year navigation. You can check it on the documentation.
Another question so I implemented the second option from here: https://rettica.com/caleran/docs/single-test-34.html (see my above comment) however when I click any of the options on the range it populates both in the same field. Is there way of making this function the same way when click on the dates in the calendar to populate both the fields?
I don’t think there’s a way automatically do that, but you can use the onrangeselect event to catch and modify the inputs.
HI Taha, I have recently purchased your excellent caleran plug in, but am having some issues with it that I am hoping you will be able to help me with.
I am able to create the calendar without any problems. The issue I am having is when I try to set the start and end date of an already created calendar. The code from your site is not working for me! If i try this :- var instance = document.querySelector(”.singlestartdate”).caleran; instance.config.startDate = new Date(); instance.reDrawCalendars();
it errors with as instance is undefined.
Any help would be awesome, thank you.
Dave
No worries, Sorry, i read through all the comments here and figured it out!!!
I’m glad that you figured it out, and I’m sorry for not having the chance to respond earlier than that Thanks for using it BTW!
Hi, I have purchased 5 copies and has been working well, but now have run into a problem with users bypassing calendar and just typing in a date that we have blocked on the calendar. I believe all I need to do is make the popup container to appear over the top of the date field. I can tell that java script is creating a div and a style element to place the container. I just need to alter whatever js is using to calculate the top position so it mostly covers the initiating field but I can’t find it in the js. I have look through all the documentation and I can’t find anything like this. I see how to make it appear on top, bottom, right and left, but I need it to appear over! Can you suggest anything?
Hello, sorry I had some stuff to do before looking here, btw, did you check the documentation? The positioning is described there already: https://rettica.com/caleran/docs/readme.html#dropdown-positioning-auto-alignment-disabled-
Also there’s the autoAlign setting which aligns the dropdown position relative to the viewport. If you want to show the dropdown over the input all the time, you may need to set it false.
i tried all those things you mentioned before I wrote the comment. I did find the part of the java script that draws the dropdown, but when I altered it, it fixed the desktop but it messed up the mobile. SO, I ended up changing over to the- Inline Calendar -and that seems to be working okay.
You didn’t need to alter the code. Can you share a link via the contact box on my profile page?
I was just playing around with the js on my local machine to see if I could make it work. The inline calendar ended up being a good solution. I will put a link on your contact as you asked.
I don’t think a link will work because you have to be checking out before you even see the calendar. The customer is happy with the inline so – no worries!
Ok, if you say so. Let me know if something bothers you, and sorry for the delay again.
Hi, I don’t mind paying for support if necessary. We purchased your date picker in July of 2018. We are now getting reports that the datepicker does not function correctly on iOS..it works fine on my phone (Safari) so I’m guessing the reports are about Chrome…the datepicker doesn’t close when they tap OK. Do you know if there is a known issue? Has it been fixed in a newer version? We are fine with paying for a newer version if it fixes this issue. Thx, jatin
Hello Jatin, don’t you have access to the newer versions without buying support? I remember fixing something related to it, but I can’t remember if it was this one. Can you try opening the documentation website with iOS and check if it works the same?
Hi,
i was unable to find out wheter it can select multiple dates (not ranges) or not?
Could you please confirm?
Br,
rob
Hello Rob,
No, it doesn’t have that feature. Sorry.
Is there a way to not disable a certain date that would normally be disabled? We disable all Saturdays and Sundays, but we want to make Feb 13 (a Sat) and Feb 14 (a Sun) available next year. I can’t seem to find a way to do that.
Hello,
try this:
$("#input").caleran({
disableDays: function (day) {
// don't disable these days
var notDisabled = ["2021-02-13", "2021-02-14"];
if (notDisabled.indexOf(day.format("YYYY-MM-DD")) >= 0) {
return false;
}
// otherwise, disable saturdays and sundays
return day.day() 0 || day.day() 6;
}
});I have tried to set the start and end date as documented, but it does not work.
var instance = $("#mybookingsres-list-searchbox-date").data("caleran");
instance.setStart("2020-12-20");
instance.setEnd("2020-12-22");
The calendar is working fine if I choose the date from the datepicker.
Do you use “startEmpty:true”?
yes
Then you need to set
instance.globals.firstValueSelected = true;before doing that to bypass the empty start flag. The end date selection does that for you when selecting the range manually. But when doing it programmatically with “startEmpty” clause, you need to tell the calendar that you’ve selected a date, and forget the startEmpty checks.
Sorry it does not work.
$("#mybookingsres-list-searchbox-date").caleran({
showFooter: false,
format: "DD.MM.YYYY",
autoCloseOnSelect: true,
startEmpty: true,
onafterselect: function(caleran, startDate, endDate){
MyBookingsRESFrontent_searchParameters.calendarFrom = startDate.format("DD.MM.YYYY");
MyBookingsRESFrontent_searchParameters.calendarTo= endDate.format("DD.MM.YYYY");
},
oninit: function (instance) {MyBookingsRESFrontent_List_dateRangePickerInstance = instance;
}
});
function setDateRange() {
var instance = $("#mybookingsres-list-searchbox-date").data("caleran");
instance.globals.firstValueSelected = true;
instance.setStart("2020-12-20");
instance.setEnd("2020-12-22");
}
when do you call setDateRange?
on a button click
Use this:
function setDateRange() {
instance.globals.firstValueSelected = true;
instance.config.startDate = moment("2020-12-20", "YYYY-MM-DD");
instance.config.endDate = moment("2020-12-22", "YYYY-MM-DD");
instance.reDrawCalendars();
}The `setStart` and `setEnd` functions don’t seem to work well with startEmpty set to true. You’d need to set them twice because of the date validations happening in those methods.Instead you can use this.
Good afternoon.
I would like to know if there is any way to mark a group of dates on the calendar, for example: 1-4, 6-10, 14, 18-20. I just need to present these dates in a different style than the rest of the calendar.
Thank you.
Hello, you can use the ondraw event to walk through all the .caleran-day classes, get their data-value (unix timestamp) values and add the corresponding styles to the cells.
Hello, currently the calendar is not working with newer momentjs Versions. WordPress has currently Version 2.27.0 included. (It works with 2.17.0)
Can you please fix it? Thanks
Check the loading order, you might be loading momentjs after the calendarjs. it needs to be loaded before.
Other than that, can you share the error you’re getting?
It is correctly ordered:
<script src=’http://wp.christian.local:8088/wp-includes/js/dist/vendor/moment.min.js?ver=2.26.0' id=’moment-js’></script> <script src=’http://wp.christian.local:8088/wp-content/plugins/my-bookings-res/assets/caleran/js/caleran.min.js?ver=5.5.3' id=’caleran-js’></script>
The error is, that the input field shows “L – L” and it will not change after selecting a date range.
I’ve tested with 2.29.1 on my local and it seems to work? L is a localized format specifier for momentjs which formats the date as localized date format. Are there any javascript errors?
WordPress automaticly includes the following code: <script id=’moment-js-after’> moment.updateLocale( ‘en_US’, {months. F Y”,LLL j, Y g:i a”,LLLL}} ); </script>
There are no JS Errors.
<script id='moment-js-after'>
moment.updateLocale( 'en_US', {"months":["January","February","March","April","May","June","July","August","September","October","November","December"],"monthsShort":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"weekdays":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],"weekdaysShort":["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],"week":{"dow":1},"longDateFormat":{"LT":"G:i","LTS":null,"L":null,"LL":"j. F Y","LLL":"F j, Y g:i a","LLLL":null}} );
</script>
Which plugin is that? “my-bookings-res”, is it yours?
Yes, i am currently developing it.
Then you should be able to change it’s priority and dependency. WP doesn’t automatically include the momentjs library as I can’t find it here: https://developer.wordpress.org/reference/functions/wp_enqueue_script/ , it seems like any other plugin doing it.
wp_enqueue_script(
'moment'
);
You can find it in the wp-includes folder.
/**
* Registers all the WordPress vendor scripts that are in the standardized
* `js/dist/vendor/` location.
*
* For the order of `$scripts->add` see `wp_default_scripts`.
*
* @since 5.0.0
*
* @param WP_Scripts $scripts WP_Scripts object.
*/
function wp_default_packages_vendor( $scripts ) {
global $wp_locale;
$suffix = wp_scripts_get_suffix();
$vendor_scripts = array(
'react' => array( 'wp-polyfill' ),
'react-dom' => array( 'react' ),
'moment',
'lodash',
'wp-polyfill-fetch',
'wp-polyfill-formdata',
'wp-polyfill-node-contains',
'wp-polyfill-url',
'wp-polyfill-dom-rect',
'wp-polyfill-element-closest',
'wp-polyfill',
);
did_action( 'init' ) && $scripts->add_inline_script(
'moment',
sprintf(
"moment.updateLocale( '%s', %s );",
get_user_locale(),
wp_json_encode(
array(
'months' => array_values( $wp_locale->month ),
'monthsShort' => array_values( $wp_locale->month_abbrev ),
'weekdays' => array_values( $wp_locale->weekday ),
'weekdaysShort' => array_values( $wp_locale->weekday_abbrev ),
'week' => array(
'dow' => (int) get_option( 'start_of_week', 0 ),
),
'longDateFormat' => array(
'LT' => get_option( 'time_format', __( 'g:i a', 'default' ) ),
'LTS' => null,
'L' => null,
'LL' => get_option( 'date_format', __( 'F j, Y', 'default' ) ),
'LLL' => __( 'F j, Y g:i a', 'default' ),
'LLLL' => null,
),
)
)
),
'after'
);
moment.updateLocale("' . get_user_locale() . '", {
longDateFormat : {
LT: "h:mm A",
LTS: "h:mm:ss A",
L: "MM/DD/YYYY",
LL: "MMMM Do YYYY",
LLL: "MMMM Do YYYY LT",
LLLL: "dddd, MMMM Do YYYY LT"
}
});
before init caleran. It work
.caleran({
format: "DD.MM.YYYY"
}
Maybe WP uses a modified version of moment.js without all the locales. That might be the problem yes. You dequeue moment scriptfrom wordpress and use your own moment-with-locales.min.js bundle.
Hi,
How is it possible to change the sass files and then rebuild the files to be used?
Hello alex, yes you can. if you have node.js installed, run “npm install” on the root folder of the component, (which contains package.json), then after the dependency installation finishes, run “grunt sass” to rebuild the sass files.
This item was featured on CodeCanyon
Contact the Envato Market Help Team
