How to convert a JSON object array in to a javascript object array

Lets assume that this as our JSON array

var jsonEmployeeArray = [
    {"firstname":"Tom", "lastname":"Hunter", "age":"25"}, 
    {"firstname":"Edward", "lastname":"Watson", "age":"30"}, 
    {"firstname":"William", "lastname":"Martin", "age":"45"}
  ];

Now lets create our javascript object so that it has the same properties

function EmployeeObject(firstname, lastname, age) {
  this.firstname = firstname;
  this.lastname = lastname;
  this.age = age;
}

Following is our function which convert the JSON array in to the EmployeeObject array

function convert(jsonArray) {
  var jsEmployeeArray = new Array();//Define our javascript array like this
  for(var i = 0; i < jsonArray.length; i++) {
    var employee = jsonArray[i];//get i th element
    //Create jsObject of type EmployeeObject as below
    var jsObj = 
      new EmployeeObject(employee.firstname, employee.lastname, employee.age);
    jsEmployeeArray[i] = jsObj;//Add created javascript object in to javascript array
  }
  return jsEmployeeArray;
}

That is all. Now call the above 'convert' function as below and it will return you a javascript array.

convert(jsonEmployeeArray);

Highlight certain dates in <rich:calendar> component

In this lesson I am going to show you how to highlight certain dates in <rich:calendar> component.
First you should write two classes by implementing 'CalendarDataModel' and 'CalendarDataModelItem' interfaces.
Here I create 'CalendarDataModelImpl' by implementing 'CalendarDataModel' interface and 'CalendarDataModelItemImpl' class by implementing 'CalendarDataModelItem' interface.

My CalendarDataModelImpl class is like this.

import java.util.Calendar;
import java.util.Date;

import javax.faces.bean.ManagedBean;

import org.domain.cpms.entity.AlertTxn;
import org.jboss.seam.ScopeType;
import org.jboss.seam.annotations.Name;
import org.jboss.seam.annotations.Scope;
import org.jboss.seam.framework.EntityQuery;
import org.richfaces.model.CalendarDataModel;
import org.richfaces.model.CalendarDataModelItem;

@Name("calendarDataModelImpl")
public class CalendarDataModelImpl implements CalendarDataModel {
  public CalendarDataModelItem[] getData(Date[] dateArray) {
    CalendarDataModelItem[] modelItems = new 
              CalendarDataModelItemImpl[dateArray.length];
    for (int i = 0; i < dateArray.length; i++) {
      CalendarDataModelItemImpl modelItem = new CalendarDataModelItemImpl();
      modelItem.setEnabled(true);
      for(Date d : getDatesToBeHighlighted()) {
        if(getDatePortion(d).compareTo(  
                       getDatePortion(dateArray[i])) == 0) {
          modelItem.setStyleClass("green");
        }
      }
      modelItems[i] = modelItem;
    }
    return modelItems;
  }

  public Object getToolTip(Date arg0) {
  return null;
  }
 
//This method skips the time part and retuns the date part only
  private Date getDatePortion(Date date) {
    Calendar calendar = Calendar.getInstance();
    calendar.setTime(date);
    calendar.set(Calendar.HOUR_OF_DAY, 0);
    calendar.set(Calendar.MINUTE, 0);
    calendar.set(Calendar.SECOND, 0);
    calendar.set(Calendar.MILLISECOND, 0);
    return calendar.getTime();
  }

//This method returns the dates which should be highlighted
  private Date[] getDatesToBeHighlighted() {
    Date[] dates;
    .....your logic to find dates which should be highlighted...
    return dates;
  }
}

Following method is the most important method in 'CalendarDataModelImpl' class.

public CalendarDataModelItem[] getData(Date[] dateArray) {}

In my xhtml page I add a calendar component as below.

<h:form>
  <rich:calendar popup="false" mode="ajax" dataModel="#{calendarDataModelImpl}"/>
</h:form>

Since we have defined the 'dataModel' attribute in the calendar, when our calendar component is rendered, it passes an array of dates to 'getData' method in our 'CalendarDataModelImpl' class.
So now we iterate through that array and set our own css class name for each date that we need to be highlighted.

public CalendarDataModelItem[] getData(Date[] dateArray) {
    CalendarDataModelItem[] modelItems = new
                    CalendarDataModelItemImpl[dateArray.length];
      for (int i = 0; i < dateArray.length; i++) {
    CalendarDataModelItemImpl modelItem = new
                            CalendarDataModelItemImpl();
    modelItem.setEnabled(true);//Enable the date
  for(Date d : getDatesToBeHighlighted()) {//your method which returns an array 
                                                 //of dates which should be highlighted
          if(getDatePortion(d).compareTo(
                getDatePortion(dateArray[i])) == 0) {//comparing our date with dates in                                                      //dateArray
              modelItem.setStyleClass("green");                                 
  }
  }
  modelItems[i] = modelItem;
    }
    return modelItems;
  }

My CalendarDataModelItemImpl class is as below. It contains only several getter and setter methods.

import org.richfaces.model.CalendarDataModelItem;

public class CalendarDataModelItemImpl implements CalendarDataModelItem {
    private boolean enabled;
    private String styleClass;

    public void setEnabled(boolean enabled) {
        this.enabled = enabled;
    }

    public void setStyleClass(String styleClass) {
        this.styleClass = styleClass;
    }

    public boolean isEnabled() {
        return enabled;
    }

    public String getStyleClass() {
        return styleClass;
    }

    public Object getData() {
        return null;
    }

    public boolean hasToolTip() {
        return false;
    }

    public Object getToolTip() {
        return null;
    }

    public int getDay() {
        return 0;
    }
}

That is it.