savic7
Wallet Guru
2
MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1
300 XP
In this tutorial, we are going to create Simple Calendar in JavaScript. This simple work creates using JavaScript and HTML. The users enable to navigate the calendar by his/her choice of month. Using a drop down menu to select what they want to display or show in the web page.
Visit the Live Demo, kindly click the button below.
⚙ Live Demo
We are going to construct the Markup for the drop down function to choose the desired month to display in the web page.
In the source code below, shows all the list of a month in the drop down, then one textbox for the year, and a button to execute.
And, we have to code for the controls in a calendar. It contains a next and previous button. Take a look a simple source code below.
This is the script where we can set up the Year, Month, Day, and Date Today. Look the script below.
Use this script to select Month in the web page using a select tag.
And, this script helps us to navigate the calendar whether you can Next or Previous in the Month or Year.
Output
⚙ Live Demo
That's it, you have a calendar after compiling all the source code above. For the full source code, kindly download below. Thank you.
Download
Visit the Live Demo, kindly click the button below.
⚙ Live Demo
We are going to construct the Markup for the drop down function to choose the desired month to display in the web page.
In the source code below, shows all the list of a month in the drop down, then one textbox for the year, and a button to execute.
- <form
name
=
"calControl"
onSubmit
=
"return false;"
method
=
"post"
>
- <table
cellpadding
=
"0"
cellspacing
=
"0"
border
=
"0"
>
- <tr
>
- <td
colspan
=
"7"
>
- <select
class
=
"month_style"
name
=
"month"
onChange
=
"selectdate()"
>
- <option
>
January</
option
>
- <option
>
February</
option
>
- <option
>
March</
option
>
- <option
>
April</
option
>
- <option
>
May</
option
>
- <option
>
June</
option
>
- <option
>
July</
option
>
- <option
>
August</
option
>
- <option
>
September</
option
>
- <option
>
October</
option
>
- <option
>
November</
option
>
- <option
>
December</
option
>
- </
select
>
- <input
type
=
"text"
class
=
"year_style"
name
=
"year"
size
=
"4"
maxlength
=
"4"
>
- <input
type
=
"button"
class
=
"build_style"
name
=
"Go"
value
=
"Find . . ."
onClick
=
"selectDate()"
>
- </
td
>
- </
tr
>
- </
form
>
And, we have to code for the controls in a calendar. It contains a next and previous button. Take a look a simple source code below.
- <form
name
=
"calButtons"
method
=
"post"
>
- <tr
>
- <td
><textarea
font=
"Courier"
class
=
"area_style"
name
=
"calPage"
WRAP=
"no"
rows
=
"8"
cols
=
"22"
disabled></
textarea
></
td
>
- <tr
>
- <td
>
- <input
type
=
"button"
class
=
"btn_nav"
name
=
"previousYear"
value
=
" << "
onClick
=
"setPreviousYear()"
>
- <input
type
=
"button"
class
=
"btn_nav"
name
=
"previousYear"
value
=
" < "
onClick
=
"setPreviousMonth()"
>
- <input
type
=
"button"
class
=
"btn_nav"
name
=
"previousYear"
value
=
"Today"
onClick
=
"setToday()"
>
- <input
type
=
"button"
class
=
"btn_nav"
name
=
"previousYear"
value
=
" >
" onClick="setNextMonth()">
- <input
type
=
"button"
class
=
"btn_nav"
name
=
"previousYear"
value
=
" >
> " onClick="setNextYear()">
- </
td
>
- </
tr
>
- </
tr
>
- </
table
>
- </
form
>
This is the script where we can set up the Year, Month, Day, and Date Today. Look the script below.
- function
setToday(
)
{
- var
now =
new
Date
(
)
;
- var
day =
now.getDate
(
)
;
- var
month =
now.getMonth
(
)
;
- var
year =
now.getYear
(
)
;
- if
(
year <
2000
)
- year =
year +
1900
;
- this
.focusDay
=
day;
- document.calControl
.month
.selectedIndex
=
month;
- document.calControl
.year
.value
=
year;
- displayCalendar(
month,
year)
;
- }
Use this script to select Month in the web page using a select tag.
- function
selectDate(
)
{
- var
year =
document.calControl
.year
.value
;
- if
(
isFourDigitYear(
year)
)
{
- var
day =
0
;
- var
month =
document.calControl
.month
.selectedIndex
;
- displayCalendar(
month,
year)
;
- }
- }
And, this script helps us to navigate the calendar whether you can Next or Previous in the Month or Year.
- function
setPreviousYear(
)
{
- var
year =
document.calControl
.year
.value
;
- if
(
isFourDigitYear(
year)
)
{
- var
day =
0
;
- var
month =
document.calControl
.month
.selectedIndex
;
- year--;
- document.calControl
.year
.value
=
year;
- displayCalendar(
month,
year)
;
- }
- }
- function
setPreviousMonth(
)
{
- var
year =
document.calControl
.year
.value
;
- if
(
isFourDigitYear(
year)
)
{
- var
day =
0
;
- var
month =
document.calControl
.month
.selectedIndex
;
- if
(
month ==
0
)
{
- month =
11
;
- if
(
year >
1000
)
{
- year--;
- document.calControl
.year
.value
=
year;
- }
- }
else
{
- month--;
- }
- document.calControl
.month
.selectedIndex
=
month;
- displayCalendar(
month,
year)
;
- }
- }
- function
setNextMonth(
)
{
- var
year =
document.calControl
.year
.value
;
- if
(
isFourDigitYear(
year)
)
{
- var
day =
0
;
- var
month =
document.calControl
.month
.selectedIndex
;
- if
(
month ==
11
)
{
- month =
0
;
- year++;
- document.calControl
.year
.value
=
year;
- }
else
{
- month++;
- }
- document.calControl
.month
.selectedIndex
=
month;
- displayCalendar(
month,
year)
;
- }
- }
- function
setNextYear(
)
{
- var
year =
document.calControl
.year
.value
;
- if
(
isFourDigitYear(
year)
)
{
- var
day =
0
;
- var
month =
document.calControl
.month
.selectedIndex
;
- year++;
- document.calControl
.year
.value
=
year;
- displayCalendar(
month,
year)
;
- }
- }
Output
⚙ Live Demo
That's it, you have a calendar after compiling all the source code above. For the full source code, kindly download below. Thank you.
Download
You must upgrade your account or reply in the thread to view hidden text.