www.webdeveloper.com
Results 1 to 9 of 9

Thread: prebuilt JS calendar that reads txt files into dates

  1. #1
    Join Date
    May 2009
    Posts
    1

    prebuilt JS calendar that reads txt files into dates

    I'm a beginner javascript programmer, I need a calendar for a website and I don't have time to code it all and Im not sure if I could to be honest


    I'm looking for a prebuilt javascript calendar , ( I'm assuming I'll have to pay for it) that when a date was clicked, it would display information in a div and would be easily updated someone with no code experience

    I assume there's a way to have a folder on the server with a pile of .txt files named "01012009.txt" with this example being January 1st 2009 , so the person keeping this calendar up to date could just edit a text file and FTP it to the server

    could anyone give me some advice as to the feasibility of something like this, is what I'm imagining rather difficult ?

  2. #2
    Join Date
    May 2009
    Posts
    150
    Most existing ones would likely be based on databases and mostly done server side. They definitely exist but you're probably best off starting your search at something like a PHP calendar, not a JS one.

  3. #3
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,270
    Two problems, JavaScript doesn't really work and when it does it can't read files. You need a server side solution and lots of them are around.
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  4. #4
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Quote Originally Posted by Charles View Post
    Two problems, JavaScript doesn't really work and when it does it can't read files.
    i guess you haven't heard about this new thing called ajax...
    the idea that you "need" a server is laughable. i don't mean any disrespect; i actually did laugh aloud reading the responses.

    i think that anyone who says it can't be done must not know how to do it. period.

    there may be certain advantages to a server platform, but every browser can read text files and handle the basic logic and behavior this application requires. it's also cheaper and more scalable to have the clients pay for CPU usage while serving static text, than paying to process the info for each user and serving un-cachable unique resources.

    i don't know if a pre-built solution exists, but there is no technical reason that the project described by the OP could not be coded in a few hours using javascript, html and .txt files.
    Last edited by rnd me; 05-28-2009 at 02:21 AM.

  5. #5
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,270
    Ajax isn't JavaScript, it's a collection of browser specific extensions to JavaScript that works even less. It'll give you a nice look and feel but you have to a back up. Otherwise vast numbers of users will fall on their face laughing at your incompetence. And that back up will be...a server side script. That's right, the AJAX should run on a server side script that will return useful data to the AJAX call when that's needed and a full HTML page when that's needed.

    I'll admit, though, that you could keep the calendar data in an XML file linked to an XSL stylesheet that transforms the XML into some human readable form. You would have a static file that was accessible to both AJAX and normal browsers. However, I don't thank that's what was meant by a "text file" on the server.
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  6. #6
    Join Date
    May 2009
    Posts
    150
    No-one said it couldn't be done in JavaScript, however that's generally the best way to do it as you can't rely on JavaScript existing for every visitor, but you can rely on your own server existing.

  7. #7
    Join Date
    Feb 2006
    Posts
    2,927
    when a date was clicked, it would display information in a div and would be easily updated
    You can use javascript and ajax to manage server requests without page reloads, but there has to be a script on the server (to validate the user and the input, and to update or create the date files).

    Usually you would start with the server script, and then add your script to manage requests from input and the display from the response.

  8. #8
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Quote Originally Posted by Charles View Post
    Ajax isn't JavaScript...
    JavaScript is the J in AJAX...
    if you want to play silly semantics games, you still lose;

    JavaScript is owned by Mozilla, and according to their site "XMLHttpRequest is a JavaScript object that was designed by Microsoft, adopted by Mozilla, and is now being standardized in the W3C. ". Why do you alone claim otherwise?
    If you have said xmlHttpRequest is not an ECMAscript standard, i would buy that, but who cares? .innerHTML, prompt(), and the DOM itself aren't part of ECMAscript, so what is the functional value of any distinction?

    I don't see how a server would validate FTP transactions. I don't see where XML (which sux ), or XSLT (sux harder) comes into play at all.

    I will concede that ~5% of your visitors won't get the full experience, but half of those are probably noscript users (like myself), who can restore functionality in one or two clicks. Lots of major, non-incompetently managed sites that nobody laughs at require javascript. It's not 1999 anymore; popup-blockers got almost everyone to turn javascript back on... I like to point out that if they don't have a browser, then heck, they can't see a site at all, so you better provide a paper version!
    The needs of the many outweigh the needs of the few; don't scuttle advancements for the sake of a small, self-created minority.

    I don't understand why this is surprising or controversial, it seems like a straight-forward, basic question. To me it's a no-brainer, and i am a bit surprised at the reactions of my fellow regulars.

    All the OP wanted to know was if it was feasible. the answer is yes, very much feasible as described.

    I would be more than happy to post a compliant solution if the OP (or anyone else really) is interested. Then you can fairly belittle and ridicule my incompetent code instead of prejudicing client capabilities.

    I don't mind being laughed at, but it think its a disservice to learners to tell them javascript can't handle things that it indeed can.
    Last edited by rnd me; 05-28-2009 at 04:24 PM.

  9. #9
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,355

    Lightbulb Consider this ...

    The following has all the limitations expressed before because of the client-side restrictions,
    and if you don't mind using external JS files rather than AJAX loaded text information, this might give you what you want.
    External JS files also have the advantage that they can be used on the local drive as AJAX cannot access that area.
    You can modify the script to incorporate an AJAX solution to read text files instead.

    I have only included 2 external month files (May & June 2009), but they are pretty simple to create.
    There are only a few days that will be displayed with the messages in the external month files.
    Put the comments for the date in the proper array element for the day of the month.

    Main program: 'cal.html'
    Code:
    <html>
    <head>
    <title>Quick Calendar</title>
    
    <style type="text/css">
      div.cal { width:225px; } /* border: 1px solid blue; } */
      .date { cursor:pointer; font-size:0.9em; }  /* cursor:default; } */
    </style>
    
    <script type="text/javascript" src="cal.js"></script>
    
    <script type="text/javascript">
    
    var calStr = new Array();
    
    function NewCalStr() {
      for (var i=0; i<32; i++) { // fill array with default message
        calStr[i] = '<span style="color:black;font-size:2em;">Nothing<br>special<br>happens<br>today!</span>'; 
      }
      calStr[0] = '';
    }
    
    function addScript(JSfileName) {
      if (JSfileName == '') { return; }
      JSfileName = 'cal_'+JSfileName+'.js';  // form filename containing comments for month
    
      NewCalStr();
      var js = document.createElement('script');
      js.setAttribute('type', 'text/javascript');
      js.src = JSfileName;
      document.body.appendChild(js);
    }
    </script>
    
    <script type="text/javascript">
    // Modified for: http://www.webdeveloper.com/forum/showthread.php?t=209904
    
    var now = new Date();  				// normally use this
    //  var now = new Date(2009,(5-1),1); 	// forced date for May 2009 demonstration
    var monthM = now.getMonth()+1;
    var yearM = now.getFullYear();
    
    function Initialize() {
      var now = new Date();  				// normally use this
    //  var now = new Date(2009,(5-1),1); 	// forced date for May 2009 demonstration
      monthM = now.getMonth()+1;  	yearM = now.getFullYear();
      monthC = monthM;		yearC = yearM;
    
      NewCalStr();
    //  var tmp = ''+pad(monthM)+yearM;  addScript(tmp);
      return '';
    }
    function LoadComments() {
      var tmp = document.getElementById('SelectedMonth').value;
      if (tmp == '') { alert('Select comments for month'); return; }
    // alert(tmp+'\n'+pad(monthC)+yearC);
      if (tmp == pad(monthC)+yearC) { addScript(tmp); } else { NewCalStr(); }
    }
    </script>
    </head>
    
    <body onload="Initialize();displayCalendar(monthM,yearM)">
    <input type="text" id="SelectedDate" value="" size="10"> 
    <select id="SelectedMonth">
     <option value="">Comments</option>
     <option value="012009">Jan</option>
     <option value="023009">Feb</option>
     <option value="032009">Mar</option>
     <option value="042009">Apr</option>
    
     <option value="052009">May</option>
     <option value="062009">Jun</option>
     <option value="072009">Jul</option>
     <option value="082009">Aug</option>
     <option value="092009">Sep</option>
     <option value="102009">Oct</option>
    
     <option value="112009">Nov</option>
     <option value="122009">Dec</option>
    </select>
    <button onclick="LoadComments();return false">Load</button>
    
    <table border="0"><tr><td>
    
    <script type="text/javascript">
      var str = '<table border="0">';
      str += '<tr>';
      str += '<td colspan="3">';
      str += '<div id="calM" class="cal">'+displayCalendar(monthM,yearM);
      str += '</div></td></tr>';
      str += '</table>';
      document.write(str);
    </script>
    
    </td>
    <td valign="top"><div id="FileText">Month Information</div></td>
    
    <tr></table>
    </body>
    </html>
    External JS files: 'cal.js'
    Code:
    // Calendar Display (cal.js)
    
    var MonthOfYear = ['','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
    var DaysInMonth = ['',31,28,31,30,31,30,31,31,30,31,30,31];
    var monthC = 0;  var yearC = 0;
    
    function CalendarRedisplay(M,Y) {
      if (M < 1) { M = 12; Y--; }
      if (M > 12) { M = 1; Y++; }
      monthC = M;  yearC = Y;
      document.getElementById("calM").innerHTML =  displayCalendar(M,Y);
      NewCalStr();
    //  addScript(M+''+Y);
    }
    
    function displayCalendar(month, year) {
      month = parseInt(month);
      year = parseInt(year);
      var i = 0;
      var days = getDaysInMonth(month,year);
      var firstOfMonth = new Date (year, (month-1), 1);
      var startingPos = firstOfMonth.getDay();
      days += startingPos;
      var page = '<table border="1" width="100%"><tr><th colspan="7">';
      page += '<button onClick="CalendarRedisplay('+month+','+(year-1)+');return false">|</button> ';
      page += '<button onClick="CalendarRedisplay('+(month-1)+','+year+');return false">&lt;</button> ';
    
      page += '<button onClick="NewCalStr();CalendarRedisplay('+monthM+','+yearM+');return false;">';
      page += MonthOfYear[month]+' '+year+'</button>';
    
      page += ' <button onClick="CalendarRedisplay('+(month+1)+','+year+');return false">&gt;</button>';
      page += ' <button onClick="CalendarRedisplay('+month+','+(year+1)+');return false">|</button>';
      page += '</th></tr>';
    
      page += '<tr><th class="date">Su</th><th class="date">Mo</th><th class="date">Tu</th><th class="date">';
      page += 'We</th><th class="date">Th</th><th class="date">Fr</th><th class="date">Sa</th></tr>';
      page += '<tr>';    
      for (i = 0; i < startingPos; i++) {
        if ( i%7 == 0 ) page += "</tr><tr>";
        page += '<th><span class="date">&nbsp;</span></th>';
      }
      for (i = startingPos; i < days; i++) {
        if ( i%7 == 0 ) page += "</tr><tr>";
        page += '<th><span class="date"';
        page += ' onclick="calAction('+"'"+pad(month)+'/'+pad(i-startingPos+1)+'/'+year+"'"+')">';
        page += (i-startingPos+1) + '</span></th>';
      }
      for (i=days; i<42; i++)  {
        if ( i%7 == 0 ) page += "</tr><tr>";
        page += "<td>&nbsp;</td>";
      }
      page += '</tr></table>';
      return page;
    }
    
    function getDaysInMonth(month,year)  {
      var days = DaysInMonth[month];
      if ((month == 2) && isLeapYear(year)) { days=29; } 
      return days;
    }
    
    function isLeapYear (Year) {
     if (((Year % 4)==0) && ((Year % 100)!=0) || ((Year % 400)==0)) { return (true); } else { return (false); }
    }
    
    function pad(value) {
      return value=(value < 10)?'0'+value:value;
    }
    
    function calAction(info) {
      document.getElementById('SelectedDate').value = info;
    //  if ((pad(monthM)+''+yearM) != calStr[0]) { NewCalStr(); }
      var tmp = info.split('/');  
    //  if ((pad(tmp[0])+''+tmp[2]) != calStr[0]) { NewCalStr(); }
      var dd = tmp[1]*1;
      document.getElementById('FileText').innerHTML = calStr[dd];
    }
    May 2009: 'cal_052009.js'
    Code:
    // cal_052009.js
    
      calStr[0] = '052009';		// set when file loaded to indicate success
    
      calStr[1] = '<h1 style="color:red">May Day!!!</h1>';
      calStr[5] = '<h1 style="color:blue">Cinco de Mayo!!!</h1>';
    
      calStr[6] = '<h1 style="color:red">Month before<br> D-Day';
      calStr[6] += '<br> (June 1944)</h1>';
      calStr[14] = '<h1>Valentine\'s <br>Day <br>plus 3 <br>months!!!</h1>';
    
      calStr[29] = '<h2><font color="green">Jeramy\'s Birthday</font></h2>';
      calStr[29] += '<p>TGIF';
      calStr[30] = '<h1><font color="magenta">Wife\'s birthday<br>Next month!!!</font></h1>';
      calStr[31] = '<h3 style="color:white;background-color:cyan">End of the month</h3>';
    June 2009: 'cal_062009.js'
    Code:
    // cal_062009.js
    
      calStr[0] = '062009'; // set as flag that file has been loaded (initialized as '')
    
      calStr[1] = '<h1 style="color:red">ONIM!!!</h1>';
      calStr[4] = '<h2>4th of July in one month!</h2>';
      calStr[6] = '<h1 style="color:red">D-Day<br> (June 1944)</h1>';
      calStr[14] = '<h1>Valentine\'s <br>Day <br>plus 4 <br>months!!!</h1>';
      calStr[26] = '<h1 style="color:green">TGIF!!!</h1>';
      calStr[30] = '<h1><font color="magenta">Wife\'s birthday!!!</font></h1>';
      calStr[31] = '<h3 style="color:black;background-color:cyan">End of the month</h3>';
    Not a perfect solution, but if you don't have access to server-side control, this might fill the bill.
    You should be able to FTP the updated external month files whenever you want.
    Note, it is not necessary to create HTML in the monthly JS files.

    Post back if you have specific questions.
    Good Luck!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles