Ext.ux.DatePickerPlus: MultiMonth, MultiSelection, WeekNumbers, Custom CSS Days,...

**aacraig** · 8 Jun 2008 5:41 AM

Originally Posted by wm003

ok, here's the promised update. I hope you all will get satisfied..

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!

**aacraig** · 11 Jun 2008 6:52 AM

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

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);

when the calendar is re-drawn, the <td> element for both cells now contain a reference for both classes:

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>

I've tried to step through to see where the problem lies, and I believe it's on or around line 1183/1184:

Code:

if(cal.eventDatesNumbered[2][foundday]!==""){						
  eCell.addClass(cal.eventDatesNumbered[2]);

In Firebug it looks like after the class is added, the cell now has both classes associated.

**wm003** · 11 Jun 2008 10:46 PM

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)

**aacraig** · 12 Jun 2008 12:31 AM

Originally Posted by wm003

[B]1.1 Final released:

- 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.

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>

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.

**wm003** · 12 Jun 2008 2:34 AM

Originally Posted by aacraig

Sorry to report that the error doesn't seem to be fixed yet.

I updated the first post, please try again. I could swear i already patched it...somehow i didn't save the code before ...

**aacraig** · 12 Jun 2008 6:11 AM

Originally Posted by wm003

I updated the first post, please try again. I could swear i already patched it...somehow i didn't save the code before ...

It works!

Thanks very much for your quick response.

**wm003** · 13 Jun 2008 3:17 AM

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.

**andreabat** · 24 Jun 2008 5:43 AM

Hi,
here's the italian locale if anyone needs it..
Ciao

**wm003** · 24 Jun 2008 11:13 AM

Originally Posted by andreabat

Hi,
here's the italian locale if anyone needs it..
Ciao

Thank you very much!

**descheret** · 25 Jun 2008 11:21 PM

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:

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?

Thank you very much
Ronald

Ext.ux.DatePickerPlus: MultiMonth, MultiSelection, WeekNumbers, Custom CSS Days,...

Thread Tools

Search Thread

Display

cls parameter on setDates weirdness?

cls parameter on setDates weirdness?

1.1 Final Released

1.1 Final Released

New ZIP of 1.1 available

New ZIP of 1.1 available

Italian locale with holidays

Italian locale with holidays

minDate & maxDate + deactivating EventDates

minDate & maxDate + deactivating EventDates

Tags for this Thread