Datepicker like jQuery calendar without weekends

Question

This is my first question here on StackOverflow, so I'll try to give an extra effort to ask the question "the right way".

I'm trying to create an HTML calendar dynamically with jQuery. Basically, I want my calendar to look like this but without the weekends: http://postimage.org/image/4xryen3ej/.

The calendar dates are created in a tbody element:

<table>
    <thead>
        <tr>
            <th class="weekday">Mo</th>
            <th class="weekday">Tu</th>
            <th class="weekday">We</th>
            <th class="weekday">Th</th>
            <th class="weekday">Fr</th>
        </tr>
    </thead>
    <tbody id="dates">
    </tbody>
</table>

Here is the jQuery code:

var months = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");

var now       = new Date;
var year      = now.getFullYear();
var month     = now.getMonth();
var thisMonth = now.getMonth();
var monthStart;
var monthLength;
var addDays;
var dayOfWeek;
var today;

printDate();
createCalendar();

function printDate()
{
    monthStart   = new Date(year, month, 1);
    var monthEnd = new Date(year, month + 1);
    monthLength  = Math.round((monthEnd - monthStart) / (1000 * 60 * 60 * 24));

    $("#dateToday").text(months[month] + " " + year + " " + monthLength);
}

function createCalendar()
{
    addDays   = now.getDate();
    dayOfWeek = now.getDay();
    today     = now.getDate();

    $("#dates").append("<tr>");

    for (var i = 0; addDays < monthLength + 1; i++)
    {
        if (i < dayOfWeek)
        {
            $("#dates").append("<td style=\"border: 1px solid; height: 80px\">" +
                               "<div style=\"background-color: #EEEEEE; height: 18px; text-align: right\"></div>" +
                               "<div style=\"height: 62px\"></div>" +
                               "</td>");
        }
        else
        {
            if ((addDays == today) && (now.getMonth() == month))
            {
                $("#dates").append("<td style=\"border: 1px solid; height: 80px\">" +
                                   "<div style=\"background-color: #EEEEEE; height: 18px; text-align: right\"><b>" + addDays + "</b></div>" +
                                   "<div style=\"height: 62px\"></div>" +
                                   "</td>");

                addDays = addDays + 1;
            }
            else
            {
                if (i % 5 == 0)
                {
                    addDays = addDays + 2;

                    $("#dates").append("</tr>" +
                                       "<tr>");
                }

                $("#dates").append("<td style=\"border: 1px solid; height: 80px\">" +
                                   "<div style=\"background-color: #EEEEEE; height: 18px; text-align: right\">" + addDays + "</div>" +
                                   "<div style=\"height: 62px\"></div>" +
                                   "</td>");

                addDays = addDays + 1;
            }
        }
    }
}

I know there are many examples around the net regarding this kind of problem but I still haven't been able to solve the problem, and therefore, I had to post here.

may duplicate with this question http://stackoverflow.com/questions/501943/can-the-jquery-ui-datepicker-be-made-to-disable-saturdays-and-sundays-and-holid — Willy, Jul 05 '12 at 04:28

score 0 · Answer 1 · answered Jul 05 '12 at 04:27

0

If you use the JQuery Datepicker UI. it is simple to disable the week ends

$(function() {
   $('#id').datepicker({ 
       beforeShowDay: $.datepicker.noWeekends 
   });
});

answered Jul 05 '12 at 04:27

muthu

5,381
2
33
41

Datepicker like jQuery calendar without weekends

1 Answers1