ZK - Open Source Ajax Java Framework

public class MiniCalendar extends org.zkoss.zul.Calendar {

	private List<Date> events;
	
  private static final long serialVersionUID = -6722434089355159212L;

  public List<Date> getEvents() {
  	return this.events;
  }
  
  public void setEvents(List<Date> events) {
  	this.events = events;
  }
  
}

my2calendar.setWidgetOverride("cellHTML", "function (cal, y, m, day, monthofs) {return '<h1>Hello World</h1>';}");

String getDatesInJSONFormat (List<Date> dates) { return JSONArray.toJSONString(); }
public void setEvents(List<Date> events) {
  	smartUpdate("events", getDatesInJSONFormat(events));
  }

protected void renderProperties(org.zkoss.zk.ui.sys.ContentRenderer renderer)
			throws java.io.IOException {
		super.renderProperties(renderer);
		render(renderer, "events", getDatesInJSONFormat(events));
	}

zul.db.Renderer.cellHTML = function (cal, y, m, day, monthofs) {
   //1.  get events date list
    var list = cal.getEvents();
   //2. search the list, compare the year, month and day, see if there is a match target
   //3. base on search result, generat different html
   
  //below is the default one, return differently when the date is in the list
  // for example, set different color:   return '<a href="javascript:;" style="color:red;">' + day + '</a>';  

   return '<a href="javascript:;">' + day + '</a>';
};

my2calendar.setWidgetOverride("zul.db.Renderer.cellHTML", "function (cal, y, m, day, monthofs) { return '<a href=\"javascript:;\">' + day + '</a>';}");

<calendar id="my2calendar">
		<attribute w:name="onBind"><![CDATA[
			zul.db.Renderer.cellHTML = function (cal, y, m, day, monthofs) {
				return '<a href="javascript:;" style="color:green;">' + day + '</a>';
			}]]>
		</attribute>
</calendar>

<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
<script><![CDATA[
zk.afterLoad('zul.db', function(){
	zul.db.Renderer.cellHTML = function (cal, y, m, day, monthofs) {
		return '<a href="javascript:;" style="color:red;">' + day + '</a>';
	}; 
});
]]></script>
<calendar id="cal">
</calendar>
</zk>

['zul.db.Calendar','z_d__7',{id:'mycalendar',$$onSize:false,$$onChange:false,prolog:'\t\n\t',value:'2010/07/21',events:'["2010\\/07\\/21","2010\\/07\\/21"]'},[]]]]]],1);
zk.afterLoad('zul.db', function(){
			zul.db.Renderer.cellHTML = function (cal, y, m, day, monthofs) {
				return '<a href="javascript:;" style="color:green;">' + day + '</a>';
			}; 
		});
}finally{zkme();}</script>

<?page title="Auto Generated index.zul"?>
<window id="mainWindow" title="Hello World!!" border="normal" width="auto" height="500px">

<space /><space /><space /><space />

	<script><![CDATA[
		zk.afterLoad('zul.db', function(){
			zul.db.Renderer.cellHTML = function (cal, y, m, day, monthofs) {
				return '<a href="javascript:;" style="color:green;">' + day + '</a>';
			}; 
		});
	]]></script>	
	<calendar id="mycalendar" use="test.component.EventCalendar">
	</calendar>
	
	<zscript><![CDATA[
		java.util.Date date1 = new java.util.Date();
		java.util.Date date2 = new java.util.Date();
		java.util.List events = new java.util.ArrayList();
		events.add(date1);
		events.add(date2);
		
		mycalendar.setEvents(events);
	]]></zscript>
	
</window>

package test.component;

import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import org.zkoss.json.JSONArray;

public class EventCalendar extends org.zkoss.zul.Calendar {

	private List<String> events;
	
  private static final long serialVersionUID = -6722434089355159212L;
  
  private String getEventsInJSONFormat(List<String> events) {
  	return JSONArray.toJSONString(events);
  }
  
  public void setEvents(List<Date> events) {
  	if(events.size() > 0) {
  		this.events = new ArrayList<String>();
	  	for(Date item : events) {
	  		this.events.add(DateToString(item));
	  	}
	  	smartUpdate("events", getEventsInJSONFormat(this.events));
  	}
  }
  
  @Override
  protected void renderProperties(org.zkoss.zk.ui.sys.ContentRenderer renderer) throws java.io.IOException {
  	super.renderProperties(renderer);
  	if(this.events != null && this.events.size() > 0) {
  		render(renderer, "events", getEventsInJSONFormat(this.events));
  	}
  }
  
  private String DateToString(Date date) {
//  	DateFormat df = new SimpleDateFormat("yyyy/MM/dd");
  	return new SimpleDateFormat("yyyy/MM/dd").format(date);
  }
  
}

<script><![CDATA[
	zk.afterLoad('zul.db', function(){
		zul.db.Renderer.cellHTML = function (cal, y, m, day, monthofs) {
			var output = '<a href="javascript:;">' + day + '</a>';
			var events = eval('(' + cal.events + ')');
			if(events == null) return output;
			for(var i = 0; i < events.length; i++) {
				var eventSplited = events<i >.split("/");
				var eventYear = parseInt(eventSplited[0]);
				var eventMonth = parseInt(eventSplited[1]);
				var eventDay = parseInt(eventSplited[2]);
				
				if((y == eventYear) && ((m+1) == eventMonth) && (day == eventDay)) {
					output = '<a href="javascript:;" style="color:green; font-weight: bold;">' + day + '</a>';
				}	
			}
			return output;
		}; 
	});
]]></script>
<calendar id="tasksCalendar" use="ui.components.EventCalendar" />

<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
	<calendar>
		<attribute name="onChange">
	String date = ((InputEvent) event).getValue().toString();
	msg.setValue(date);
	popup.open(self);
</attribute>
	</calendar>
	<popup id="popup">
		<label id="msg"></label>
	</popup>
</zk>