2016 May 03 Archive - EXEIdeas – Let's Your Mind Rock

There are many plugins and snippets are available over internet to copy past and get your calendar and having different features but the main thing is to see the code weight and length. If you go for a full feature widget then can increase up your page load time that will effect bad on your SEO of web page so beside getting attraction you can get it worst.So now here we have a Pure JavaScript Calendar With Current Time widget that is light weight and have nearly all the features that you can to show your user. Check out Pure JavaScript Calendar With Current Time DEMO then garb the ready to use code and simple copy paste it to your web page and hit a run. This JavaScript Calendar With Current Time is simple awesome.CLICK HERE TO SEE DEMOFeatures:1.) No JQuery File Added.2.) JavaScript Code Added.3.) Inline CSS Added.4.) Simple And Fast Loading Widget.5.) Can Work With Any Browser.How To Add In A WebPage?1.) Just Go To Your “Web Page File”.2.) Now “Copy” The Below Codes And “Paste” It To There Positions.3.) “Save” It, Now You Are Done.JavaScript File: type="text/css">/*Copyright 1996 - Tomer and Yehuda ShiranFeel free to "steal" this code provided that you leave this notice as is.Additional examples from the book can be found at http://www.geocities.com/SiliconValley/9000/For more information contact Tomer or Yehuda Shiran */// Run FunctionsetCal();function getTime() {// initialize time-related variables with current time settingsvar now = new Date()var hour = now.getHours()var minute = now.getMinutes()now = nullvar ampm = ""// validate hour values and set value of ampmif (hour >= 12) {hour -= 12ampm = "PM"} elseampm = "AM"hour = (hour == 0) ? 12 : hour// add zero digit to a one digit minuteif (minute < 10)minute = "0" + minute // do not parse this number!// return time stringreturn hour + ":" + minute + " " + ampm}function leapYear(year) {if (year % 4 == 0) // basic rulereturn true // is leap year/* else */ // else not needed when statement is "return"return false // is not leap year}function getDays(month, year) {// create array to hold number of days in each monthvar ar = new Array(12)ar[0] = 31 // Januaryar[1] = (leapYear(year)) ? 29 : 28 // Februaryar[2] = 31 // Marchar[3] = 30 // Aprilar[4] = 31 // Mayar[5] = 30 // Junear[6] = 31 // Julyar[7] = 31 // Augustar[8] = 30 // Septemberar[9] = 31 // Octoberar[10] = 30 // Novemberar[11] = 31 // December// return number of days in the specified month (parameter)return ar[month]}function getMonthName(month) {// create array to hold name of each monthvar ar = new Array(12)ar[0] = "January"ar[1] = "February"ar[2] = "March"ar[3] = "April"ar[4] = "May"ar[5] = "June"ar[6] = "July"ar[7] = "August"ar[8] = "September"ar[9] = "October"ar[10] = "November"ar[11] = "December"// return name of specified month (parameter)return ar[month]}function setCal() {// standard time attributesvar now = new Date()var year = now.getYear()if (year < 1000)year+=1900var month = now.getMonth()var monthName = getMonthName(month)var date = now.getDate()now = null// create instance of first day of month, and extract the day on which it occursvar firstDayInstance = new Date(year, month, 1)var firstDay = firstDayInstance.getDay()firstDayInstance = null// number of days in current monthvar days = getDays(month, year)// call function to draw calendardrawCal(firstDay + 1, days, date, monthName, year)}function drawCal(firstDay, lastDate, date, monthName, year) {// constant table settingsvar headerHeight = 40 // height of the table's header cellvar border = 2 // 3D height of table's bordervar cellspacing = 4 // width of table's bordervar width = "100%"var headerColor = "FFFFFF" // color of table's headervar headerBgColor = "03A9F5";var headerSize = "+2" // size of tables header fontvar colWidth = 60 // width of columns in tablevar dayCellHeight = 25 // height of cells containing days of the weekvar dayColor = "03A9F5" // color of font representing week daysvar cellHeight = 40 // height of cells representing dates in the calendarvar todayColor = "red" // color specifying today's date in the calendarvar timeColor = "purple" // color of font representing current time// create basic table structurevar text = "" // initialize accumulative variable to empty stringtext += ' 'text += ' ' // table settingstext += ' ' // create table header celltext += ' ' // set font for table headertext += monthName + ' ' + yeartext += ' ' // close table header's font settingstext += ' ' // close header cell// variables to hold constant settingsvar openCol = ' 'openCol += ' 'var closeCol = ' '// create array of abbreviated day namesvar weekDay = new Array(7)weekDay[0] = "Sun"weekDay[1] = "Mon"weekDay[2] = "Tues"weekDay[3] = "Wed"weekDay[4] = "Thu"weekDay[5] = "Fri"weekDay[6] = "Sat"// create first row of table to set column width and specify week daytext += ' 'for (var dayNum = 0; dayNum '// declaration and initialization of two variables to help with tablesvar digit = 1var curCell = 1for (var row = 1; row 'for (var col = 1; col lastDate)breakif (curCell ';curCell++} else {if (digit == date) { // current cell represent today's datetext += ' 'text += ' 'text += digittext += ' 'text += ' 'text += ' ' + getTime() + ' 'text += ' 'text += ' '} elsetext += ' ' + digit + ' 'digit++}}text += ' '}// close all basic table tagstext += ' 'text += ' '// print accumulative HTML stringdocument.write(text);} Customization:1.) You Can Add More JavaScript. If You Are Pro, Then You Can Do Any Thing.Last Words:That’s all we have. If you have any problem with this code in your template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…