Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hello,
I have the following situation. In a popup I have a calendar that needs to have some dates disabled or red based on some vectors. I'm using the <calendar> component in combination with the methods
<zk>
<popup id="popupCalendar">
<zscript>
Datebox datebox = arg.get("datebox");
void changeValues(){
alert("change values");
if (cal.value != null){
datebox.value = cal.value;
//event.stopPropagation();
//popupCalendar.detach();
}else{
//event.sendEvent("onChange");
}
}
</zscript>
<script defer="true"><![CDATA[
//var letturaDates = '${dates}'
var letturaDates= ['09/03/2011', '10/03/2011']
//alert(letturaDates);
//var letturaErrorDates = '${errorDates}'
//alert(letturaErrorDates);
var letturaErrorDates= ['10/03/2011', '12/03/2011']
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:red;">' + day + '</a>';
} else{
return '<a href="javascript:;" style="color:black;">' + day + '</a>';
}
};
zul.db.Renderer.disabled = function (cal, y, m, d, today) {
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(letturaDates.indexOf(date) >= 0) {
return false;
} else {
return true;
}
};
});
]]></script>
<calendar id="cal" onChange="datebox.value = self.value;"/>
</popup>
</zk>
The problem is that the Javascript methods disable or make red the dates of other calendars in other pages too. Is there a way to force this methods just on the calendar component in the page?
Then, the first time when the calendar appears, the dates are plain black. Just if I go to the next month on the calendar, they appear red/disabled. Is there a way to force a redraw the calendar component or a JS method to catch the onCreate event for the calendar?
I thought about overriding zul.db.Renderer, which in the Java API is said to be "designed to be overriden" zul.dbRenderer but the Calendar doesn't have a setRenderer method.
Also, when a user selects a date, I need to be able to close the popup, like in the normal datebox calendar. However, if I'm using the changeValues() method in the onChange event for the calendar, then I cannot go to the next month in the calendar.
Can someone please help me? Thank you.
Hi jarasez,
What version of ZK did you using?
the calendar has not enclose date with tag a since zk 5.0.6.
Is there a way to force this methods just on the calendar component in the page?
zul.dbRenderer was a static js util, all of datebox and calendar depend on it,
so you can sets a specific sclass to identify with widget need to apply the change,
Is there a way to force a redraw the calendar component or a JS method to catch the onCreate event for the calendar
it was cause by <script defer="true">
why do you need defer?
designed to be overriden" zul.dbRenderer but the Calendar doesn't have a setRenderer method.
We will think about it, you can post a tracker in the feature request.
when a user selects a date, I need to be able to close the popup
we will send a info "shallClose" to server, but we seem didn't store the info in the event, you have to set a au service to handle it.
Thank you for your response. I managed to make the dates red/disabled but I'm having problems with the au service (the service method is not call).
Some code:
In the .zul page I did:
<popup apply="test.TestPgController">
<calendar id="cale" class="rpCalendar">
<custom-attributes dbox="${arg.datebox}" />
</calendar>
In the composer
public void doAfterCompose(Component comp) throws Exception {
// TODO Auto-generated method stub
super.doAfterCompose(comp);
<b >cale.setAuService(new MyAUService());</b>
}
MyAUService.java is:
public class MyAUService implements AuService{
private static Logger logger = Logger.getLogger(MyAUService.class );
public MyAUService(){
logger.error("MyAUService()");
}
public boolean service(AuRequest request, boolean everError) {
logger.error("service");
if (request != null && request.getCommand().equalsIgnoreCase("onChange")){
//on change events will be processed here
Calendar cal = (Calendar) request.getComponent();
if (cal != null){
Date calValue = cal.getValue();
if (calValue == null){
//nothing was selected; probably the next month was chosen; so let the normal calendar process handle it
return false;
}else{
//a value was select so update the datebox param that was send and close the popup
Datebox datebox = (Datebox) cal.getAttribute("dbox");
datebox.setValue(calValue);
Popup popup = (Popup) cal.getParent();
popup.detach();
return true;
}
}else{
return false;
}
}
//returns whether the request has been processed. If false is returned, the defult process (handled by the component) will take place.
return false;
}
It seems that the au service is correctly assigned to the component as the constructor is called.However, the service method isn't call at all. Can you point me to some example or tell me what I am doing wrong?
Thank you
The AUService was receive the event from client when the component listen the event.
You need to listen a onChange event to calendar.
<calendar id="cal" onChange=""/>
hi jimmyshiau,
thanks for sharing the code but still i am not getting actually my problem is i am having one method which highlight the dates but i am giving dates as
var letturaDates= ['09/03/2011', '10/03/2011'] in script.
now i am having dates in arraylist object how can i pass to it (method)
My Method Looks Like This
<script defer="true"><![CDATA[
//var letturaDates = '${dates}'
var letturaDates= ['09/03/2011', '10/03/2011']
//alert(letturaDates);
//var letturaErrorDates = '${errorDates}'
//alert(letturaErrorDates);
var letturaErrorDates= ['10/03/2011', '12/03/2011']
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:red;">' + day + '</a>';
} else{
return '<a href="javascript:;" style="color:black;">' + day + '</a>';
}
};
</script>
Hi raviteja,
I have tested your sample
it works fine
<zk >
<datebox></datebox>
<script type="text/javascript"><![CDATA[
//var letturaDates = '${dates}'
var letturaDates= ['09/03/2011', '10/03/2011'];
//alert(letturaDates);
//var letturaErrorDates = '${errorDates}'
//alert(letturaErrorDates);
var letturaErrorDates= ['10/03/2011', '12/03/2011'];
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:red;">' + day + '</a>';
} else{
return '<a href="javascript:;" style="color:black;">' + day + '</a>';
}
};
});
]]></script>
</zk>
you can use EL
var myValues = ['${day1}','${day2}'];
Hi jimmyshiau, can you give me sample on how to send the dynamic values. My date values are on the a List given from the composer. I tried to assign it to a textbox and retrieve it using zk.Widget.$().getValue(); but still not able to get my date list.
Hi rodeiyne,
Do you want to send a list data to the textbox client widget?
Hi Jimmy, thanks for your reply. I want to use a list of data (dynamic values) to be disable the dates in datebox. I generate these data from the init() of the composer. I have tried to assign the said value to a textbox, then accesss that textbox to get the list. But I wasn't able to get the list and the dates in datebox are not disable.
Asked: 2011-03-10 03:17:07 +0800
Seen: 929 times
Last updated: Apr 02 '13
