Search jQuery

jQuery Forum

Highlight dates happened in cycled period?

in Using jQuery UI • 9 years ago

Dear all,

I am a newbie to jquery ui. I know how to highlight special days with events. However, now I want to expand this highlight to events which happen in cycled periods but I don't know how.

My projects about:

- Periods: 35days (continuous periods)

- Speed: 4 levels: low, medium, high, very high

- each period has 4 phases: 1st 5 days, then 10 days, 15 days, and last 5 days.

When this period ends, next period continue.

Please guide me to do this.

Thanks

Replies(8)

kbwood.au

Re: Highlight dates happened in cycled period?

9 years ago

The following will display the days difference between your base date and a given date, along with the phase (1 to 4).

var phases = [1, 2, 2, 3, 3, 3, 4]; // Phases per 5-day period
var base = new Date(2014, 1-1, 1); // Base date on which periods start
var given =new Date(2014, 1-1, 30); // Date to determine phase for
var diff = Math.floor((given.getTime() - base.getTime()) / (1000 * 60 * 60 * 24)); // Days difference
var phase = phases[Math.floor((diff % 35) / 5)]; // Corresponding phase
alert(diff + ' ' + phase); // Displayed!

donhathuy

Re: Highlight dates happened in cycled period?

9 years ago

Thank you very much @kbwood.au. However, I would like to put each phase into a classname so I can change its color in CSS instead of alerting it.

I think it would be easier if you can write a function which I can use in beforeShowDay like:

$('#result').datepicker({beforeShowDay: function(date){

var date_start_period = 06/01/2014;

var date_in_period = 35;

var phase1, phase2, phase3, phase4;

if (Date == date_in_phase1){ return [true, classname_for_phase1, tooltip]}

if (Date == date_in_phase2){ return [true, classname_for_phase2, tooltip]}

....

}});

All I want is to change highlight background for days which belong to phases in repeated period.

Thanks

kbwood.au

Re: Highlight dates happened in cycled period?

9 years ago

Try something like this:

var phases = [1, 2, 2, 3, 3, 3, 4]; // Phases per 5-day period
var base = new Date(2014, 6-1, 1); // Base date on which periods start
var msPerDay = (1000 * 60 * 60 * 24);
$('#result').datepicker({beforeShowDay: function(date) {
var diff = Math.floor((date.getTime() - base.getTime()) / msPerDay); // Days difference
var phase = phases[Math.floor((diff % 35) / 5)]; // Corresponding phase
return [true, 'phase' + phase];
}});

donhathuy

Re: Highlight dates happened in cycled period?

9 years ago

Dear @kbwood.au

I am grateful to your helpful, but when I tried your code, it doesn't show the calendar any longer. Can you review it?

By the way, I would like to change a little:

var phases = [5, 7, 14, 9] // fixed days

var days_in_period = 32; // can change to another day

If possible, pls run it to make sure they work and guide me with your code.

Thank you very much!

kbwood.au

Re: Highlight dates happened in cycled period?

9 years ago

Sorry, I missed a closing brace at the end:

...
}});

donhathuy

Re: Highlight dates happened in cycled period?

9 years ago

Thank you very much @kbwood.au. You save my days. It runs now.

By the way, I would like to change a little:
var phases = [5, 7, 14, 9] // fixed days
var days_in_period = 32; // can change to another day

If I want to do this, what should I change in your code? Because I can't divide it by 5 now. Plz help me.

kbwood.au

Re: Highlight dates happened in cycled period?

9 years ago

Just expand the mapping to day-by-day:

var phases = [1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 4, 4]; // Phases per day
var base = new Date(2014, 6-1, 1); // Base date on which periods start
var msPerDay = (1000 * 60 * 60 * 24);
$('#result').datepicker({beforeShowDay: function(date) {
var diff = Math.floor((date.getTime() - base.getTime()) / msPerDay); // Days difference
var phase = phases[diff % phases.length]; // Corresponding phase
return [true, 'phase' + phase];
}});

donhathuy

Re: Highlight dates happened in cycled period?

9 years ago

Thank you millions of time for your help!

Top Reply

Response title

Attachments

jQuery Forum

Highlight dates happened in cycled period?

Replies(8)

Re: Highlight dates happened in cycled period?

Re: Highlight dates happened in cycled period?

Re: Highlight dates happened in cycled period?

Re: Highlight dates happened in cycled period?

Re: Highlight dates happened in cycled period?

Re: Highlight dates happened in cycled period?

Re: Highlight dates happened in cycled period?

Re: Highlight dates happened in cycled period?

Statistics

Tags

Actions