Untitled

<html>
    <head>
        <meta charset="utf-8">
        <style>
            body{
                height: 350px;
                width: 350px;
            }
            #nowTime{
                height: 60px;
                font-family: Arial;

                color: rgb(67, 145, 226);
            }
            #nowDay{
                height: 50px;
                font-family: Arial;

                            }

        </style>
    </head>
    <body onload="all_func()">
        <script>
            function all_func(){
                var newdata = new Date;
                calendar(calendar, newdata);
                time_now();
                date_now();
                setTimeout("all_func",1000);    //calling all functions in onload
            }


            function time_now(){
                var hours = newdata.getHours();
                var minutes = newdata.getMinutes();
                if(hours < 10){
                    hours = "0" + hours;
                    }
                if(minutes < 10){
                minutes = "0" + minutes;
                    }
                var wholetime = hours + ":" +minutes;
                document.getElementById('nowTime').innerHTML = wholetime;
                setTimeout("time_now()",1000);
                }


            function date_now(){
                var dayWeek = ['Sunday','Monday','Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
                var months = ['january', 'february', 'march', 'april', 'may', 'june', 'july', 'august', 'september', 'october', 'november', 'december'];
                var wholedate = dayWeek[newdata.getDay()] + ", " + newdata.getDate() + " " + months[newdata.getMonth()] + ", " + newdata.getFullYear();
                document.getElementById('nowDay').innerHTML = wholedate;
                setTimeout("date_now()",1000);
            }


            var hol = [
                {"day": 1, "months": 0,},
                {"day": 7, "months": 0,},
                {"day": 23, "months": 1,},
                {"day": 8, "months": 2,},
                {"day": 1, "months": 4,},
                {"day": 2, "months": 4,},
                {"day": 9, "months": 4,},
                {"day": 12, "months": 5,},
                {"day": 4, "months": 10,},];//array of holidays


            function thisHol(newdata){
            //checking if this day is holidays

                for (i in hol){
                    var holi = hol[i];
                    if(newdata.getDate() == holi.day && holi.months == newdata.getMonth()) {
                        return true;
                    }

                }
                return false;
            }


            function calendar(id, newdata){

                var Year = newdata.getFullYear(); //determining current year
                var months = newdata.getMonth(); //determining current month
                var day_last = new Date(Year, months + 1, 0).getDate(); //determining last day of current month
                var last_day = new Date(Year, months, day_last); //this is last day
                var last_day_weekd = new Date(last_day.getFullYear(), last_day.getMonth(), day_last).getDay();
                var first_day_weekd = new Date(last_day.getFullYear(), last_day.getMonth(), 1).getDay();
                var rownum = 6  - 1;
                var calendar = '<tr>';
                var first_day = first_day_weekd;

                if(first_day_weekd ==0){
                    first_day = 7;
                    }

                for (var i = 1; i < first_day; i++) {
                    var day = new Date(Year, months, i - first_day + 1).getDate();
                     calendar += '<td class="other">' + day + '</td>';
                }

                for (var i = 1; i <= day_last; i++) {
                    var td = "<td";

                    if (i == newdata.getDate()) {
                        td += ' class="today"'
                    }
                    else if (thisHol(new Date(Year, months, i))) {
                        td += ' class="holiday"'
                    }

                    td += ">" + i + '</td>';
                    calendar += td;

                    if (new Date(last_day.getFullYear(), last_day.getMonth(), i).getDay() == 0) {
                        calendar += '</tr><tr>';
                        rownum --;
                    }
                }

                var next_month_day = 1;

                for (var i = last_day_weekd; i < 7; i++) {
                    var day = new Date(Year, months + 1, next_month_day).getDate();
                    calendar += '<td class="other">' + day + '</td>';

                    next_month_day++;
                }

                calendar += "</tr>";

                 for (var i = 0; i < rownum; i++) {
                    calendar += "<tr>";

                    for (var j = 0; j < 7; j++) {
                        var day = new Date(Year, months + 1, next_month_day).getDate();
                        calendar += '<td class="other">' + day + '</td>';

                        next_month_day++;
                    }

                    calendar += "</tr>";
                }

                var labelHeaders = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
                var header = "<tr>";
                for (var i in labelHeaders) {
                    header += "<th>" + labelHeaders[i] + "</th>";
                }

                header += "</tr>"
                document.querySelector('#' + id + ' thead').innerHTML = header;
                document.querySelector('#' + id + ' tbody').innerHTML = calendar;
            }
            </script>
            <div class = "center">
                <div id="nowTime" value="">
                </div>
                <div id="nowDay" value="">
                </div>
                <div id = "Calendar_">
                    <table id="calendar" cellspacing="0">
                        <thead>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
    </body>
</html>