Thanks wm003, this is really a fabulous extension. I have incorporated it into a day planner extension which I will post here as soon as I clean it up a bit :)
I now see the setEventDates() function works perfectly!
Thanks again for the great work!
I have discovered a problem in the CSS class handling when calling setDates().
If I create an array of dates and then send them to setDates() as follows
when the calendar is re-drawn, the <td> element for both cells now contain a reference for both classes:Code:var aDates =
[
{date: new Date(2008, 1, 1), text: "date 1", cls: "hilight-1"},
{date: new Date(2008, 1, 2), text: "date 2", cls: "hilight-2"}
];
cal.setDates(aDates);
I've tried to step through to see where the problem lies, and I believe it's on or around line 1183/1184:Code:<td class="x-date-active hilight-1 hilight-2" id="ext-gen121" title="">
<a tabindex="1" class="x-date-date" hidefocus="on" href="#">
<em>
<span id="ext-gen61">12</span>
</em>
</a>
</td>
In Firebug it looks like after the class is added, the cell now has both classes associated.Code:if(cal.eventDatesNumbered[2][foundday]!==""){
eCell.addClass(cal.eventDatesNumbered[2]);
1.1 Final released:
Demopage and first Post for Downloads have been updated
- added config "allowMouseWheel" to generally turn on/off Mousewheelsupport (suggested by boraldo)
- added event "beforemousewheel" to be able to temporary disable the mousewheel if desired
- added event "beforemaxdays" to be able to cancel the default MessageBox but do something on your own instead
- Implemented fix for xdatefield code to support applyTo Config (thanks to mystix)
- updated russian local (thanks to WhiteRussian)
- BUGFIX: updating eventclasses (and others) could result in wrong class-definition per cell (reported by aacraig)
Sorry to report that the error doesn't seem to be fixed yet.
I've put together a test page to demonstrate the problem. I hope you find it useful.
As you can see, the expected result is that the first square on 20 June has a blue background, and the second cell on 21 June has a red one. Instead, they are both red and if you examine both elements in Firebug, you can see that both <td> element contains both class names in its class attribute.HTML Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>DatePickerPlus test page</title>
<link rel="author" title="Aaron Craig" href="mailto: software@aaroncraig.com (Aaron Craig) ">
<link rel="stylesheet" type="text/css" href="javascript/ext-2.1/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="javascript/ext-2.1/resources/css/xtheme-gray.css" />
<link rel="stylesheet" type="text/css" href="javascript/ext-2.1/ux/ext.ux.datepickerplus/cc.css" />
<script src="javascript/ext-2.1/adapter/ext/ext-base.js"></script>
<script src="javascript/ext-2.1/ext-all-debug.js"></script>
<script src="javascript/ext-2.1/patches.js"></script>
<script src="javascript/ext-2.1/ux/ext.ux.datepickerplus/ext.ux.datepickerplus-min.js"></script>
<style>
.class_1
{
background-color: blue;
}
.class_2
{
background-color: red;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
<script>
var cal = null;
Ext.onReady(function()
{
Ext.QuickTips.init();
cal = new Ext.ux.DatePickerPlus
({
value: new Date(),
minDate: new Date(),
noOfMonth: 2,
noOfMonthPerRow: 2,
showWeekNumber: true,
showActiveDate: true,
listeners:
{
render: function(){ set_dates() }
}
});
cal.render('calendar');
});
function set_dates()
{
var aDates =
[{
text: 'date 1',
cls: 'class_1',
date: new Date(2008, 6, 20)
},
{
text: 'date 2',
cls: 'class_2',
date: new Date(2008, 6, 21)
}]
cal.setEventDates(aDates);
}
</script>
</html>
Please re-Download the zip from the first post. There was still some little Bug left. As its very minor, it hasn't got a new Version Number so still says 1.1 Final.
Hi,
here's the italian locale if anyone needs it..
Ciao
Hello. Actally I do my first project including the DatePickerPlus. The most works fine but I've two questions and can't find anything in the froum:
Thank you very much
- I know how to use minDate and Max date and it works (only the allowed range is clickable) but is it also possible to lock the month and year select buttons to the allowes months only? so that it isn't possible to select or scroll into the "forbidden area"? It's not possible to click them anyway and thats good. But why should the user see the days and months? (in my case it's a range from 1st july till 31th dec 08)
- this question is about the EventDates, I know how to use them and it works. But also - is there a way to remove the link from this special days. so that's possible to see them (different style) but not to click them?
Ronald