JAVASCRIPT create calendar javascript - Net-Raft.com

Welcome aboard! We are happy you are here and wish you good net-raft!




Just a Web Code Solution

create calendar using javascript


 1448

Show ResultJAVASCRIPT


2

// index.html
<html>
<head>
<title>Calendar</title>
<meta charset="utf-8" />
<script type="text/javascript" src="Script.js"></script>
<link href="stylesheet.css" type="text/css" rel="stylesheet">
</head>

<body>
<div class="calendar_js-months">
<div class="month_html_element" id="month-0" onclick="Create_Month(0);">January</div>
<div class="month_html_element" id="month-1" onclick="Create_Month(1);">February</div>
<div class="month_html_element" id="month-2" onclick="Create_Month(2);">March</div>
<div class="month_html_element" id="month-3" onclick="Create_Month(3);">April</div>
<div class="month_html_element" id="month-4" onclick="Create_Month(4);">May</div>
<div class="month_html_element" id="month-5" onclick="Create_Month(5);">June</div>
<div class="month_html_element" id="month-6" onclick="Create_Month(6);">July</div>
<div class="month_html_element" id="month-7" onclick="Create_Month(7);">August</div>
<div class="month_html_element" id="month-8" onclick="Create_Month(8);">September</div>
<div class="month_html_element" id="month-9" onclick="Create_Month(9);">October</div>
<div class="month_html_element" id="month-10" onclick="Create_Month(10);">November</div>
<div class="month_html_element" id="month-11" onclick="Create_Month(11);">December</div>
</div>

<div class="calendar_js" id="calendar_js"> </div>
<div class="year" id="year"></div>

</body>
</html>

// Script.js
var date = new Date();
date.setDate(1);

window.onload = function() {
Generate_Month(date.getMonth());
};

function dayOfWeekAsString(dayIndex) {
return ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][dayIndex];
}

function monthsAsString(monthIndex) {
return ["January", "Febuary", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"][monthIndex];
}

function createcalendar_jsDay(num, day, month) {
var currentcalendar_js = document.getElementById("calendar_js");

var newDay = document.createElement("div");
var date = document.createElement("p");
date.innerHTML = num;

var dayElement = document.createElement("p");
dayElement.innerHTML = day;

newDay.className = "calendar_js-day";

var dateActual = new Date();
if (num == dateActual.getDate() && month == dateActual.getMonth()) {
var special_jsElement = document.createElement("p");
special_jsElement.className = "special_jsElement";
newDay.appendChild(special_jsElement);
newDay.className = "calendar_js-day special_js";
}

newDay.appendChild(date);
newDay.appendChild(dayElement);

currentcalendar_js.appendChild(newDay);
}

function clearcalendar_js() {
var currentcalendar_js = document.getElementById("calendar_js");

currentcalendar_js.innerHTML = "";

}

function Create_Month(i) {
clearcalendar_js();
date.setMonth(i);
Generate_Month(date.getMonth());
}

// generate a month
function Generate_Month(month) {
var currentcalendar_js = document.getElementById("calendar_js");

var dateObject = new Date();
dateObject.setDate(date.getDate());
dateObject.setMonth(month);
dateObject.setYear(date.getFullYear());

createcalendar_jsDay(dateObject.getDate(), dayOfWeekAsString(dateObject.getDay()), dateObject.getMonth());
dateObject.setDate(dateObject.getDate() + 1);

while (dateObject.getDate() != 1) {
createcalendar_jsDay(dateObject.getDate(), dayOfWeekAsString(dateObject.getDay()), dateObject.getMonth());
dateObject.setDate(dateObject.getDate() + 1);
}

}

// stylesheet.css
body {
background-color: #4800ff;
color: #fff;
}

.calendar_js {
max-width: 600px;
margin: 0px auto;
}

.calendar_js-day {
width: 8%;
box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.1);
background-color: rgba(0, 0, 0, 0.1);
font-size: 22px;
line-height: 50%;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
margin: 5px;
text-align: center;
display: inline-block;
border-radius: 8px;
}

.special_js {
background-color: #808080;
box-shadow: 0px 2px 1px 0px black;
}

.calendar_js-day:hover {
background-color: #b6ff00;
color: black;
cursor: pointer;
}

.calendar_js-months {
text-align: center;
width: 100%;
overflow: hidden;
color: yellow;
}

.month_html_element {
display: inline-block;
margin: 15px;
cursor: pointer;
text-decoration: underline;
}


By     Created   
The power of the user (%)
5%



The most helpful JAVASCRIPT solutions

How to get client machine name or computer name with javascript ?How to get client machine name or computer name with javascript ?JAVASCRIPT

Click to see more ...

  4.9K     384

get client hostname javascriptget client hostname javascriptJAVASCRIPT

Click to see more ...

  2.6K     254

detect ie javascriptdetect ie javascriptJAVASCRIPT

Click to see more ...

  1.6K     159

Create fireworks using javascriptCreate fireworks using javascriptJAVASCRIPT

Click to see more ...

  1.5K     113

create 3d barrel using javascriptcreate 3d barrel using javascriptJAVASCRIPT

Click to see more ...

  1.4K     99

get ip address javascriptget ip address javascriptJAVASCRIPT

Click to see more ...

  805     76

how to create foreach class using javascript ?how to create foreach class using javascript ?JAVASCRIPT

Click to see more ...

  794     73

create qr code javascriptcreate qr code javascriptJAVASCRIPT

Click to see more ...

  555     71

get filename using javascript get filename using javascript JAVASCRIPT

Click to see more ...

  544     61

how to create the connect to a database with ADODB using javascript ?how to create the connect to a database with ADODB using javascript ?JAVASCRIPT

Click to see more ...

  514     59