code everywhere
technology, web services and applications

UI-Calendar, a pure JS/CSS calendar

posted on April 24, 2015, 2:18 pm in

A pure JavaScript Calendar input element, acts like a form input and easy styling with CSS.

The Code

JavaScript

/*
 * UI-Calendar (April 24 2015)
 * Copyright 2015, http://codeeverywhere.ca
 * Licensed under the MIT license.
 */
(function() {
    var 
longName = ['January''February''March''April''May''June''July',
        
'August''September''October''November''December'
    
];
    var 
shortName = ['Jan''Feb''Mar''Apr''May''Jun''Jul''Aug''Sep''Oct''Nov''Dec'];

    var 
createAndAddElement = function(elclassNametextappendTo) {
        var 
el document.createElement(el);
        if (
className.length 0) {
            
el.className className;
        }
        if (
text.length 0) {
            
text document.createTextNode(text);
            
el.appendChild(text);
        }

        
appendTo.appendChild(el);
    };

    var 
loadMonth = function(yearmonthcal) {
        var
            
month month 1//since js dates are 0-11
            
= new Date(), //today
            
isEmpty month === undefined || year === undefined || month 11 || month || year 0,
            
month isEmpty t.getMonth() : month,
            
year isEmpty t.getFullYear() : year,
            
= new Date(yearmonth1),
            
daysInCurMonth = new Date(yearmonth 10).getDate(),
            
nextMonth = (month 12) % 12//+12 because javascript doesn't like -1 % mod
            
nextMonthIsInYear month == 11 year year,
            
prevMonth = (month 12) % 12,
            
prevMonthIsInYear month === year year,
            
daysInPrevMonth = new Date(prevMonthIsInYearprevMonth 10).getDate(),
            
inMonth = -1,
            
day daysInPrevMonth d.getDay() + 1,
            
dateString '',
            
curMonth longName[d.getMonth()] + ' ' d.getFullYear(),
            
headings = ["S""M""T""W""H""F""S"];

        var 
prev = {
            
yearprevMonthIsInYear,
            
monthprevMonth //set correct 1-12 scale
        
};

        var 
next = {
            
yearnextMonthIsInYear,
            
monthnextMonth //set correct 1-12 scale
        
};

        
//delete children
        
while (cal.firstChild) {
            
cal.removeChild(cal.firstChild);
        }

        
createAndAddElement("div""ui-calendar-left""❮ " shortName[prev.month 1], cal);
        
createAndAddElement("div""ui-calendar-center"curMonthcal);
        
createAndAddElement("div""ui-calendar-right"shortName[next.month 1] + " ❯"cal);

        
cal.getElementsByClassName("ui-calendar-left")[0]
            .
addEventListener("click", function() {
                
loadMonth(prev.yearprev.monthcal);
            }, 
false);

        
cal.getElementsByClassName("ui-calendar-center")[0]
            .
addEventListener("click", function() {
                
loadMonth(20154cal);
            }, 
false);

        
cal.getElementsByClassName("ui-calendar-right")[0]
            .
addEventListener("click", function() {
                
loadMonth(next.yearnext.monthcal);
            }, 
false);

        
createAndAddElement("div""ui-calendar-clear"""cal);

        for (var 
0headings.lengthx++)
            
createAndAddElement("div""ui-calendar-heading"headings[x], cal);

        
createAndAddElement("div""ui-calendar-clear"""cal);

        for (var 
06x++) {
            for (var 
0<= 6y++) {

                var 
div document.createElement("div");

                if (
inMonth == -&& day == daysInPrevMonth 1) {
                    
//move to current month, set day = 1
                    
inMonth 0;
                    
day 1;
                    
div.className "ui-calendar-day";
                } else if (
inMonth === && day === t.getDate() && month == t.getMonth()) {
                    
//highlight today
                    
div.className "ui-calendar-day ui-calendar-today";
                } else if (
inMonth === && day == t.getDate() + 1) {
                    
div.className "ui-calendar-day";
                } else if (
inMonth === && day == daysInCurMonth 1) {
                    
//move to next month, set day = 1
                    
inMonth 1;
                    
day 1;
                    
div.className "ui-calendar-day ui-calendar-light";
                } else if (
inMonth == -|| inMonth == 1) {
                    
div.className "ui-calendar-day ui-calendar-light";
                } else {
                    
div.className "ui-calendar-day";
                }

                switch (
inMonth) {
                    case -
1:
                        
dateString prevMonthIsInYear '-' + (prevMonth 1) + '-' day;
                        break;
                    case 
0:
                        
dateString year '-' + (month 1) + '-' day;
                        break;
                    case 
1:
                        
dateString nextMonthIsInYear '-' + (nextMonth 1) + '-' day;
                        break;
                }

                var 
text document.createTextNode(day);
                
div.appendChild(text);

                
div.title dateString;

                
cal.appendChild(div);

                
//add click
                
div.addEventListener("click", function() {
                    
cal.parentNode.getElementsByTagName("input")[0].value this.title;
                    
cal.className "ui-calendar-dropdown ui-calendar-hide";
                }, 
false);

                
div null;

                
day++;
            }

            
createAndAddElement("div""ui-calendar-clear"""cal);
        }
    };

    
//------------------------

    //find .ui-calendar elements
    
var uiCalendars document.getElementsByClassName("ui-calendar");

    for (var 
0uiCalendars.lengthx++) {
        var 
uiCalendar uiCalendars[x];

        var 
input document.createElement("input");
        
input.type "text";
        
input.name uiCalendar.getAttribute("data-name");
        
uiCalendar.appendChild(input);

        
createAndAddElement("div""ui-calendar-dropdown"""uiCalendar);

        var 
uiCalendarDropdown uiCalendar.getElementsByClassName("ui-calendar-dropdown");

        if (
uiCalendarDropdown.length == 1) {
            
uiCalendarDropdown uiCalendarDropdown[0];

            
uiCalendarDropdown.className "ui-calendar-dropdown ui-calendar-hide";

            
loadMonth(00uiCalendarDropdown);

            var 
input uiCalendar.getElementsByTagName("input")[0];
            
input.addEventListener("click", function() {
                
this.parentNode
                    
.getElementsByClassName("ui-calendar-dropdown")[0]
                    .
className "ui-calendar-dropdown ui-calendar-show";
            }, 
false);

            
uiCalendar.getElementsByTagName("input")[0].value "Please Select A Date";

        }

        
uiCalendarDropdown null;
        
uiCalendar null;
    }
})();

CSS

.ui-calendarpositionrelative; }
.
ui-calendar input{
    
font-size16px;
    
width247px;
    
padding5px;
}
.
ui-calendar-showdisplayblock; }
.
ui-calendar-hidedisplaynone; }
.
ui-calendar-left, .ui-calendar-right{
    
displayinline-block;
    
width65px;
    
colorred;
    
text-aligncenter;
    
cursorpointer;
}
.
ui-calendar-center{
    
width115px;
    
displayinline-block;
    
text-aligncenter;
}
.
ui-calendar-todaycolorred; }
.
ui-calendar-dropdown{
    
border1px solid #bbbbbb;
    
padding-top5px;
    
width245px;
    
positionabsolute;
    
backgroundwhite;
    
box-shadow0px 0px 8px #c0c0c0;
    
z-index9;
}
.
ui-calendar-heading{
    
displayinline-block;
    
width35px;
    
height25px;
    
padding-top10px;
    
text-aligncenter;
    
margin0;
    
border-bottom1px solid #eaeaea;
    
color#cccccc
}
.
ui-calendar-day{
    
displayinline-block;
    
cursorpointer;
    
width35px;
    
height25px;
    
padding-top10px;
    
text-aligncenter;
    
margin0;
    
border-radius25px;
}
.
ui-calendar-day:hover{
    
color#fff;
    
backgroundred;
}
.
ui-calendar-clearclearboth; }
.
ui-calendar-lightcolor#e2e2e2; }

example usage

Add the JS and CSS to your page, then use:

<div class="ui-calendar" data-name="abc"></div>

The data-name attribute is the input fields name.

Online Demo

Online demo: jsfiddle.net/5on6otga/1/

recent posts

< back