Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Need Calendar Script

  1. #1
    Join Date
    Mar 2006
    Location
    NY
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Need Calendar Script

    I am looking for a calendar script that will show my availability to potential clients. I am using FrontPage 03 as my editor (simply because it came with my computer package and I can't afford Dreamweaver and am a slave to GUI).

    I like this: http://www.dynamicdrive.com/dynamici...iccalendar.htm

    but need to be able to block out individual days as I book them.

    Here's the current page without java: www.fishwithafly.net/availability.htm (it takes too long to load.)

    Thanks for your help.
    Last edited by Troutslayer; 03-06-2006 at 10:33 PM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Block out, how? Would a different color background for those dates be sufficient?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2006
    Location
    NY
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Sure. If that's an easy solution...I don't know how to write java script but have figured out how to manipulate it through trial and error. I do not see a code for the basiccalendar script that will allow me to change the font on numbers or backgrounds.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Well then, all you need is this bit of code (red) after the buildCal calls (otherwise from the demo):

    Code:
    <script type="text/javascript">
    
    var todaydate=new Date()
    var curmonth=todaydate.getMonth()+1 //get current month (1-12)
    var curyear=todaydate.getFullYear() //get current year
    
    document.write(buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1)+'<br>');
    document.write(buildCal(curmonth+1 ,curyear, "main", "month", "daysofweek", "days", 1)+'<br>');
    
    function block_dates(){
    
    //Configure blocked dates and blocked color below
    var blocked=[['April',8], ['March',1], ['March',6], 
    ['March',7], ['March',23], ['April',17]]
    var blocked_color='lightblue'
    
    ////////////////Stop Editing/////////////
    var dates=document.getElementsByTagName('td')
    var c_month
    for (var j_tem = 0; j_tem < blocked.length; j_tem++)
    for (var i_tem = 0; i_tem < dates.length; i_tem++){
    if (dates[i_tem].className=='month')
    c_month=dates[i_tem].innerHTML
    if (dates[i_tem].className=='days'&&c_month.indexOf(blocked[j_tem][0])>-1&&dates[i_tem].innerHTML.indexOf(blocked[j_tem][1])>-1){
    dates[i_tem].style.backgroundColor=blocked_color
    break
    }
    }
    }
    block_dates();
    </script>
    Notes: As you can see, the order of the blocked dates doesn't matter. If you need a line break in the blocked dates entries, do it after a comma that follows a closing bracket, as shown above. Don't forget the extra opening and closing brackets that delimit the entire array of blocked dates or the single quotes delimiting the month name in each entry. Also note that there is no comma after the last entry in the blocked array. Case matters with the month names. If you use several script blocks on your page to set up the various calendars (like the 'Displaying multiple calendar months' example using a table on the demo page), you can use the red code alone in a script block as long as it is after all of the buildCal calls on the page.
    Last edited by jscheuer1; 03-07-2006 at 06:26 AM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Here is a slightly more robust version:

    Code:
    <script type="text/javascript">
    function block_dates(){
    
    //Configure blocked dates
    var blocked=[['April',8], ['March',1], ['March',6], 
    ['March',7], ['March',23], ['Feb',11]]
    
    //Configure blocked background color
    var blocked_color='lightblue'
    
    //Configure block all weekdays by month
    var blocked_weekdays=['Feb', 'April']
    
    ////////////////Stop Editing/////////////
    
    function get_col(cell){
    var r=cell.parentNode.childNodes
    for (var i_tem = 0; i_tem < r.length; i_tem++)
    if (r[i_tem]==cell)
    break
    return i_tem;
    }
    var dates=document.getElementsByTagName('td')
    var c_month=''
    
    for (var j_tem = 0; j_tem < blocked_weekdays.length; j_tem++)
    for (var i_tem = 0; i_tem < dates.length; i_tem++){
    if (dates[i_tem].className=='month')
    c_month=dates[i_tem].innerHTML
    if (dates[i_tem].className=='days'&&get_col(dates[i_tem])>0&&get_col(dates[i_tem])<6&&c_month.indexOf(blocked_weekdays[j_tem])>-1&&/\d/.test(dates[i_tem].innerHTML))
    dates[i_tem].style.backgroundColor=blocked_color
    }
    
    for (var j_tem = 0; j_tem < blocked.length; j_tem++)
    for (var i_tem = 0; i_tem < dates.length; i_tem++){
    if (dates[i_tem].className=='month')
    c_month=dates[i_tem].innerHTML
    if (dates[i_tem].className=='days'&&c_month.indexOf(blocked[j_tem][0])>-1&&dates[i_tem].innerHTML.indexOf(blocked[j_tem][1])>-1){
    dates[i_tem].style.backgroundColor=blocked_color
    break
    }
    }
    }
    block_dates();
    
    </script>
    Last edited by jscheuer1; 03-07-2006 at 03:12 PM. Reason: add refinement to cell selection to prevent bug
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Aug 2006
    Posts
    116
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    Well then, all you need is this bit of code (red) after the buildCal calls (otherwise from the demo):

    Code:
    <script type="text/javascript">
    
    var todaydate=new Date()
    var curmonth=todaydate.getMonth()+1 //get current month (1-12)
    var curyear=todaydate.getFullYear() //get current year
    
    document.write(buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1)+'<br>');
    document.write(buildCal(curmonth+1 ,curyear, "main", "month", "daysofweek", "days", 1)+'<br>');
    
    function block_dates(){
    
    //Configure blocked dates and blocked color below
    var blocked=[['April',8], ['March',1], ['March',6], 
    ['March',7], ['March',23], ['April',17]]
    var blocked_color='lightblue'
    
    ////////////////Stop Editing/////////////
    var dates=document.getElementsByTagName('td')
    var c_month
    for (var j_tem = 0; j_tem < blocked.length; j_tem++)
    for (var i_tem = 0; i_tem < dates.length; i_tem++){
    if (dates[i_tem].className=='month')
    c_month=dates[i_tem].innerHTML
    if (dates[i_tem].className=='days'&&c_month.indexOf(blocked[j_tem][0])>-1&&dates[i_tem].innerHTML.indexOf(blocked[j_tem][1])>-1){
    dates[i_tem].style.backgroundColor=blocked_color
    break
    }
    }
    }
    block_dates();
    </script>
    Notes: As you can see, the order of the blocked dates doesn't matter. If you need a line break in the blocked dates entries, do it after a comma that follows a closing bracket, as shown above. Don't forget the extra opening and closing brackets that delimit the entire array of blocked dates or the single quotes delimiting the month name in each entry. Also note that there is no comma after the last entry in the blocked array. Case matters with the month names. If you use several script blocks on your page to set up the various calendars (like the 'Displaying multiple calendar months' example using a table on the demo page), you can use the red code alone in a script block as long as it is after all of the buildCal calls on the page.
    Hi

    How would i go about using the blocked out dates code for the dynamic version of this calander script please

    Script url

    http://www.dynamicdrive.com/dynamici...iccalendar.htm

    Thanks

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    
    .main {
    width:200px;
    border:1px solid black;
    }
    
    .month {
    background-color:black;
    font:bold 12px verdana;
    color:white;
    }
    
    .daysofweek {
    background-color:gray;
    font:bold 12px verdana;
    color:white;
    }
    
    .days {
    font-size: 12px;
    font-family:verdana;
    color:black;
    background-color: lightyellow;
    padding: 2px;
    }
    
    .days #today{
    font-weight: bold;
    color: red;
    }
    
    </style>
    
    
    <script type="text/javascript" src="basiccalendar.js">
    
    /***********************************************
    * Basic Calendar-By Brian Gosselin at http://scriptasylum.com/bgaudiodr/
    * Script featured on Dynamic Drive (http://www.dynamicdrive.com)
    * This notice must stay intact for use
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    </script> 
    </head>
    <body>
    <script type="text/javascript">
    
    var todaydate=new Date()
    var curmonth=1
    var curyear=todaydate.getFullYear() //get current year
    
    </script>
    
    <table border="0" cellspacing="0" cellpadding="3">
    <tr>
    <td width="33%">
    <script>
    document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
    </script></td>
    <td width="33%">
    <script>
    document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
    </script></td>
    <td width="34%">
    <script>
    document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
    </script></td>
    </tr>
    <tr>
    <td width="33%">
    <script>
    document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
    </script></td>
    <td width="33%">
    <script>
    document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
    </script></td>
    <td width="34%">
    <script>
    document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
    </script></td>
    </tr>
    <tr>
    <td width="33%">
    <script>
    document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
    </script></td>
    <td width="33%">
    <script>
    document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
    </script></td>
    <td width="34%">
    <script>
    document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
    </script></td>
    </tr>
    <tr>
    <td width="33%">
    <script>
    document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
    </script></td>
    <td width="33%">
    <script>
    document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
    </script></td>
    <td width="34%">
    <script>
    document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
    </script></td>
    </tr>
    </table>
    <script type="text/javascript">
    function block_dates(){
    
    //Configure blocked dates
    var blocked=[['April',8], ['March',1], ['March',6], 
    ['March',7], ['March',23], ['Feb',11]]
    
    //Configure blocked background color
    var blocked_color='lightblue'
    
    //Configure block all weekdays by month
    var blocked_weekdays=['Feb', 'April']
    
    ////////////////Stop Editing/////////////
    
    function get_col(cell){
    var r=cell.parentNode.childNodes
    for (var i_tem = 0; i_tem < r.length; i_tem++)
    if (r[i_tem]==cell)
    break
    return i_tem;
    }
    var dates=document.getElementsByTagName('td')
    var c_month=''
    
    for (var j_tem = 0; j_tem < blocked_weekdays.length; j_tem++)
    for (var i_tem = 0; i_tem < dates.length; i_tem++){
    if (dates[i_tem].className=='month')
    c_month=dates[i_tem].innerHTML
    if (dates[i_tem].className=='days'&&get_col(dates[i_tem])>0&&get_col(dates[i_tem])<6&&c_month.indexOf(blocked_weekdays[j_tem])>-1&&/\d/.test(dates[i_tem].innerHTML))
    dates[i_tem].style.backgroundColor=blocked_color
    }
    
    for (var j_tem = 0; j_tem < blocked.length; j_tem++)
    for (var i_tem = 0; i_tem < dates.length; i_tem++){
    if (dates[i_tem].className=='month')
    c_month=dates[i_tem].innerHTML
    if (dates[i_tem].className=='days'&&c_month.indexOf(blocked[j_tem][0])>-1&&dates[i_tem].innerHTML.indexOf(blocked[j_tem][1])>-1){
    dates[i_tem].style.backgroundColor=blocked_color
    break
    }
    }
    }
    block_dates();
    
    </script>
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Here's another way that always starts with the current month, and is more compact:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Basic Calendar - Full Year w/ Blocked Dates - Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    
    .main {
    width:200px;
    border:1px solid black;
    }
    
    .month {
    background-color:black;
    font:bold 12px verdana;
    color:white;
    }
    
    .daysofweek {
    background-color:gray;
    font:bold 12px verdana;
    color:white;
    }
    
    .days {
    font-size: 12px;
    font-family:verdana;
    color:black;
    background-color: lightyellow;
    padding: 2px;
    }
    
    .days #today {
    font-weight: bold;
    color: red;
    }
    
    </style>
    <script type="text/javascript" src="basiccalendar.js">
    
    /***********************************************
    * Basic Calendar-By Brian Gosselin at http://scriptasylum.com/bgaudiodr/
    * Script featured on Dynamic Drive (http://www.dynamicdrive.com)
    * This notice must stay intact for use
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    </script> 
    </head>
    <body>
    <script type="text/javascript">
    
    //Configure blocked dates
    var blocked=[['April',8], ['March',1], ['March',6], 
    ['March',7], ['March',23], ['Feb',11]]
    
    //Configure blocked background color
    var blocked_color='lightblue'
    
    //Configure block all weekdays by month
    var blocked_weekdays=['Feb', 'April']
    
    ////////////////Stop Editing/////////////
    
    var todaydate=new Date();
    var curmonth=todaydate.getMonth()+1; //get current month (1-12)
    var curyear=todaydate.getFullYear(); //get current year
    function doit(){var c=curmonth++;
    document.write(buildCal( (c>12? c-12 : c),(c>12? curyear+1 : curyear), "main", "month", "daysofweek", "days", 1));};
    ;(function(){
    document.write('<table border="0" cellspacing="0" cellpadding="3">');
    for (var i = 0; i < 4; i++){
    document.write('<tr>')
    for (var j = 0; j < 3; j++)
    document.write('<td width="33%"><script>doit();<\/script><\/td>');
    document.write('<\/tr>');
    };
    document.write('<\/table>');
    
    var block_dates=function (){
    var get_col=function (cell){
    var r=cell.parentNode.childNodes;
    for (var i_tem = 0; i_tem < r.length; i_tem++)
    if (r[i_tem]==cell)
    break;
    return i_tem;
    }
    var dates=document.getElementsByTagName('td');
    var c_month='';
    
    for (var j_tem = 0; j_tem < blocked_weekdays.length; j_tem++)
    for (var i_tem = 0; i_tem < dates.length; i_tem++){
    if (dates[i_tem].className=='month')
    c_month=dates[i_tem].innerHTML;
    if (dates[i_tem].className=='days'&&get_col(dates[i_tem])>0&&get_col(dates[i_tem])<6&&c_month.indexOf(blocked_weekdays[j_tem])>-1&&/\d/.test(dates[i_tem].innerHTML))
    dates[i_tem].style.backgroundColor=blocked_color;
    };
    
    for (var j_tem = 0; j_tem < blocked.length; j_tem++)
    for (var i_tem = 0; i_tem < dates.length; i_tem++){
    if (dates[i_tem].className=='month')
    c_month=dates[i_tem].innerHTML;
    if (dates[i_tem].className=='days'&&c_month.indexOf(blocked[j_tem][0])>-1&&dates[i_tem].innerHTML.indexOf(blocked[j_tem][1])>-1){
    dates[i_tem].style.backgroundColor=blocked_color;
    break;
    };};}
    block_dates();})();
    </script>
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Aug 2006
    Posts
    116
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you very much!

  10. #10
    Join Date
    Aug 2006
    Posts
    116
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    
    .main {
    width:200px;
    border:1px solid black;
    }
    
    .month {
    background-color:black;
    font:bold 12px verdana;
    color:white;
    }
    
    .daysofweek {
    background-color:gray;
    font:bold 12px verdana;
    color:white;
    }
    
    .days {
    font-size: 12px;
    font-family:verdana;
    color:black;
    background-color: lightyellow;
    padding: 2px;
    }
    
    .days #today{
    font-weight: bold;
    color: red;
    }
    
    </style>
    
    
    <script type="text/javascript" src="basiccalendar.js">
    
    /***********************************************
    * Basic Calendar-By Brian Gosselin at http://scriptasylum.com/bgaudiodr/
    * Script featured on Dynamic Drive (http://www.dynamicdrive.com)
    * This notice must stay intact for use
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    </script> 
    </head>
    <body>
    <script type="text/javascript">
    
    var todaydate=new Date()
    var curmonth=1
    var curyear=todaydate.getFullYear() //get current year
    
    </script>
    
    <table border="0" cellspacing="0" cellpadding="3">
    <tr>
    <td width="33%">
    <script>
    document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
    </script></td>
    <td width="33%">
    <script>
    document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
    </script></td>
    <td width="34%">
    <script>
    document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
    </script></td>
    </tr>
    <tr>
    <td width="33%">
    <script>
    document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
    </script></td>
    <td width="33%">
    <script>
    document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
    </script></td>
    <td width="34%">
    <script>
    document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
    </script></td>
    </tr>
    <tr>
    <td width="33%">
    <script>
    document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
    </script></td>
    <td width="33%">
    <script>
    document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
    </script></td>
    <td width="34%">
    <script>
    document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
    </script></td>
    </tr>
    <tr>
    <td width="33%">
    <script>
    document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
    </script></td>
    <td width="33%">
    <script>
    document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
    </script></td>
    <td width="34%">
    <script>
    document.write(buildCal(curmonth++ ,curyear, "main", "month", "daysofweek", "days", 1));
    </script></td>
    </tr>
    </table>
    <script type="text/javascript">
    function block_dates(){
    
    //Configure blocked dates
    var blocked=[['April',8], ['March',1], ['March',6], 
    ['March',7], ['March',23], ['Feb',11]]
    
    //Configure blocked background color
    var blocked_color='lightblue'
    
    //Configure block all weekdays by month
    var blocked_weekdays=['Feb', 'April']
    
    ////////////////Stop Editing/////////////
    
    function get_col(cell){
    var r=cell.parentNode.childNodes
    for (var i_tem = 0; i_tem < r.length; i_tem++)
    if (r[i_tem]==cell)
    break
    return i_tem;
    }
    var dates=document.getElementsByTagName('td')
    var c_month=''
    
    for (var j_tem = 0; j_tem < blocked_weekdays.length; j_tem++)
    for (var i_tem = 0; i_tem < dates.length; i_tem++){
    if (dates[i_tem].className=='month')
    c_month=dates[i_tem].innerHTML
    if (dates[i_tem].className=='days'&&get_col(dates[i_tem])>0&&get_col(dates[i_tem])<6&&c_month.indexOf(blocked_weekdays[j_tem])>-1&&/\d/.test(dates[i_tem].innerHTML))
    dates[i_tem].style.backgroundColor=blocked_color
    }
    
    for (var j_tem = 0; j_tem < blocked.length; j_tem++)
    for (var i_tem = 0; i_tem < dates.length; i_tem++){
    if (dates[i_tem].className=='month')
    c_month=dates[i_tem].innerHTML
    if (dates[i_tem].className=='days'&&c_month.indexOf(blocked[j_tem][0])>-1&&dates[i_tem].innerHTML.indexOf(blocked[j_tem][1])>-1){
    dates[i_tem].style.backgroundColor=blocked_color
    break
    }
    }
    }
    block_dates();
    
    </script>
    </body>
    </html>
    Thanks for the help youve given me so far.

    But could you please take a look at the below code, ive replaced the Displaying multiple calendar months part of the script with the Display an entire year dynamically option. The script you provided me with now looks like this.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    <style type="text/css">
    
    .main {
    width:200px;
    border:1px solid black;
    }
    
    .month {
    background-color:black;
    font:bold 12px verdana;
    color:white;
    }
    
    .daysofweek {
    background-color:gray;
    font:bold 12px verdana;
    color:white;
    }
    
    .days {
    font-size: 12px;
    font-family:verdana;
    color:black;
    background-color: lightyellow;
    padding: 2px;
    }
    
    .days #today{
    font-weight: bold;
    color: red;
    }
    
    </style>
    
    
    <script type="text/javascript" src="basiccalendar.js">
    
    /***********************************************
    * Basic Calendar-By Brian Gosselin at http://scriptasylum.com/bgaudiodr/
    * Script featured on Dynamic Drive (http://www.dynamicdrive.com)
    * This notice must stay intact for use
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    </script> 
    </head>
    <body>
    <form>
    <select onChange="updatecalendar(this.options)">
    <script type="text/javascript">
    
    var themonths=['January','February','March','April','May','June',
    'July','August','September','October','November','December']
    
    var todaydate=new Date()
    var curmonth=todaydate.getMonth()+1 //get current month (1-12)
    var curyear=todaydate.getFullYear() //get current year
    
    function updatecalendar(theselection){
    var themonth=parseInt(theselection[theselection.selectedIndex].value)+1
    var calendarstr=buildCal(themonth, curyear, "main", "month", "daysofweek", "days", 0)
    if (document.getElementById)
    document.getElementById("calendarspace").innerHTML=calendarstr
    }
    
    document.write('<option value="'+(curmonth+1)+'" selected="yes"></option>')
    for (i=0; i<12; i++) //display option for 12 months of the year
    document.write('<option value="'+i+'">'+themonths[i]+' '+curyear+'</option>')
    
    
    </script>
    </select>
    
    <div id="calendarspace">
    <script>
    //write out current month's calendar to start
    document.write(buildCal(curmonth, curyear, "main", "month", "daysofweek", "days", 0))
    </script>
    </div>
    
    </form><script type="text/javascript">
    function block_dates(){
    
    //Configure blocked dates
    var blocked=[['January',18], ['February',11], ['March',6], 
    ['March',7], ['March',23], ['Feb',11]]
    
    //Configure blocked background color
    var blocked_color='lightblue'
    
    //Configure block all weekdays by month
    var blocked_weekdays=['Feb', 'April']
    
    ////////////////Stop Editing/////////////
    
    function get_col(cell){
    var r=cell.parentNode.childNodes
    for (var i_tem = 0; i_tem < r.length; i_tem++)
    if (r[i_tem]==cell)
    break
    return i_tem;
    }
    var dates=document.getElementsByTagName('td')
    var c_month=''
    
    for (var j_tem = 0; j_tem < blocked_weekdays.length; j_tem++)
    for (var i_tem = 0; i_tem < dates.length; i_tem++){
    if (dates[i_tem].className=='month')
    c_month=dates[i_tem].innerHTML
    if (dates[i_tem].className=='days'&&get_col(dates[i_tem])>0&&get_col(dates[i_tem])<6&&c_month.indexOf(blocked_weekdays[j_tem])>-1&&/\d/.test(dates[i_tem].innerHTML))
    dates[i_tem].style.backgroundColor=blocked_color
    }
    
    for (var j_tem = 0; j_tem < blocked.length; j_tem++)
    for (var i_tem = 0; i_tem < dates.length; i_tem++){
    if (dates[i_tem].className=='month')
    c_month=dates[i_tem].innerHTML
    if (dates[i_tem].className=='days'&&c_month.indexOf(blocked[j_tem][0])>-1&&dates[i_tem].innerHTML.indexOf(blocked[j_tem][1])>-1){
    dates[i_tem].style.backgroundColor=blocked_color
    break
    }
    }
    }
    block_dates();
    
    </script>
    </body>
    </html>

    The dynamic calander displays correctly apart from it shows January twice and i can only highlight the dates i want in January.

    Is there a way of getting this to work correctly with the dynamic calander?

    Thanks again
    Last edited by jscheuer1; 01-16-2008 at 04:01 PM. Reason: add code tags

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •