PDA

View Full Version : Ext.ux.DaysOfMonthPicker, Another MonthPicker



acidfilez
26 Mar 2009, 8:13 AM
DaysOfMonthPicker component for selecting days in a month.

This will work for Ext 2.2.1.

Select Days:

12695

Change Month: (this is another user's component, I only reused it here)

12696

Show Weekends (context menu):

12698


Downlaod:
12712

Usage:
JS && CSS in your .html add




<link rel="stylesheet" type="text/css" href="domp/monthPicker.css" />
<link rel="stylesheet" type="text/css" href="domp/daysOfMonthPicker.css" />

<script type="text/javascript" src="domp/MonthPicker.js"></script>
<script type="text/javascript" src="domp/Ext-DOMP.js"></script>
<script type="text/javascript" src="domp/DaysOfMonthPicker.js "></script>


We are creating a window and add the new days of monthpicker component to the windows items



var win;
if(!win){
win = new Ext.Window({
title:'tmpwindows title',
resizable: false,
shim:false,
animCollapse:false,
border:false,
maximizable:false,
constrainHeader:true,
layout: 'fit',
items: [{
xtype: 'daysofmonthpicker',
id: 'daysofmonthpicker',
showWeekends: false, //display weekend column = true.
markWeekends: true, //mark weekends day
clickWeekends: false, //weekends can be click
changeParentTitle: true, //forces the ownerContainer to setTitle = true
autoSize: true,
autoWidthParent : true, //forces the ownerContainer to resize depending on # columns
btnSaveLabel: 'Save', //button Save Label
fieldLabel: 'Date', //topbar field label text.
weekendLabelMenu: 'Mostrar Fin De Semana', //display weekend label contextmenu label
parentTitle: 'Calendar Dummy - {date}', //the title of the ownerContainer that will be used
daysChecked: ['2009-3-18','2009-3-13','2009-3-12'],
daysUnChecked: [],
btnSaveHandler: function (){
var component = this.parent;
Ext.Msg.alert('Status', 'Btn Save Pressed. My Component Days Checked:' + component.getDaysChecked());
}
}]
});
}
win.show();

Be Happy and dont forget to change btnSaveHandler property.
And In case you are not happy the properties and methods that can be used.



/*
* Ext JS Library 2.2.1
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/

/**
* Ext.ux.DaysOfMonthPicker
*
* @author Magno Cardona heck
* @version
* @date 23/03/2009
*
*
* @license Ext.ux.DaysOfMonthPicker is licensed under the terms of
* the Open Source LGPL 3.0 license. Commercial use is permitted to the extent
* that the code/component(s) do NOT become part of another Open Source or Commercially
* licensed development library or toolkit without explicit permission.
*
* License details: http://www.gnu.org/licenses/lgpl.html
*/

/*
* @class Ext.ux.DaysOfMonthPicker
* @extends Ext.grid.GridPanel
*
* Usage:
*
* {
* xtype: 'daysofmonthpicker',
* id: 'myRandomID' ,
* showWeekends: true,
* markWeekends: true,
* changeParentTitle: true,
* autoWidthParent : true,
* btnSaveLabel: 'Guardar',
* fieldLabel: 'Fecha',
* weekendLabelMenu: 'Mostrar Fin De Semana',
* parentTitle: 'Calendario Feriado - {date}',
* daysChecked: ['2009-3-18','2009-3-13','2009-3-12'],
* daysUnChecked: ['2009-3-14']
* }
*
* autoSize: true|false
* tries to resize the parent container to an adequate size.
* (default:false)
*
*
* autoWidthParent: true|false
* Allows the parent container to change width when
* show / hide of the weekends column.
* (default:false)
*
*
* showWeekends: true|false
* displays sunday and saturday column if true.
* (default:false)
*
* clickWeekends: true|false
* allows the weekends columns to be clicked.
* (default:false)
*
*
* markWeekends: true|false
* sunday and saturdays will always start marked if true,
* sunday and saturdays will always start unmarked if false,
* daysChecked and daysUnChecked collection can overide this behaviour.
*
*
* daysChecked: []
* Array of days which are supposed to be mark,
* the dates have to be in this format 'year-month-day'
* ex.- ['2009-3-18','2009-3-13','2009-3-12']
*
*
* daysUnChecked: []
* Array of days which are supposed to be unmark,
* the dates have to be in this format 'year-month-day'.
* ex.- ['2009-3-18','2009-3-13','2009-3-12']
*
*
* changeParentTitle: true|false
* Allows the parent container (usualy a Ext.Window) to change
* its title when the month changes.
* (default:true)
*
*
* parentTitle: str
* The title the parent container that will be used when the month
* changes. (default:'{date}')
* ex.- 'Calendar - {date}'
* {date} will be raplace with month names + year
* the ex. will display 'Calendar - April 2009'.
*
*
* btnSaveLabel: str
* text to display on the save button. (default:'Save')
*
*
* fieldLabel: str
* text to display on the field month picker. (default:'Date')
*
*
* weekendLabelMenu: str
* text to be used on the context menu item that hides/shows the
* weekend column. (default:'show weekends')
*
*
* btnSaveHandler: function
* handler for the save button Change this function to your needs.
*
* ex.-
* btnSaveHandler: function (){
* var component = this.parent;
* Ext.Msg.alert('Status', 'Btn Save Pressed. ' +
* 'My Component Days Checked: ' +
* component.getDaysChecked());
* }
*
* Methods that can be used:
*
* getCalendar():
* returns a mixedcollection of days marked.
*
* getDaysChecked(year,month):
* returns a collection of dates that are checked in that date
* ex.- ['2009-3-18','2009-3-13','2009-3-12']
*
* getDaysUnChecked(year,month):
* returns a collection of dates that are not checked in that date
* ex.- ['2009-3-18','2009-3-13','2009-3-12']
*
* setDay(year, month, day, checked):
* if cheked is true it marks a day checked.
* if cheked is false it marks a day unchecked.
* this method doesnt redraw the calendar.
*
* markDay(year, month, day, checked):
* if cheked is true it marks a day checked.
* if cheked is false it marks a day unchecked.
* this method calls reDraw() before finish so changes are
* display on the calendar.
*
* reDraw():
* render the component again.
*/
Finally Credits:
- to the creator of Ext.MonthPicker that i used to choose the month.
- and to my ~o) of coffes that help me keep it real.

Note: In Ext 2.2 using IE there is a bug, and you got to uncomment this code



// before 2.2.1 you need to uncomment this patch fix for ie
// if (Ext.isIE) { //bugged or i am just plain stupid.
// monthStartOnDay = monthStartOnDay - 1;
// }

tanajura
26 Mar 2009, 9:20 AM
Very nice!:D

jackyx
1 Apr 2009, 8:11 PM
Thank you for your share:)

sabline
3 Apr 2009, 6:48 PM
i'm using your component: very nice work! thank you!!

jsakalos
10 Aug 2009, 12:33 AM
Very well done! Comes handy in some situations.

Thank you for sharing.

pretender
25 Oct 2009, 1:39 PM
Hi there,

I am new in GWT and this things. Could you explain me briefly how to use this?

Thanks in advance

Pretender

Greffin
27 Oct 2009, 1:42 PM
Hi.

I've tried to test out your component, but I cannot get it to work.

This is how I'm trying to use it:
HTML Head:


<!-- STYLES -->
<link rel='stylesheet' type='text/css' href='resources/ext/css/ext-all.css' />
<link rel="stylesheet" type="text/css" href="resources/css/calendar/monthPicker.css" />
<link rel="stylesheet" type="text/css" href="resources/css/calendar/daysOfMonthPicker.css" />

<!-- LIBS -->
<!-- Ext lib -->
<script type='text/javascript' src='script/Ext/jquery.js'></script>
<script type='text/javascript' src='script/Ext/ext-jquery-adapter.js'></script>
<script type='text/javascript' src='script/Ext/ext-all.js'></script>

<script type="text/javascript" src="script/calendar/MonthPicker.js"></script>
<script type="text/javascript" src="script/calendar/Ext-DOMP.js"></script>
<script type="text/javascript" src="script/calendar/DaysOfMonthPicker.js "></script>
<!-- ENDLIBS -->
Component initializer:


var win = new Ext.Window({
width : 500,
height: 500,
title : 'Administration console',
layout: 'card',
tbar : [
{ text: 'Booking' },
{ text: 'Manage users' }
],
defaults : { xtype: 'form' },
activeItem: 0,
items : [
{
id : 'bookingPanel',
xtype : 'daysofmonthpicker',
showWeekends : false,
markWeekends : true,
clickWeekends : false,
changeParentTitle : true,
autoSize : true,
autoWidthParent : true,
btnSaveLabel : 'Save',
fieldLabel : 'Date',
weekendLabelMenu : 'Weekend',
parentTitle : 'Calendar Dummy - {date}',
daysChecked : ['2009-3-18','2009-3-13','2009-3-12'],
daysUnChecked : [],
btnSaveHandler : function (){
// var component = this.parent;
// Ext.Msg.alert('Status', 'Btn Save Pressed. My Component Days Checked:' + component.getDaysChecked());
}
}
]
});

win.show();
Firebug reports the following:

H is undefined
window.undefined=window.undefined;Ext={v...)}window.attachEvent("onunload",a)}})();
ext-jquery-adapter.js (line 7)


Ext.form.MonthField is not a constructor
name: "datetmp"\n
DaysOfMonthPicker.js (line 553)


What am I doing wrong?