app:calendar
| Widget Name | appcelerator calendar |
| Element | <app:calendar> |
| Author | Nolan Wright |
| Homepage | http://www.appcelerator.org |
| Description | calendar widget |
- Required Attributes (0)
- Optional Attributes (6)
- Examples (1)
- Source code
| Name | Type | Description | Default value |
|---|---|---|---|
| There are no required attributes | |||
| Name | Type | Description | Default value |
|---|---|---|---|
| on | On Expression | May be used to execute the calendar. | Not specified |
| close | Boolean | Toggle display of the close button. | Not specified |
| inputId | Identifier | The id of the input element to update | Not specified |
| elementId | Identifier | Alias for inputId | Not specified |
| minDate | pattern | The minimum allowed date | Not specified |
| title | Unknown | The title of the calendar |
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
Chapters
- Web Expressions (Interaction)
- Web Expressions (Visual)
- Web Expression Macros
-
Widget Reference
- app:as_flexflow
- app:box
- app:button
- » app:calendar
- app:chart
- app:content
- app:datacache
- app:datatable
- app:download
- app:editinplace
- app:ext_grid
- app:ext_paging_grid
- app:ext_tree
- app:field
- app:folder
- app:graphical_music_player
- app:http
- app:if
- app:imagetransition
- app:iterator
- app:message
- app:modalbox
- app:modaldialog
- app:mp3player
- app:music_player
- app:pagination
- app:panel
- app:progressbar
- app:script
- app:search
- app:security
- app:shadowbox
- app:simple_panel
- app:statemachine
- app:stopwatch
- app:tabpanel
- app:template
- app:tooltip
- app:upload
- app:validation
- app:widget
- app:yui_map
- CSS Helper Classes
- Advanced Configuration
- Debugging
- Forms
- Localization
- Interpolation
- Javascript Variables
- Javascript Functions
- Service Broker