Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
I'd like to highlight a list of days in a ZK calendar, after taking a look to the forum I found some references to cellHTML method.
However, it implies to modify cell content adding an spam or something like that to paint days in a specific color. This causes bad effects in the interface with onHover and so on.
Then I've ended up using jQuery and cooked my own example that you can find in the following URL:
http://zkfiddle.org/sample/3acbbvp/1-Highlight-calendar-days-with-jQuery
The example changes the style of "td" tag that is implementing the calendar.
I hope some others find this useful, any feedback is welcomed ;-)
Hi Mrego,
This is a good topic and making me interested in it, I had another thinking for overwriting the widget method to do this in pure client way. :P
1.My first thinking , hardcore one and pure client.
<zk xmlns:w="client">
<script><![CDATA[
function highlightCalendarDays(calendarUuid, days) {
var nodes = $("#"+calendarUuid+ " td").not(".z-outside");
nodes.each(function() {
var day = parseInt($(this).attr("_dt"),10);
if (jQuery.inArray(day, days) > -1) {
$(this).css({backgroundColor: 'green', color: 'white'});
}
});}
]]></script>
<window border="normal" title="hello"><attribute w:name="bind_">
function(){
this.$bind_.apply(this,arguments);
highlightCalendarDays(this.uuid, [4,5,9,10,11,20,21,22,23,24]);
}
</attribute>
<calendar id="calendar" ></calendar>
</window></zk>
package j29qhl8f$v1;import org.zkoss.zk.ui.*;
import org.zkoss.zk.ui.event.*;
import org.zkoss.zk.ui.util.*;
import org.zkoss.zk.ui.ext.*;
import org.zkoss.zk.au.out.AuInvoke;
import org.zkoss.zul.*;public class TestComposer extends GenericForwardComposer{
private Component calendar;
private Button button;
public void doAfterCompose(Component comp) throws Exception {
super.doAfterCompose(comp);
Clients.response(new AuInvoke(calendar, "highlightDate",new int[]{4,5,9,10,11,20,21,22,23,24}));
}
}
<zk xmlns:w="client">
<window border="normal" title="hello" apply="j29qhl8f$v1.TestComposer">
<calendar id="calendar" >
<attribute w:name="highlightDate">
function(days){
var nodes = $("td",this.$n()).not(".z-outside");
nodes.each(function() {
var day = parseInt($(this).attr("_dt"),10);
if (jQuery.inArray(day, days) > -1) {
$(this).css({backgroundColor: 'green', color: 'white'});
}
});
}
</attribute>
</calendar>
</window></zk>
It's also a good sample to show how to work with widget(client side) /component (server side). :)
I liked your second idea. Maybe it could have sense to have a new macrocomponent adding a method like that with the chance to set the different colours:
<attribute w:name="highlightDates">
function(days,textColor, bgColor){
var nodes = $("td",this).not(".z-outside");
nodes.each(function() {
var day = parseInt($(this).attr("_dt"));
if (jQuery.inArray(day, days) > -1) {
$(this).css({backgroundColor: bgColor, color: textColor});
}
});
}
</attribute>
Then anybody could reuse that macro component when needed.
Thanks for the feedback ;-)
hai all,
i have understood the code for highlighting the days in calendar component but , i have the following problem and dont know how to resolve it can any body help me out of this please
i have written this code in script tag
var letturaDates=['09/01/2012', '10/01/2012']
//alert(letturaDates);
//var letturaErrorDates = '${errorDates}'
//alert(letturaErrorDates);
var letturaErrorDates=['09/01/2012', '10/01/2012']
zk.afterLoad('zul.db', function(){
zul.db.Renderer.cellHTML = function (cal, y, m, d, monthofs) {
if(m == -1) {
y-= 1;
m = 11;
} else if (m == 12) {
y+= 1;
m = 0;
}
m < 10 ? month = "0" +(m + 1) : month = (m + 1);
d < 10 ? day = "0" + d : day = d;
date = day+"/"+month+"/"+ y;
if(letturaErrorDates.indexOf(date) >= 0) {
return '<a href="javascript:;" style="color:white;background:red;">' + day + '</a>';
} else{
return '<a href="javascript:;" style="color:green ; ">' + day + '</a>';
}
};
});
now i want to pass the dates dynamically mean from db how can anybody help
Hi mrego,
i ahve understood the code what you have discussed and thanks for sharing ..................
now my problem is i want to pass tha dates with month and year from tha list object how can i slove this problem ............
Asked: 2011-08-03 14:13:58 +0800
Seen: 434 times
Last updated: Jan 31 '12
