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

**brenda** · 8 Feb 2009 5:41 PM

thanks wm003

Hope to see a new version soon

**RuiDC** · 20 Feb 2009 5:19 PM

Originally Posted by aacraig

It works!

Thanks very much for your quick response.

Firstly - great control! keep up the great work - hopefully i'll be able to contribute in due course.

I've read the posts with aacraig's problems (thanks for the detail, it's been incredibly helpful in helping me understand the control and ExtJS in general), and am running DPPv1.3 and ExtJS 2.2.1 on FF3, but am not seeing the freshly added date render:

Code:

<html>
<head>
    <title>Introduction to DatePickerPlus</title>
    <!-- Include Ext stylesheets here: -->
    <link rel="stylesheet" type="text/css" href="Ext/2.2.1/resources/css/ext-all.css"/>
    <link rel="stylesheet" type="text/css" href="Ext/2.2.1/resources/css/xtheme-gray.css" />
    <link rel="stylesheet" type="text/css" href="Ext/2.2.1/ux/ext.ux.datepickerplus/datepickerplus.css" />
    <!-- Include Ext and app-specific scripts: -->
    <script src="Ext/2.2.1/adapter/ext/ext-base.js"></script>
    <script src="Ext/2.2.1/ext-all-debug.js"></script>
    <script src="Ext/2.2.1/ux/ext.ux.datepickerplus/ext.ux.datepickerplus.js"></script>

    <script type="text/javascript">   
        Ext.onReady(
        function()
        {
          Ext.QuickTips.init();
          cal = new Ext.ux.DatePickerPlus
            ({
            id: "dppTest",
            value:            new Date(2009, 1, 19),
            noOfMonth:        1,
            noOfMonthPerRow:  1,
            showWeekNumber:   true,
            markNationalHolidays:   false,
            format: "Y m d",
            listeners:
                {
                select: function(){Ext.MessageBox.alert("you selected: " + this.value); }
                }
            });
            cal.render('myDiv');
        }
        );

        function addEvent()
        {
            var dpp = Ext.getCmp('dppTest');
            dpp.setEventDates([]);
            dpp.edArray.push({
                date: new Date(2009, 1, 25), 
                text: "the event",
                cls: "x-datepickerplus-eventdates"            
            });
            if (dpp.rendered) {
                dpp.update(dpp.activeDate);
                console.log("# of events: " + dpp.edArray.length);//or dpp.eventDates.length
            } 
        }
    </script>  
</head>
<body>
    <div id="myDiv"></div>
    <input type="button" id="btnEvent" value="addEvent" onclick="addEvent();"/>
</body>
</html>

Thanks in advance - as i'm sure someone can point me at where i'm going wrong!

Regards,
RuiDC

**wm003** · 21 Feb 2009 2:57 AM

Originally Posted by RuiDC

Thanks in advance - as i'm sure someone can point me at where i'm going wrong!

You need to use setEventDates with the complete Set of eventdates right now. I'm working on a better solution like using stores or at least push/pop functions for the upcoming update(s). Meanwhile simply try this:

Code:

        function addEvent()
        {
            var dpp = Ext.getCmp('dppTest');
            if(!dpp.edArray) {dpp.edArray=[];}
            dpp.setEventDates(
                dpp.edArray.push({
                    date: new Date(2009, 1, 25), 
                    text: "the event",
                    cls: "x-datepickerplus-eventdates"            
                })
            );
        }

**RuiDC** · 22 Feb 2009 5:03 AM

Thanks for the speedy reply, but it still does not work for me; first log wites 0, second one writes 1, no errors but event date does not render:

Code:

function addEvent()
        {
            var dpp = Ext.getCmp('dppTest');
            if(!dpp.edArray) {dpp.edArray=[];}
            /*
            dpp.edArray=[{date: new Date(2009, 1, 25), 
                    text: "the event",
                    cls: "x-datepickerplus-eventdates" }];
            */
            dpp.setEventDates(
                dpp.edArray.push({
                    date: new Date(2009, 1, 25), 
                    text: "the event",
                    cls: "x-datepickerplus-eventdates"            
                })
            );
            //console.log("event 0 in array before render: " + dpp.edArray[0].text);
            if (dpp.rendered) {
                dpp.update(dpp.activeDate);
                console.log("# of events in array: " + dpp.edArray.length);
                console.log("# of events in property: " + dpp.eventDates.length);
            } 
        }

also, tried with direct assignment ie. uncommenting the two comment blocks, this would show the array had the event, but would still not render.

does this work for you? ie. is there something wrong with my setup?

**wm003** · 23 Feb 2009 1:38 AM

Originally Posted by RuiDC

Thanks for the speedy reply, but it still does not work for me.

Some small changes and it works:

PHP Code:


function addEvent()

        {

            var dpp = Ext.getCmp('dppTest');

            if(!dpp.edArray) {dpp.edArray=[];}

            dpp.edArray.push({

                date: new Date(2009, 1, 25), 

                text: "the event",

                cls: "x-datepickerplus-eventdates"            

            });

            dpp.setEventDates(dpp.edArray);

        }

**RuiDC** · 23 Feb 2009 6:01 AM

Bingo! that was the missing piece - i see what i did wrong from that.

Many thanks!
RuiDC

**dubdub** · 23 Feb 2009 6:16 AM

Originally Posted by dubdub

Thank you for your answer. I'm trying the code you wrote, but I have still an issue.
No problem when I select a month, then a week, then the a day ... But in the other order : I select a day, then I want to select a week, ddp alerts me that I can only select 1 day, and if I click a second time, it selects the week ... (same issue for week or day then month)

(For information, the third parameter "wasselected" was always "true", i don't know if it could help)

I asnwer to myself: P

I finally added two events 'beforeweekclick' and 'beforemonthclick' in the datepickerplus source, and it seems to do what I want ... so ... i'm happy

**RuiDC** · 3 Mar 2009 5:19 AM

Hi,
I'm interacting with the event dates and am stuck on 2 questions:
1. if i have an event date on the same date as today, the tooltip saying "Today" takes precedence. Is there any way to change this and have my event tooltip come up instead? I've had a go with firebug here, but am lost in mountains of code.
2. Is there a better way to not display the nextdays (ie. the days visible from other months) other than overriding the styling of x-date-nextday ?

One additional question, has anyone submitted a Portuguese localiization file? If not i would like to have a go.

Regards,
RuiDC

**wm003** · 3 Mar 2009 5:55 AM

Originally Posted by RuiDC

1. if i have an event date on the same date as today, the tooltip saying "Today" takes precedence. Is there any way to change this and have my event tooltip come up instead? I've had a go with firebug here, but am lost in mountains of code.

currently, you will need to modify the code. i will take care of that in the next version.

Originally Posted by RuiDC

2. Is there a better way to not display the nextdays (ie. the days visible from other months) other than overriding the styling of x-date-nextday ?

not yet.there already was a request of being able to do this, so i'll take care of it for the upcoming version ('when it's done')

Originally Posted by RuiDC

One additional question, has anyone submitted a Portuguese localiization file? If not i would like to have a go.

no, i haven't got a portuguese translation yet. I will be glad, if you are going to do this (including portuguese holidays?)

**laluigino** · 6 Mar 2009 10:03 AM

Hi wm003!

First of all: congratulations for this wonderful extension!
I hope that you'll manage to release the new store function soon!
In fact, one of my needs is to load events dinamically for each month.

By now, following your suggestion about the addEvent function, I've written a very simple code that solve this issue, so here's what I've done:

Code:

Ext.onReady(function(){
	Ext.QuickTips.init();
	var datepicker = new Ext.ux.DatePickerPlus({
		id: "dppTest",
		renderTo: 'test',
		startDay: 1,
		disableMonthPicker: true,
		showWeekNumber: false,
		format: 'd/m/y',
		listeners: {
                	select: function() {
				// some actions here
                	},
                	aftermonthchange: function(dppObj) {
				loadEvents(dppObj.activeDate.getFullYear(), dppObj.activeDate.getMonth());
			},
			render: function(dppObj) {
				loadEvents(dppObj.activeDate.getFullYear(), dppObj.activeDate.getMonth());
			}
		}
	});
	function addEvent(obj) {
		var dpp = Ext.getCmp('dppTest');
		if (!dpp.edArray) {dpp.edArray=[];}
		dpp.edArray.push(obj);
		dpp.setEventDates(dpp.edArray);
	}
	function loadEvents(year, month) {
		var dpp = Ext.getCmp('dppTest');
		dpp.edArray=[];
		Ext.Ajax.request({
			url: 'test.php',
			success: function(r, o) {
				a = eval(r.responseText);
				for (var i = 0, n = a.length; i < n; i++) {
					addEvent(a[i]);
				}
			},
			params: {
				y: year,
				m: month
			}
		});
	} 
});

Basically, the 'test.php' page returns an array of event objects:

Code:

[ { date: new Date(2009, 2, 29), text: "Event of 29/03/2009", cls: "x-datepickerplus-eventdates" }
, { date: new Date(2009, 2, 3), text: "Event of 03/03/2009", cls: "x-datepickerplus-eventdates" } ]

that is then evaluated.
I know that it's not the best way to achieve this, but I thought that it could be a quick solution useful for someone else.

Thanks again for this extension!

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

Thread Tools

Search Thread

Display

setEventDates : regression or why does it not work for me?

setEventDates : regression or why does it not work for me?

setEventDates works with that code

setEventDates works with that code

Event dates

Event dates

Quick solution to load events for each month

Quick solution to load events for each month

Tags for this Thread