Question

I’m coding a neat calendar feature for my friend. He has a table, and he wants a list of events to pop up corresponding to the day (or cell) that was clicked. For example, if he clicked the cell that was marked with 3 for the third day of the month, something would pop up listing events for that day.

I’ve gotten far. Here’s my javascript:

function calendar() {
 var items = calendar.arguments.length;
  for(i = 0;i < items; i++){
document.getElementById('popupdiv').innerHTML += "<li>"+calendar.arguments[i]+"</li>";
  }
 document.getElementById('popup').style.display="block";
 document.getElementById('hide').style.display="block";
}

This actually works. When the function calendar() is called, the parameters/arguments will become the events, and they will be listed as <li>s.

Anyways, I wanted to have some sort of way for him to mark more important events in red font. I was thinking of doing this by retrieving the first three letters of each argument, and if they were equal to the string “red”, to make the text red (and to also remove that part of the argument so that it doesn’t display in the actual popup).

Is there an easier way to do this?

Answer 1

Your events need more information. In addition to the event name, add a class option. Pass a set of event items, perhaps something like this:

var items = [
    { 'name': 'Birthday party', 'class': 'fun' },
    { 'name': 'Midterm', 'class': 'important' }
];

function calendar(items)
{
    var newItemsHtml = '';
    for (var i=0, j=items.length; i<j; i++)
    {
        newItemsHtml += '<li class="'+items[i].class+'">'+items[i].name+'</li>';
    }
    var targetList = document.getElementById('popupListNotADivTheyDoNotHaveListItems');
    targetList.innerHTML += newItemsHTML;
    document.getElementById('popup').style.display = 'block';
    document.getElementById('hide').style.display = 'block';

    // Better in jQuery:
    $('#popuplist').append(newItemsHtml);
    $('#popup').show();
    $('#hide').show();
}

This requires knowledge of arrays, though. To do exactly what you asked about, try this:

function calendar(){
    var items = calendar.arguments;
    for (item in items){
        var class = (item.substring(0,3) === 'red') ? ' class="red"' : '';
        var target = document.getElementById('popupdiv');
        target.innerHTML += '<li'+class+'>'+item+'</li>';
    }
    document.getElementById('popup').style.display = 'block';
    document.getElementById('hide').style.display = 'block';
}

To strip the “red” from the item name:

function calendar(){
    var items = calendar.arguments;
    for (item in items){
        var class = '';
        if (item.substring(0,3) === 'red'){
            class = ' class="red"';
            item = item.substring(3);
        }
        var target = document.getElementById('popupdiv');
        target.innerHTML += '<li'+class+'>'+item+'</li>';
    }
    document.getElementById('popup').style.display = 'block';
    document.getElementById('hide').style.display = 'block';
}