app:calendar
  • Required Attributes (0)
  • Optional Attributes (6)
  • Examples (1)
  • Source code
Name Type Description Default value
There are no required attributes
Back to menuExample: Simple Example

This is a simple example that uses the <app:calendar>.

<app:calendar title="Select Start Date" inputId="jobfilter_date_start" on="l:calendarexample.start then execute"
	minDate="10/16/2007" close="true">
</app:calendar>
<input type="text" id="jobfilter_date_start" size="10" MAXLENGTH="10" on="focus then l:calendarexample.start"/>
<button on="click then l:calendarexample.start">Set Date</button>
  1 /*
  2  * This file is part of Appcelerator.
  3  *
  4  * Copyright (C) 2006-2008 by Appcelerator, Inc. All Rights Reserved.
  5  * For more information, please visit http://www.appcelerator.org
  6  *
  7  * Appcelerator is free software: you can redistribute it and/or modify
  8  * it under the terms of the GNU General Public License as published by
  9  * the Free Software Foundation, either version 3 of the License, or
 10  * (at your option) any later version.
 11  *
 12  * This program is distributed in the hope that it will be useful,
 13  * but WITHOUT ANY WARRANTY; without even the implied warranty of
 14  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 15  * GNU General Public License for more details.
 16  * 
 17  * You should have received a copy of the GNU General Public License
 18  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 19  *
 20  */
 21 
 22 
 23 Appcelerator.Widget.Calendar =
 24 {
 25 	calendarCount:0,
 26 	
 27 	getName: function()
 28 	{
 29 		return 'appcelerator calendar';
 30 	},
 31 	getDescription: function()
 32 	{
 33 		return 'calendar widget';
 34 	},
 35 	getVersion: function()
 36 	{
 37 		return '1.0.2';
 38 	},
 39 	getSpecVersion: function()
 40 	{
 41 		return 1.0;
 42 	},
 43 	getAuthor: function()
 44 	{
 45 		return 'Nolan Wright';
 46 	},
 47 	getModuleURL: function ()
 48 	{
 49 		return 'http://www.appcelerator.org';
 50 	},
 51 	isWidget: function ()
 52 	{
 53 		return true;
 54 	},
 55 	getWidgetName: function()
 56 	{
 57 		return 'app:calendar';
 58 	},
 59 	getActions: function()
 60 	{
 61 		return ['execute', 'close'];
 62 	},
 63 	getAttributes: function()
 64 	{
 65 		var T = Appcelerator.Types;
 66 		return [{name: 'on', optional: true, description: "May be used to execute the calendar.", type: T.onExpr},
 67 		        {name: 'close', optional: true, description: 'Toggle display of the close button.', type: T.bool, defaultValue: false},
 68 				{name: 'inputId', optional: true, description: 'The id of the input element to update', type: T.identifier},
 69 				{name: 'elementId', optional: true, description: 'Alias for inputId', type: T.identifier},
 70 				{name: 'minDate', optional: true, description: 'The minimum allowed date', type: T.pattern(/[0-9]{1,2}\/[0-9]{1,2}(\/[0-9]{4})/)},
 71 				{name: 'title', optional: true, description: 'The title of the calendar', defaultValue: ''}];
 72 	},
 73 	execute: function(id,parameterMap,data,scope,version)
 74 	{
 75 		Element.show($(parameterMap['name']));
 76 	},
 77 	close: function(id, parameterMap, data, scope, version) 
 78 	{
 79 	    Element.hide($(parameterMap['name']));
 80 	},
 81 	setValue: function(id,params,value) {
 82 	    var cal = YAHOO.appcelerator.calendar[params['name']];
 83 	    if (value != "") {
 84     		cal.select(value);
 85     		var selectedDates = cal.getSelectedDates();
 86     		if (selectedDates.length > 0) {
 87     			var firstDate = selectedDates[0];
 88     			cal.cfg.setProperty("pagedate", (firstDate.getMonth()+1) + "/" + firstDate.getFullYear());
 89     			cal.render();
 90     		}
 91     	}
 92 	},
 93 	getValue: function(id,params) {
 94 	    return params['value'];
 95 	},
 96 	compileWidget: function(parameters)
 97 	{
 98 		var inputId = parameters['inputId'];
 99 		var elementId = parameters['elementId'];
100 		var minDate = parameters['minDate'];
101 		var title = parameters['title'];
102 		var name = parameters['name'];
103 		var id = parameters['id'];
104 		var close = !!parameters['close'];
105 		var element = null;
106 		
107 		if (elementId)
108 		{
109 			element = $(elementId);
110 		}
111 		else if(inputId)
112 		{
113 			element = $(inputId);
114 		}
115 		
116 		YAHOO.namespace('appcelerator.calendar');
117 		
118 		if (minDate)
119 		{
120 			YAHOO.appcelerator.calendar[name] = new YAHOO.widget.Calendar(name+'_cal',name,{close:close,mindate:minDate,title:title});
121 		}
122 		else
123 		{
124 			YAHOO.appcelerator.calendar[name] = new YAHOO.widget.Calendar(name+'_cal',name,{close:close,title:title});
125 		}
126 
127 		YAHOO.appcelerator.calendar[name].render();
128 		YAHOO.appcelerator.calendar[name].selectEvent.subscribe(function(type,args,obj)
129 		{
130 			var dates=args[0];
131 			var date=dates[0];
132 			
133 			var year=date[0];
134 			var month=date[1];
135 			var date=date[2];
136             
137 			var dateString = month + '/' + date + '/' + year;
138 			
139 			if(element)
140 			{
141     			if (inputId)
142     			{
143     				element.value = dateString;
144     				Appcelerator.Compiler.executeFunction(element,'revalidate');
145     			}
146     			else
147     			{
148     				element.innerHTML = dateString;
149     			}
150     		}
151     		else
152     		{
153     		    parameters['value'] = dateString;
154     		}
155     		
156 			Element.hide(name);
157 		}, YAHOO.appcelerator.calendar[name], true);
158 	},
159 	buildWidget: function(element, parameters)
160 	{
161         if (!parameters.inputId && !parameters.elementId && !$(parameters.id).hasAttribute('fieldset'))
162         {
163             throw "inputId or elementId or fieldset is required";
164         }
165         
166 		parameters['name'] = 'app_calendar_' + Appcelerator.Widget.Calendar.calendarCount++;
167 		var html = '<div style="position:absolute;z-index:1000;display:none" id="'+parameters['name']+'" on="' + 
168 		        parameters['on'] + '"></div>';
169 		
170 		return {
171 			'position' : Appcelerator.Compiler.POSITION_REPLACE,
172 			'presentation' : html,
173 			'wire': true,
174 			'compile' : true 
175 	   };	
176 	}
177 };
178 
179 Appcelerator.Core.loadModuleCSS('app:calendar','calendar.css');
180 Appcelerator.Widget.registerWithJS('app:calendar',Appcelerator.Widget.Calendar,['yahoo.js', 'event.js', 'dom.js', 'calendar.js']);
181