Forum | Appery.io

Hello Apperyio team,

Can anyone suggest me a way to display a calendar with abilities to color code the days based on certain criteria and logic within the app. I need something like the following

1) user logs in every day and answers a question like "how did you sleep last night, 'good' or 'bad'?
2) the app would record the user input in the database (for example 'good')
3) then a calendar is updated with the day marked as good with a green color for that particular day. If the user answers 'bad' then the day on the calendar is marked with a red color

Any ideas on how I can implement this functionality?

Here is an example of something related to what I'm looking for. But, I would only need 2 colors
http://www.lakemaryhs.scps.k12.fl.us/...

Hello Deki,

You can use for your purpose appery.io datepicker component: http://docs.appery.io/documentation/u...
or jQuery mobile component datepicker: http://demos.jquerymobile.com/1.4.0/d...
Thus you can choose date and save record with desired value to the DB: http://docs.appery.io/documentation/b....
Also you can get records from your DB with query service: http://docs.appery.io/documentation/b...
Then you should implement your custom logic with JS to set appropriate color to date cell in the datepicker.

Can you give me an example of the custom logic with JS that I can use to set an appropriate color to date cell? How would I do that? Thanks

Hello Deki!

We can try to help you with some specific problem/question, but custom app logic and custom JS are outside the scope of our support according to our support policy http://docs.appery.io/support-policy/

Ok, well I have a question about binding the date picker to jQuery

If I put a datepicker with id mobiledatepicker_1 then how can I bind it to the following code. I'm having a hard time getting a reference to the datepicker...

$('input').datepicker({
dateFormat: "yy-mm-dd",
minDate: "-0d",
maxDate: "+90d",
firstDay: 0,
beforeShowDay: noWeekendsOrHolidaysOrBlockedDates
});

Hi Deki.

Please provide us more information about your code:

1 screen shoot of code.

2 where do you invoke it.

3 screen shot of component with settings on which you are set datepicker.

Also there is a simple way to add datePicker on the page:

1 Add HTML component on the page. Set type "div". And give it name "yourDatePickerContainer" . http://prntscr.com/3io08g/direct

2 Add JS event handler on "page load" event and populate it with following code:

pre
code

Appery('yourDatePickerContainer').datepicker({
dateFormat: "yy-mm-dd",
minDate: "-0d",
maxDate: "+90d",
firstDay: 0
});

/code
/pre

Regards.

Hi Yurii,

I have followed the steps 1 and 2 you have provided, but I get an error in the console on Page Load event

Uncaught TypeError: undefined is not a function

It points to the first line -- Appery('yourDatePickerContainer').datepicker({

Any thoughts on this?

Hi Deki,

Do you have a datepicker named yourDatePickerContainer?

I thought that was the name of the div tag? That's how it is presented in the image that Yurii posted...