Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Sep 2006
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Setting limit to number of events displayed.

    Hi there. I'm a complete newbie to javascript but I managed to edit a birthday someone had posted here to show events I put into the array. Now the thing is is that I would like to be able to set how many events are shown. So instead of it displaying all the events for the next week it would only display the next 4 events.

    Here's the code

    Code:
    <script type="text/javascript">
    
    var arrEvents = [
    
      ['Aunt B.', '11/5'],
    
      ['Goober', '11/7'],
    
      ['Andy', '11/7'],
    
      ['Otis', '11/8'],
    
      ['Earnest T.', '11/9'],
    
      ['Opey', '11/9'],
    
      ['Barney', '11/8'], 
    
      ['Thelma Lu', '5/13']
    
      //...and so on (last entry must not have a trailing comma)
    
    ];
    
    
    
    function getEventsThisWeek(){
    
      var arrMonth = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
    
      var events, idx;
    
      var eventsList = new Array();
    
      var today = new Date();
    
      for (var i=0;i<arrEvents.length;i++){
    
        var events = new Date(arrEvents[i][1] + '/' + today.getFullYear());
    
        if (isNaN(events)) continue;
    
    
    
        if ( isEventsInRange(events, 3) ){ <!-- How many days to show birthday's to. -->
    
           idx = eventsList.length;
    
           eventsList[idx] = new Object();
    
           eventsList[idx].name = arrEvents[i][0];
    
           eventsList[idx].events = events;
    
           eventsList[idx].month = arrMonth[events.getMonth()];      
    
        }
    
      }
    
      if (eventsList.length > 0){ //sort asc by birthdate
    
         eventsList.sort(
    
           function(a, b){
    
             if (a.events < b.events) return -1
    
             if (a.events > b.events) return 1;
    
             return 0;
    
           }
    
         );
    
      }
    
      return eventsList;
    
    }
    
    
    
    function isEventsInRange(events, interval){
    
    
    
      var today = new Date(); 
    
      //have to override time so entire day will be valid
    
      today.setHours(0,0,0,0);
    
      //if the birthday has already occurred in the year, increment to the next year
    
      if (events < today)
    
        events.setFullYear(events.getFullYear() + 1);
    
      
    
      // get ms between dates (UTC) and make into "difference" date
    
      var iDiffMS = events.valueOf() - today.valueOf();
    
      //divide iDiffMS by 1000, Seconds, Minutes, Hours
    
      nDays = parseInt(iDiffMS / 1000 / 60 / 60 / 24);
    
      
    
      if(parseInt(nDays) <= parseInt(interval))
    
        return true;
    
      else
    
        return false;
    
    }
    
    
    
    function displayEventsList(){
    
      var date = new Date().getDate();	
    
      var eventsList = getEventsThisWeek();
    
      var len = eventsList.length;
    
      var s = "<h4>Happy Birthday to...</h4>";
    
      if (len>0){
    
        s += '<ul>';
    
        for (var i=0; i<len; i++){
    
           //be mindful of the string-line continuation character (\) at the end of the first line
    
    		s += '<li' + ((date == eventsList[i].events.getDate())?' class="eventsToday"':'')+ '>\
    
    					<strong>' + eventsList[i].name + '</strong> - ' 
    
    					+ eventsList[i].month + ' ' + eventsList[i].events.getDate() + '</li>';       
    
        }
    
        s += '</ul>';
    
      }
    
      else{
    
        s += "No Event's This Week.";
    
      }
    
      document.write(s);
    
    }
    
    </script>
    Any help would be appreciated.

    Thanks.
    Matthew.

  • #2
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    i would reccomend doing a while loop that grabs the date value of the event.
    have it compare the current date to that and if it is older then the current date skip over it and check the next one, ect..... until it finds a date that hasnt happend yet, then it would add the event to another array, when it runs out of event dates to check it would then write the contents of the new array. (only events that havent happened yet). and if you want it to only display the next 4, only write the first 4 items in the new array. i would write the script to check the length of the array first, incase it doesnt contain at least 4 items.
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #3
    New Coder
    Join Date
    Sep 2006
    Location
    Toronto
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I'm not sure exactly what you are using this for, so I'm not sure if this will work. However, you could try this:


    var i = 0
    while(i < 5){
    if(i = 0){
    //Put the first value you want to appear
    }else if(i = 1){
    //Put the second value you want to appear
    }else if(i = 2){
    //Put the third value you want to appear
    }else if(i = 3){
    //Put the fourth value you want to appear
    }
    i++;
    }




    This way, the code would keep looping, and judging by the amount of times it has looped, it will choose the correct value to display. This would only work if you could store the values in the order when they were received, so that you would be able to put the value you want to appear in each of the places.

    Hope that helps!
    var currentTime = new Date()
    var chance = currentTime.getTime()
    var chance2 = chance % 3
    alert(chance2)

  • #4
    New Coder
    Join Date
    Sep 2006
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow I appreciate the quick response. Unfortunetly I've been trying to do what you suggested for a couple hours with little success. I'm really not sure how to do it. Do you think you could give me a bit of direction to get it done.

    Thanks.
    Matthew.

  • #5
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If I understand what you are saying then how about adding one line to displayEventsList()

    if (len>0){
    if (len >4) len = 4; // add this to cap the number of events shown at 4
    s += '<ul>';

    david_kw

  • #6
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    hey there. I threw this code together for you. notice though taht i changed the format of your array. I seperated the montha and day into two seperate values. then i put the month first, day second, and name last. this allows you to sort the array so that the dates will list in order (earliest to latest, and alphabetically).

    Youmay need to modify it of course to have it fit in to your page the way you want it to.

    I really hope this is what you were looking for.

    Code:
    <html>
    
    
    <head></head>
    
    <body>
    
    
    
    <script type="text/javascript">
    
    
    //  [month , day, name]
    var arrEvents = [
    
      ['11', '5', 'Aunt B.'],
    
      ['11', '7', 'Goober'],
    
      ['11', '7', 'Andy'],
    
      ['11', '8', 'Otis'],
    
      ['11', '9', 'Earnest T.'],
    
      ['11', '9', 'Opey'],
    
      ['11', '8', 'Barney'], 
      
      ['10', '15', 'Brandon'], 
      
      ['12', '25', 'Jesus'], 
      
      ['11', '7', 'sam'], 
    
      ['5', '13', 'Thelma Lu']
    
    
    
    ];
    arrEvents.sort();
    function filterDates(){
    var monthNames=new Array('January','February','March','April','May','June','July','August','September','October','November','December');
    var date=new Date();
    var date2=new Date();
    var displayEvents=new Array();
    i='0';
    j='0';
    while(i<arrEvents.length){
    var month=arrEvents[i][0];
    var day=arrEvents[i][1];
    date2.setMonth(month-1);
    date2.setDate(day);
    if(date2.valueOf()>=date.valueOf() && displayEvents.length<'4'){
    displayEvents[j]=arrEvents[i];j++;}
    i++;
    }
    var lngth=displayEvents.length;
    i='0';
    var what2write='';
    while(i<lngth){
    what2write+=displayEvents[i][2]+"'s birth day is day "+displayEvents[i][1]+" in the month of "+monthNames[displayEvents[i][0]-1]+"<br>";
    i++;}
    document.write(what2write);
    }
    </script>
    
    
    <input type=button onclick="filterDates();">
    
    </body>
    </html>
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #7
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    there is only one problem with the above code i gave you.

    if there is less than 3 birthdays that are filtered out, then it should go through all the birthdays again and add the next closest birthday for the next year.

    I will work that out and re post it you like.

    you can also have it grab birthdays that are X amount of days away. this would probably be better, cuz if the next four birthdays are close, and the fifth one is right after or on the same day as the last one, it wont show you, and you'd only get notified a few days before hand. if you like i can write it to grab all the birthdays within a said amount of time in the future. i.e. 1 month.
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #8
    New Coder
    Join Date
    Sep 2006
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow, david_kw That's exactly what I needed thanks. It works great. brandonH Thanks you so much for doing all that coding for me I really apprieciate it. Thanks everyone you guys rock!

    Matthew Siemens.


  •  

    Posting Permissions

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