madhavan - 1 year ago 176

Javascript Question

I am developing a calender which is for menstrual cycle calculator ,I have to highlight the days for the following phase,they are

- Bleeding Days
- Fertile Phase
- Ovulation Day

- The user will choose the date when period starts
- The menstrual range by default of 28 days

With the date of period started and the cycle range,the above mentioned formulas will be applied

for calculating three different range of dates

Using the range of dates,the highlighting of dates will be applied for the year and upcoming years

The calculation steps for all the ranges

Assume that user selected date as "a"

Assume the default period cycle as "X"

bleeding days=x + 3 days

the formula provides the end date of the phase 1

phase I ranges from date selected and the end date of phase 1

Formula

b =[{a +(x-1)-19}]

c=[{a+(x-1)-10}]

Range from (b+1) till (c-1) is fertile phase range

Particular Date=[(b-1) +{(c-b)/2}]

i am using jqm calendar

Problem is: I can't figure out how to replicate the

`highlighting of days`

Answer Source

You don't have to work out all dates for all months, you only really need to work out the next two events on each update of the calendar (since you may have up to two sets of events in one month but never more). When the user navigates to the next month, you can calculate the events for that month "on the fly".

You've already got the time spans between events from which to calculate future events. I've simplified your formulae to this:

```
var periodCycleDays = 28;
var fertilePhaseStart = periodCycleDays - 20;
var fertilePhaseEnd = periodCycleDays - 11;
var ovulation = (fertilePhaseStart-1) + (fertilePhaseEnd - fertilePhaseStart)/2;
```

With this, given an initial date, you can calculate the future events for any given month. All you need to do is work out how many cycles have passed between the initial event and the month that you're looking at. Then simply multiply all of your event time spans (variables above) by the number of passed cycles and add that number of days onto the initial date.

Here's an demo of how you might do this: http://jsfiddle.net/2sf4gfdr/