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

<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.

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'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!

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.

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

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.



<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','Novem ber','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>

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.

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.