Highlighting Current Day on Javascript Calendar

Good day everyone,
I have the script I have worked on from a book.
However, I am confused as to how I can highlight the current day of the month, so that any one looking at the calendar knows what the date is.
I would like to make the current day background color red and the text white.
I also need the current Month defaulted, say like December so it load with the calendar when the page loads.
I have been messing with this code all evening, no luck, or I am just not smart.
Any help will be greatly appreciated
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScripted Dynamic Table</title>
<script type="text/javascript">
// function becomes a method for each month object
function getFirstDay(theYear, theMonth)
var firstDate = new Date(theYear,theMonth,1);
return firstDate.getDay();
// number of days in the month
function getMonthLen(theYear, theMonth)
var oneHour = 1000 * 60 * 60;
var oneDay = oneHour * 24;
var thisMonth = new Date(theYear, theMonth, 1);
var nextMonth = new Date(theYear, theMonth + 1, 1);
var len = Math.ceil((nextMonth.getTime() -
thisMonth.getTime() - oneHour)/oneDay);
return len;
// create array of month names
theMonths = new Array("January", "February", "March", "April",
"May", "June", "July", "August", "September",
"October", "November", "December");
// deferred function to fill fields of table
function populateFields(form)
// initialize variables for later from user selections
var theMonth = form.chooseMonth.selectedIndex;
var theYear = form.chooseYear.options
[form.chooseYear.selectedIndex].value;
// initialize date-dependent variables
// which is the first day of this month?
var firstDay = getFirstDay(theYear, theMonth);
// total number of <TD>...<\/TD> tags needed in for loop below
var howMany = getMonthLen(theYear, theMonth);
// set month and year in top field
form.oneMonth.value = theMonths[theMonth] + " " + theYear;
// fill fields of table
for (var i = 0; i < 42; i++)
if (i < firstDay || i >= (howMany + firstDay))
// before and after actual dates, empty fields
// address fields by name and [index] number
form.oneDay[i].value = "";
else
// enter date values
form.oneDay[i].value = i - firstDay + 1;
</script>
</head>
<body>
<h1>Month at a Glance (Dynamic)</h1>
<hr />
<script type="text/javascript">
// Initialize variable with HTML for each day's field.
// All will have same name, so we can access via index value.
// Empty event handler prevents
//reverse-loading bug in some platforms.
var oneField = "<input type='text' name='oneDay' size='2' onfocus=''>";
// Start assembling HTML for raw table:
var content = "<form><center><table border='1'>";
// Field for month and year display at top of calendar:
content += "<tr><th colspan='7'>";
content += "<input type='text' name='oneMonth'><\/th><\/tr>";
// Days of the week at head of each column:
content += "<tr><th>Sun<\/th><th>Mon<\/th><th>Tue<\/th><th>Wed<\/th>";
content += "<th>Thu<\/th><th>Fri<\/th><th>Sat<\/th><\/tr>";
content += "<tr>";
// layout 6 rows of fields for worst-case month
for (var i = 1; i < 43; i++)
content += "<td align='middle'>" + oneField + "<\/td>";
if (i % 7 == 0)
content += "<\/tr><tr>";
content += "<\/table>";
// blast empty table to the document
document.write(content);
</script>
<form>
<select name="chooseMonth">
<option value="January" selected="selected">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<select name="chooseYear">
<option value="2010" selected="selected">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
</select>
<br />
<input type="button" name="updater" value="Update Calendar"
onclick="populateFields(this.form)" />
</form>
</body>
</html>

OK, I have worked out how to do it. My earlier problem was that I wasn't applying the style property correctly to the input field. Amend the populateFields() function like this:
function populateFields(form)
// initialize variables for later from user selections
var theMonth = form.chooseMonth.selectedIndex;
var theYear = form.chooseYear.options[form.chooseYear.selectedIndex].value;
// initialize a variable for the current month
var currentMonth = false;
// get the current date
var today = new Date();
// if the selected month and year match, it's the current month
if (today.getMonth() == theMonth && today.getFullYear() == theYear) {
    currentMonth = true;
// initialize date-dependent variables
// which is the first day of this month?
var firstDay = getFirstDay(theYear, theMonth);
// total number of <TD>...<\/TD> tags needed in for loop below
var howMany = getMonthLen(theYear, theMonth);
// set month and year in top field
form.oneMonth.value = theMonths[theMonth] + " " + theYear;
// fill fields of table
for (var i = 0; i < 42; i++)
    // reset the styles for the input fields
    form.oneDay[i].style.backgroundColor = 'white';
    form.oneDay[i].style.color = 'black';
if (i < firstDay || i >= (howMany + firstDay))
    // before and after actual dates, empty fields
    // address fields by name and [index] number
    form.oneDay[i].value = "";
else
    // enter date values
    var val = i - firstDay + 1;
    // if it's the current month and date, change the styles
    if (currentMonth && val == today.getDate()) {
      form.oneDay[i].style.backgroundColor = 'red';
      form.oneDay[i].style.color = 'white';
    form.oneDay[i].value = val;
I have added comments indicating what the new code does. You need to reset currentMonth and the styles of the input fields each time the calendar is populated. Otherwise, the old values are preserved each time you select a new month and/or year.

Similar Messages

Highlighting current day in month view of calendar

Apple shows the day highlighted in all their promo images. I searched this forum and the latest entries are 2006 and 2007. Since Apple is showing this, it should be possible. But how?
For instance, one plans a trip of two weeks. I'd like the weeks of the trip to have the squares shaded in so that the two weeks stand out. And then I can put events in the square also ...
Thanks for your help.

Diane,
Unfortunately, what you are requesting is not a feature in any version of iCal. I suggest that you provide Apple - iCal - Feedback.
The visibility of the current day highlight color is subject to the whims of the hardware and user settings. You may want to try adjusting the color of your display by using System Preferences...>Displays>Color>Calibrate..., and also System Preferences...>Universal Access>Seeing>"Enhance contrast:"

Highlighting current day in month view.....

Is there an option to highlight the current day? Maybe shade it a different color? If I look at the mini calendar in the left pane the current day is highlighted blue but on the calendar itself the box for the day is white like every other day.
Thanks in advance!

svjesser,
This often sought after feature is not available in the iCal interface.
;~)

Current day not highlighted in month view!

after updating to: OS X 10.4.9, the current day is not highlighted in the calendar view in ical. the current day is highlighted in the day and week views, just not the month. I cant find any way of turning it on. Has anyone else had this problem after uptating the system OS to 10.4.9? any help would be appreciated. it is quite annoying.

I've found a solution to this problem that has been bugging me for months. As others have reported, the "today" highlight in iCal had disappeared. I also noticed a similar problem when using Gmail. Gmail highlights read mail with a blue background on the mail item in the main list. This also disappeared. Strangely, I would see both of these highlights reappear for a moment when I did fast user-switching to a different account. Just before the Mac would switch to another account, the screen would darken and those highlights would appear. This seemed to indicate that the problem wasn't with the applications but rather with the system.
Here's how I fixed this: I went to the Display system preferences. I selected the Color tab. THe display profile was Cinema Display. I selected another profile (in my case I chose Adobe RGB (1998)). Immediately, the missing highlights reappeared. I then reselected Cinema Display and the highlights remained (although slightly lighter).
Somehow, the display profile got changed enough to wash out those light blue highlights, but switching profiles brought them back.
This worked for me on my Apple Cinema LCD display. I don't know if this will work on another brand LCD display or on a CRT. But at least I've found a way to bring these highlights back. I'll be curious if this solves anyone else's problem.
Mac OS X (10.4.9) G5 Dual 1GHz 2GB RAM

Is there a way to default the monthly calendar display so that the current day always shows on top?

Is there a way to default the monthly calendar display
so that the current day always shows on top? ie, I want to always be able to see what's in the future 3-4 weeks, not what's in the past 3-4 weeks. The default monthly display is archaic--only allows you to see through the last day of the month. Suddenly today
is Oct. 30th, and I have a ton of projects lined up in November, but because I haven't been scrolling down every day, I haven't been aware of them every day. I realize there are other tools in Microsoft to help me stay on task, such as reminders and such,
but it would be helpful if I could always have the current day display on top of the monthly view so I can quickly scan what's coming up in the next few weeks.

Thank you!
Right, I already have it in Month view. My question is a little more specific--I'd like for the current day to always display at the top. For example, today is Oct. 31st, so the current day is at the bottom of the calendar since it is the last day of the month.
I can view everything in October that I've already completed. What I can't see are the future weeks because we haven't hit November yet. I'd like for the current day to always display at the top of my calendar so I can always see what's coming in the following
three - four weeks (whether they're a part of that month or not). I've been to other forums trying to find the answer, and have come across the same exact question from frustrated users--but there seemed to be no solution. So I'm posing the question myself
in this forum. Do you know if this is possible? What I found from other forums is that Outlook defaults to a physical 'desk' type calendar format--so just as I'd use a paper calendar at my desk, I wouldn't be able to see the following weeks unless I either
flip the page to that month or I come to the first day of the next month, thereby tearing the the old month off and now only able to see the current month. That format is just so...paper...and archaic! Essentially I want the calendars to loop so it doesn't
even really matter what month it is--I just always want to see what lies ahead without having to scroll down. With our being in the Technology Age, I'd assume this is a logical expectation, but we may be stuck with the replica version of the paper-desk-calendar
format until Outlook programmers add this Technology Age feature in newer versions.
See, this month kind of messed me up because I have so many projects for November that start tomorrow and next week, but I haven't seen them until this week. I would have been better quipped--at least expecting them--had I been able to see all of those projects
since last week or the week prior.
If there is no solution to this answer, would you know how I can contact Outlook to provide feedback? I'm guessing a newer version is on its way...
Thanks again in advance!

Calendar not defaulting to current day

When I added something on my calendar last night and then I went into my calendar this morning it was still on the previous day. I then tested this by making sure the calendar was not running in the background.
Assuming the calendar is not running in the background, should the calendar open up to the current day?

I'm experiencing the same problem. I have an iPhone 3GS and ever since I upgraded to iOS 4.0 (and even the most recent 4.0.2), the day doesn't automatically change to the next day in the Calendar app as it did with the earlier iOS versions.
Is this only a glitch if you're using a 3GS? Has Apple acknowledged this problem?
Regards,
Steve

ICal has stopped highlighting the current day in month view. Is there some way to reinstate this?

It still highlights the day in day and week views. Not sure when this behavior began, but it may have been after installing ColorMunki software. Thanks for any suggestions.

svjesser,
This often sought after feature is not available in the iCal interface.
;~)

Messed up again! Help to display current day and date ...

Sorry guys and gals, I messed up again due to my noobidity, but you know the two most abundant things in the universe, are hydrogen ..... and noobidity!.
I have this page http://www.poffertjes.ch/index.html that nicely states the current day and date and it also works on all subsequent pages.
I needed a new page and figured I could just copy the code to the same position on this page: http://ppbm5.com/submission.html but behold, it just is not displayed at all.
I have been going over the code many times, but I can't figure out why the current date is not displayed at all. Can someone please show me what I did wrong?

Harm,
I gain 5 pounds each time I look at your site.
Maybe this link will help you:
http://www.mediacollege.com/internet/javascript/date-time/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Week and Day view for Calendar

All,
HTMLDB 1.6
Will HTMLDB generate a week / day view out-of-the-box, like the Month view ? If not, any suggestions on how I can generate these views myself ?
THx

Sanjay,
Currently the HTML DB Calendar only supports a Month view.
Thanks,
- Scott -

How to check the date with current day after 5 days

Hello,
I need to make the visible of delete button in my struts application. I've application in which user can be deactivated. If the user is deactivated and the admin can't delete the user for the specific period of time (set in property file). while deactivating the user, system time is set. and 5 days after the system time's set, i need to make the button visible.
This is my code.
Calendar cal = Calendar.getInstance();
Date deActivatedDate = null;
deActivatedDate =new Date(userData.getDeActivatedTime().getTime());// Set it in the Calendar object
cal.setTime(deActivatedDate); // Add 5 days
cal.add(Calendar.DATE, 5);// get the current date
Calendar currentCal = Calendar.getInstance();
Date currentDate = new Date();
currentCal.setTime(currentDate);// check if the de-activation time is over.
if (cal.get(Calendar.DATE) < currentCal.get(Calendar.DATE)) {
userData.setDeletionAllowed(true);}
can anyone help to solve this issue?

What's the problem with the code that you posted?

Highlight Current Row

Apex 4.2
Theme 21
I am able to highlight current form fields using get focus and lose focus dynamic actions.
How do I highlight the current row of a tabular form or updateable report.
I have tried using DA with
JQuery Selector tr[headers="FEE"] (column in my report)
Execute Javascript
$x_RowHighlight(this.triggeringElement,'yellow');
Any help appreciated
Gus

Gus ,
you can look at my demo ... ( the one you aked for in my other discussion)
http://apex.oracle.com/pls/apex/f?p=53793
demo / demo
when i click on on row of the IR , the text of selected row is set to red .
i m sure that you can use it to highlight your row .
Just remember that when you set for example background-color of a cell, the style of the region may hide what you try to change. I m not sure why but if you disable the region class
your modifications will appears.

I cal freezes on start up on current day.

Hi all, can anyone suggest and idiots guide and solution to my i-cal freezing on current day on start up? many thanks (if not is their a good calendar from someone else i can download that will work with my macbook?) cheers all.

deano198,
Try refreshing the iCal plist file, and the "Calendar Cache" file. You will find the "com.apple.iCal.plist" file in your Macintosh HD/Users/yourusername/Library/Preferences Folder. Quit iCal, and drag the .plist file to your Desktop.
Also find the "Calendar Cache" file in the Macintosh HD/Users/yourusername/Library/Calendars Folder. Drag the Calendar Cache file, or any other "Cache" files which may be in the Calendars Folder to the Desktop. Then log out/in or restart and check iCal for normal behavior.
;~)

To change hospitalised quota to absence days instead of calendar days

Hi experts,
Current setting hospitalised quota in my company is 40 days per annum. However, it is included non-workings days (Saturday& Sunday). I want to change the setting so that hospitalised qouta will deduct only absence day. Not Calendar days. Where the config that I can change it. Thanks in advance

Hi,
You need to change the Counting Rule and check on the option Planned Hours>0.
After this the couting rule will take into account only the weekdays.
Let me know if it resolves the issue.

Need to Display Data for Cummulated to Current Day of Current Fiscal Year

We use fiscal variant V3 (April-March). My need is to display data automatically from first of fiscal period (April 1 2006) to today.
I tried using 0CYTCD on Calendar Day but this works only for the current calendar year that the system is in i.e 2007.
Is there a standard variable I can use on 0CALDAY so I always get data from day one of current fiscal year/period to today? e.g. April 1, 2006 to January 3, 2007
If not, can someone please help with the exact customer exit code that I would need to write in CMOD in BW?
Thanks a ton!

I thought of using 0FYTCD variable, but I cannot find it in the business content.
Has anyone used 0FYTCD (Fiscal year to current day) in BW 3.1 SP25?
Again, I am looking for a variable that would get me the beginning of fiscal year to today.
Thanks.

How to interpret the current day of the month

I am a rookie in java and am trying to play with the Calendar class.
The DATE static field of this class says it returns "Field number for get and set indicating the day of the month."
So, Calendar.DATE has to return the current day of the month.
Today is 7th of january. So, it should return 7. But, I am getting a value of 5.
I am very much confused. I fell that my interpretation os wrong.
Please help.............
Thanks in advance.

You must NOT confuse the value of the constant Calendar.DATE (5) and how you can use that constant to retrieve the current day of the month.
        Calendar cal = Calendar.getInstance(); // Gets the current date
        int dayOfMonth = cal.get(Calendar.DATE); // Gets he current day of the month from the current date
                                                 // (Using the Calendar.DATE constant as method parameter).
        System.out.println("Calendar.DATE = " + Calendar.DATE); // Prints the constant
        System.out.println("dayOfMonth = " + dayOfMonth); // Prints the current day of month

Highlighting Current Day on Javascript Calendar

Similar Messages

Maybe you are looking for