Jump to content

calendar

Ata

By Ata
in JavaScript

 Share

Recommended Posts

Ata Newbie

Ata

Posted
Posted

hello,

 

i need to make a calendar. I saw a code but I'm don't know the site, I can't find it again. It generates all month and days automatic in a small code. A row with getmonth and get days. It is in table form. Can some one help me?

Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

It's not all that trivial for a beginner to create a calendar. You'll need to use the date object:

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

 

You can create a date object that is initially set to the first day of the year, and then start a loop until it gets to the next year. To advance the date you can use the setDate method to set the day to the next day before you loop again. The loop will need several if statements to track and check things like whether you are entering a new month or a new week, or which day of the week it is if you want to show different styles for weekends or things like that. It's up to you how to display each day and week, one option would be to use a table with each week as a table row and each day as a cell, or you can use a layout based on divs or whatever else you want to use.

Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted 
var date = new Date(2013, 0, 1);var done = false;var month_names = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; while (!done) {  // show whatever markup you want for each day  document.write(month_names[date.getMonth()] + ' ' + date.getDate() + ', ' + date.getFullYear() + '<br>');   // go to the next day  date = new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1);   // end the loop if it is another year  if (date.getFullYear > 2013) {    done = true;  }}
Link to comment
Share on other sites
davej Devoted Member

davej

Posted
Posted (edited)

You probably want to create conventional month blocks, so you'll have to use getDay() to align the date with the proper day... and of course you know that months always have the same number of days (except for February) so you don't really need to call the date function more than a few times.

 

http://www.w3schools.com/jsref/jsref_obj_date.asp

 

Here is an untested example...

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>cal years</title><style>div.float{height:130px;font-family:Courier New;float:left;border:1px solid #000;}div.month{text-align:center;width:100%;}</style><script>window.onload = init;var start_year = 2015;var end_year = 2016;function init(){document.getElementById('btn1').onclick = gencal;}function gencal() {var date = new Date(start_year, 0, 1);//2013, 0=january, 1var months = ['JANUARY','FEBRUARY','MARCH','APRIL','MAY','JUNE','JULY','AUGUST','SEPTEMBER','OCTOBER','NOVEMBER','DECEMBER'];var daysinmonths = [31,28,31, 30,31,30, 31,31,30, 31,30,31];var done = false;var str = '';var day = 1;var year = start_year;var month = 0;var pos = 0;while (!done) {leap_year_check(year,daysinmonths);// this function adjusts the feb value of the daysinmonth arraystr += '<div class="float"><div class="month">'+ months[month] +' '+ year +'</div>';pos = 1;while( date.getDay() != pos-1 ){ //align first day of monthstr += '   ';pos++;}day = 1;while (day <= daysinmonths[month]){if (day<10){ str += ' '+ day +' ';}else{ str += day + ' ';} if (pos%7==0){  str += '<br/>'; }day++;pos++;}str += '</div>';//alert('eom');month++;day=1; date = new Date(year, month, 1);if (month > 11) {  month = 0;  year++;}if (year > end_year){  done = true;}}document.getElementById('out1').innerHTML = str;}function leap_year_check(year,array){var leapyears = [2016,2020,2024,2028,2032];array[1] = 28;//feb normally has 28 daysfor(var i=0 ; i<leapyears.length ; i++){if(year==leapyears[i]){array[1] = 29;//feb gets extra day}}}</script></head><body><input type="button" id="btn1" value="Run"/><div id="out1"></div></body></html>
Edited by davej
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...