287 comments found.
Hello,
How can I add my own translations for the ranges ?
Copy these range definitions from here:
http://rettica.com/caleran/docs/readme.html#defining-custom-rangesOr from the code source, and modify it to suit your needs.
Copy these range definitions from here:
http://rettica.com/caleran/docs/readme.html#defining-custom-rangesOr from the code source, and modify it to suit your needs.
Hi bought this plugin & it’s perfect, but i need to disable all days and enable some days only, when i checked the configuration i fond that i can disable some range i need to enable ranges and disable all other thanks
Hi, you can use the disableDays method, but in a reverse manner. Only return false to the dates you want to be enabled, and to everything else return true. And thanks for buying and using it.
Like this example here: http://rettica.com/caleran/docs/readme.html#custom-disabled-ranges-with-callback-
Hello,
I’m following our previous conversation about ‘showButtons’: true. Unfortunately there seems to be an issue:
If I’ve passed startDate and endDate in the settings and set ‘showButtons’: true, the dates are not taken into account and tomorrow is set as selected start and end date. If I set ‘showButtons’: false, everything works as expected. Using caleran instance as range datepicker (obviously).
Thanks!
Can you send me an example of your initialization code? From here or from the contact box on my profile page, doesn’t matter.
This is a react wrapper of caleran. It is working perfectly fine, however changing ‘showButtons’ field causes unexpected behavior.
const caleran = $(this.datepickerInputRef).caleran({
minDate: this.props.minDate,
maxDate: this.props.maxDate,
locale: this.props.locale,
calendarCount: 1,
showFooter: false,
showButtons: false,
cancelLabel: this.props.T.Cancel,
applyLabel: this.props.T.Ok,
onafterselect: (caleran, startDate, endDate) => {
this.handleChange(startDate, endDate);
},
oninit: (caleran) => {
caleran.config.startDate = moment(this.props.startDate);
caleran.config.endDate = moment(this.props.endDate);
caleran.updateInput();
this.handleChange(caleran.config.startDate, caleran.config.endDate);
}
});
Wrap it inside code html tags. The mail I received contains the code, can you also post your handleChange method?
protected handleChange(startDate, endDate) {
const target = {
value: {
startDate: startDate,
endDate: endDate
}
}
this.props.onChange({ target });
}
Ok, here’s the catch, to force update the dates on showButtons, you need to first disable the lock to the inner update, this code will help you do that:
Change your oninit method to this:
oninit: (caleran) => {
caleran.config.startDate = moment(this.props.startDate);
caleran.config.endDate = moment(this.props.endDate);
let lastUpdateDelay = caleran.globals.delayInputUpdate;
caleran.globals.delayInputUpdate = false;
caleran.updateInput();
caleran.globals.delayInputUpdate = lastUpdateDelay;
this.handleChange(caleran.config.startDate, caleran.config.endDate);
}
So I use this code snippet and set showButtons to true and it should work as expected?
I hope so.
Okay, I’ve tried it and it works. However if that’s the case maybe consider a fix? I don’t see any relation between the selected dates and the visibility of the buttons. Thanks for the quick support!
The relation is that I needed to prevent any updates to the input before user presses the apply button. The datetime selection works but updating the input requires a leverage on showButtons property enabled. If you have any other idea, can you suggest how to fix that? You’re welcome.
Will examine the code during the weekend.
I’ll add a wrapper before the events to enable this lock releasing automatically. There won’t be a problem.
Hello,
I would like to ask if there are any events available for ‘Cancel’ and ‘Apply’ button clicks? Right now I am using ‘onafterselect’ event to detect changes, however this kinda beats the purpose of the buttons because the user can’t cancel the change after he has selected a date. (My caleran instance does not close on select).
Thanks!
Hi mcbrshishkov, doesn’t that event fire after apply button click?
I can’t tell, because I don’t know how to attach to the click event itself…
Is there an ‘onApplyButtonClick’ property or similar? I can’t find it in docs
No you understood me wrong, the “onAfterSelect” event should fire after you click the Apply button.
Unfortunately, it fires immediately after a date has been selected. I tried it on the latest Chrome, don’t know about other browsers yet.
Actually, it fires at both – select and apply click.
Are you using showButtons: true on initialization? It should work with that.
That worked, thanks! I had ‘showButtons’ set to false explicitly, which is weird because I still had buttons visible. :/
If I remembered correctly, you were using a CSS hack to show buttons on desktop before that was officially implemented. This is better for you.
No, you are taking me for someone else. I am not using any CSS hacks whatsoever.
Ok, sorry for that 
Hello, I really love the look of this calendar. I have one question. I’m using the linked date range example 7. I’m having a hard time trying to figure out how to disable any date past today’s date. I have searched over the comments and see a variety of comments but none are working for me. I see the minDate option talked about, but when I add that to your demo 7 I can still select dates before today. Please let me know where I need to edit to get this to work. Thanks!
Hi NycheDesigns, are you referring to http://rettica.com/caleran/docs/single-test-7.html as demo 7?
Sorry, yes single test 7 is what I was referring too.
Doesn’t this work?
$("#caleran-start").caleran({
minDate: moment(), // add this line
oninit: function (instance) {
Awesome, yes that worked. One other item and I’m good. How do I have the end date jump to the date selected in the start date? If I select March 23 the end date still opens on January 31. Thanks for your help.
Add this line:
endSelected = start;
to first input’s onFirstSelect event after
startSelected = start;
line.
Or better, I updated http://rettica.com/caleran/docs/single-test-7.html example.
Perfect, thanks again for the help!
You’re welcome. Thanks for using it.
How can i access the selected date value in outside of the datepepicker separately day, month ,year and day-name(monday,...)?.
You can do it like this:
var start = $("#input").data("caleran").config.startDate;
Then you can use momentjs’s accessors to get what you want.
https://momentjs.com/docs/#/get-set/when i use this code their is a console error “Uncaught TypeError: Cannot read property ‘config’ of undefined”. I tried resetting the moment.js but its not work.please give me suggestion
Hi supunsusl, I can’t see if you’ve bought the item. Please write from the account that you’ve bought it.
Hi, tpaksu!
I have a little issue 
I have one calendar on my website. It came pré selected with dates. Ok. With I change the date, I choose the 22nd day, for example, it returns to me the 21st day. Can you help me, please? 
Thanks, alot.
Hi layum, which version are you using?
v.1.3.0 ;D
Can you reproduce it also on the documentation?
what?
Try this input and tell me if it happens on here too.
Ok. Thanks !
All ok in this input !
What is different from it then in your page? Can you post me your initialization code?
$(”#dataRetirada”).caleran({ autoCloseOnSelect: true, singleDate: true, minDate: moment(), onafterselect: function(caleran, start){ var end = $(”#dataDevolucao”).data(“caleran”); end.config.startDate = moment(start); end.config.minDate = moment(start); end.config.maxDate = moment(start).add(1,”month”); end.updateInput(); end.$elem.click(); }, onbeforeshow: function(caleran){ var html = ‘ ’ + ‘ Retirada ’ + ‘ ’; $(’.caleran-header’).append(html); }, locale: userLanguage, showFooter: false });
What were you trying to do in onafterselect method? I couldn’t understand.
Were you trying to implement the linked inputs? Then the error might be on the second element’s initialization code.
After the user select one date, other calendar open to user select another date
Can you use this code:
http://rettica.com/caleran/docs/readme.html#linked-single-date-pickersdisable dates enable option events are not working .any option to get this with click disable date to enable it
1.event is firing on enable dates selecting dates range event on “onafterselect”. Any event to work disable dates selecting and range selection to enable dates
Sorry I couldn’t understand, can you explain it a little more?
event is firing on enable dates selecting dates range event on “onafterselect”. Any event to work disable dates selecting and range selection to enable dates
No there isn’t any event related to selecting disabled dates. How do you select disabled dates by the way?
I love this plugin, big thumbs up! 
In the documentation you mention the ‘setStart’-and ‘setEnd’-functions. When I call those, the dates are not selected. (I call them the same way I call the ‘setDisplayDate’-function, this last one works just fine).
$( document ).ready(function() {
var instance = $("#date-range").data("caleran");
instance.setDisplayDate("{{Date::parse($appointment->start)->format('m')}}/01/{{Date::parse($appointment->start)->format('Y')}}");
instance.setStart("{{Date::parse($appointment->start)->format('m/d/Y')}}");
instance.setEnd("{{Date::parse($appointment->end)->format('m/d/Y')}}");
});
(Note that I’m using Laravel’s blade-engine to pass in the variables)
The idea is that a predefined period is selected on default. Am I missing something here?
Kind regards, Wouter
Hi Wouter,
You can do it on initialization like this:
var start = "{{Date::parse($appointment->start)->format('m/d/Y')}}";
var end = "{{Date::parse($appointment->end)->format('m/d/Y')}}";
$("#date-range").caleran({
startDate: start,
endDate: end
format: "MM/DD/YYYY"
});
The main thing is, you need to specify the format which caleran internally uses to parse the given string date. If you want to display dates in a different format, you can use this:
var start = moment({{Date::parse($appointment->start)->format('m/d/Y')}}, "MM/DD/YYYY");
<code>var start = moment({{Date::parse($appointment->end)->format('m/d/Y')}}, "MM/DD/YYYY");
$("#date-range").caleran({
startDate: start,
endDate: end
format: "DD/MM/YYYY"
});</code>
Works like a charm! Thanks
You’re welcome
“Linked Single Date Pickers” does not work. Can you fix this, please? Thx
Hi jguerteler, I just checked it in the live documentation and it works, what’s wrong?
Hi, it seems to be a firefox (mac) specific problem. Select start date is not visible until selecting an end date.
Hi, I tried with firefox on macos 10.11 and couldn’t catch the problem. Can you prepare a screencast with gifrecorder or something?
Hi,
Is there a proper way to set the height of the calendar on mobile devices to 100vh?
Right now i’m using these events:
onaftershow: function(caleran) {
document.getElementsByClassName('caleran-calendars')[0].style.height="calc(100vh - 145px)";
},
onredraw: function(caleran) {
document.getElementsByClassName('caleran-calendars')[0].style.height="calc(100vh - 145px)";
}
And it works but it doesnt seem to be clean.
https://i.imgur.com/v54wsUN.png
Great plugin, saved me a lot of time!
Hi rainje,
You can do this by modifying the CSS file, if you can build scss files, caleran.scss line 643 contains the .caleran-calendars section. you can add height: calc(100vh – 145px); setting there.Or if you want a javascript solution, caleran.js line 1486 defines the onecalendarheight, you can modify that.
It indeed works in css with !important (didn’t know it could override style=”height: XXXpx”).
.caleran-calendars {
height: calc(100vh - 145px) !important;
}
It seems to kinda break landscape mode though. It’ll work for now I guess! Thanks!
Maybe a full viewport option for a future update? 
You might break the desktop view too. Try using media queries:
@media screen and (max-width: 768px) and (orientation: portrait){
.caleran-calendars {
height: calc(100vh - 145px) !important;
}
}
Hi! Do you offer customization? Do you have an email to contact you for custom requests?
You can contact me with the contact box on my profile for the details.
Ok email sent
Hi there,
How do I stop the calendar allowing historic date selection?
Hi you can set the mindate option to prevent past dates selection. There should be an example in the documentation.
Congratulations on the beautiful work !!!
Thank you
Hello,
Is there a way to set startEmpty = true, whilst changing the current month/year. What I am trying to achieve:
1) Start with an empty input, without passing in a startDate
2) Set min and max date to the calendar (in my case Dec 2012 – Dec 2013)
3) The current month and year should be as those of the min OR max date
I suspect the current month/year are not changing because I am not passing a startDate, however if I set startDate while startEmpty is true nothing happens. Right now I am seeing Dec 2017 as the current month when my min and max are 2012-2013.
Thanks!
if you have the last version, there should be a setDisplayDate method. You can use it to change the displayed month.
Thanks, I will update and try again with the new version.
Hi there,
I would like to report that when using the calendar in single date mode set to true, the `onfirstselect` event does not fire on date select. So I am using `onafterselect` to handle changes. Maybe I’ve not understood how `onfirstselect` works and when it should be fired.
Thanks!
Hi mcbrshishkov,
The firstselect event is only for range selection, as it’s name states, it fires on the start date selection. As the single date selection clicks decide the final date, the onafterselect event is fired when a complete range selection occurs.
What made you think that you can’t?
Greetings,
I am experiencing a UI issue with the calendar, with start and end date. The problem:
1) I am setting startDate = currentDate + 1 day (tomorrow) and endDate = currentDate + 3 days
2) I am setting the minDate = currentDate + 1 day (tomorrow)
3) If today is the last day of this month (as it is at the writing of this comment – 30 Nov), the calendar is at November, however all days are greyed out and I see December 1st to 3rd selected but they are grayed out as well.
In this edge case it would be better to set the current month of the calendar to the next month (December in this case).
Screenshot: https://imgur.com/a/RGGmQ
Hi mcbrshishkov,
Are you doing this setting on initialization or after the instance is ready? If you are setting this on initialization, it should start with the next month as first calendar, because the start date belongs to the next month.
If you’re doing it after instance is ready, you can set the
caleran.globals.currentDate = caleran.config.startDate.clone();
to set the visible month to the month which contains the start date.
Hi tpaksu,
Thanks for a grate DatePicker plugin.
Right now it outputs the date this way “29/11/2017”.
But I need it to output it this way: “2017-11-29”
How do I do that ?
Hi, change the format option to “YYYY-MM-DD”
Where do I change that ? Can’t find where to add it. Can you help ?
My script look like this right now: <script type=”text/javascript”> var userLanguage = navigator.language || navigator.userLanguage; if(userLanguage == “en”) userLanguage = “fr”; $(”#myDate”).caleran({ singleDate: true, calendarCount: 1, showHeader: false, showFooter: false, autoCloseOnSelect: true, locale: userLanguage }); </script>
Write it between the caleran initialization options like “calendarCount: 1”. Should look like
format: “YYYY-MM-DD”
Thanks It works
You’re welcome
-
This item was featured on CodeCanyon
Contact the Envato Market Help Team
