Need a calendar with ability to save data to DB

[Deki]

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/...

[Evgene Karachevtsev]

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.

[Deki]

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

[Maryna Brodina]

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/

[Deki]

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
});

[Yurii Orishchuk]

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.

[Deki]

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({

[Deki]

Any thoughts on this?

[Kateryna Grynko]

Hi Deki,

Do you have a datepicker named yourDatePickerContainer?

[Deki]

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