PDA

View Full Version : Javascript help



jimk
02-11-2017, 05:37 PM
I have created a calendar and I have been looking for a JS that will highlight the current day but have not been able to find such. I have found other calendars that have this feature but the calendar it self does not suit my purpose and looking at the script on those calendars does not appear to be that adaptable to my cal with my limited knowledge of JS. Any help would be appreciated.

jscheuer1
02-11-2017, 06:20 PM
We would need to see your calendar.

jimk
02-11-2017, 09:26 PM
Attached Zip File contains an html file

jimk
02-11-2017, 09:27 PM
see attached

jscheuer1
02-11-2017, 10:23 PM
It might help to know what's in java/cdate.js, but even without that I think I can give you an idea:


;(function(){
var monthyear = document.getElementsByTagName('h1')[0].childNodes, mname = monthyear[0].nodeValue, yr = monthyear[2].nodeValue,
mos = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
d = new Date(), days, thedate, dl;
if(mos[d.getMonth()] === mname && d.getFullYear() === +yr){
days = document.getElementsByTagName('li'); thedate = d.getDate(); dl = days.length;
while(--dl > -1){
if(thedate === +days[dl].firstChild.nodeValue){
days[dl].style.color = 'hotpink';
break;
}
}
}
})();

Demo:

http://jscheuer1.com/demos/tidbits/calendar-h/template1.html

NOTES: The script can be external or it's code added at the end of your existing script. It may even be able to be integrated with the existing script (I'd have to see said script to know that). Also, this code I'm supplying depends upon your markup following the template more or less exactly with just minor variations as required for each different month. If that's not workable for you, I can offer a number of suggestions that would make it easier and more flexible. However, as long as you truly follow what you've set out here as a template, then it will always work. Further, different effects are possible. Background in addition to, or instead of color can be changed for the active date, or a class name or id could be added to the active date element instead of directly writing to the date's element's style, then whatever attributes are desired for the active date could be set in the stylesheet. Oh, and you have a somewhat serious problem. If the window is narrower than your HTML/css expects, things get out of alignment.

jimk
02-12-2017, 02:43 PM
Thanks for the reply.
1. I copied your script from message board into my calendar got a script error but I don't remember what it was
2. I downloaded your demo and it worked OK, then I tried to change color to background-color and got a script error "syntax error", I put it back to the way it was but still get the same error.
3. I deleted the demo and downloaded it again and it works fine so I copied your script from the demo into my calendar and nothing happens, no error and no color date.
Any idea what is going on?

jscheuer1
02-12-2017, 03:51 PM
1 Sounds like there might be a lot of imprecise copying/editing going on. This applies to 2 and 3 as well.

2 Could partly be that if you want background-color, it needs to be backgroundColor in that context.

3 Maybe your calendar has different enough html from the demo you showed me not to work. I would have to see it. Can you put up a live demo of the problem?