Ata Posted November 8, 2013 Share Posted November 8, 2013 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 More sharing options...
davej Posted November 8, 2013 Share Posted November 8, 2013 (edited) I just posted one in the critiques area but for a spiffy jQuery plugin see... http://arshaw.com/fullcalendar/ Edited November 8, 2013 by davej Link to comment Share on other sites More sharing options...
Ata Posted November 13, 2013 Author Share Posted November 13, 2013 Hi thanks. But I need to make a full year calendar (or longer) with loops. Can anyone help me with that? Link to comment Share on other sites More sharing options...
justsomeguy Posted November 13, 2013 Share Posted November 13, 2013 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 More sharing options...
davej Posted November 13, 2013 Share Posted November 13, 2013 If you are making a calendar for multiple years then why not just post an image? Link to comment Share on other sites More sharing options...
Ata Posted November 20, 2013 Author Share Posted November 20, 2013 @Justsomeguy; that's what I meant. But I can't get a start.. I don't know how to generate a year using loops, I just started with javascript. Can someone help me ? Link to comment Share on other sites More sharing options...
justsomeguy Posted November 20, 2013 Share Posted November 20, 2013 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 More sharing options...
davej Posted November 20, 2013 Share Posted November 20, 2013 (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 November 22, 2013 by davej Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now