JavaScript DHTML/SmartClient/Date Picker
Calendar: event auto arrange
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Calendar.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> var _today = new Date; var _start = _today.getDate() - _today.getDay(); var _month = _today.getMonth(); var _year = _today.getFullYear(); var eventOverlapData = [ {
eventId: 1, name: "Meeting", description: "Shareholders meeting: monthly forecast report", startDate: new Date(_year, _month, _start + 3, 9), endDate: new Date(_year, _month, _start + 3, 14)
}, {
eventId: 2, name: "Realtor", description: "Breakfast with realtor to discuss moving plans", startDate: new Date(_year, _month, _start + 3, 8 ), endDate: new Date(_year, _month, _start + 3, 10)
}, {
eventId: 3, name: "Soccer", description: "Little league soccer finals", startDate: new Date(_year, _month, _start + 4, 8), endDate: new Date(_year, _month, _start + 4, 12)
}, {
eventId: 4, name: "Sleep", description: "Catch up on sleep", startDate: new Date(_year, _month, _start + 4, 9), endDate: new Date(_year, _month, _start + 4, 11)
}, {
eventId: 5, name: "Inspection", description: "Home inspector coming", startDate: new Date(_year, _month, _start + 4, 10), endDate: new Date(_year, _month, _start + 4, 12), eventWindowStyle: "testStyle", canEdit: false
}, {
eventId: 6, name: "Dinner Party", description: "Prepare elaborate meal for friends", startDate: new Date(_year, _month, _start + 4, 11), endDate: new Date(_year, _month, _start + 4, 14)
}, {
eventId: 7, name: "Poker", description: "Poker at Steve"s house", startDate: new Date(_year, _month, _start + 4, 13), endDate: new Date(_year, _month, _start + 4, 16)
} ]; isc.Calendar.create({
ID: "eventCalendar", data: eventOverlapData, eventAutoArrange: true, eventOverlap: false
});
</SCRIPT> </BODY> </HTML>
</source>
Data bound calendar
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Calendar.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> var _today = new Date; var _start = _today.getDate() - _today.getDay(); var _month = _today.getMonth(); var _year = _today.getFullYear(); var eventData = [ {
eventId: 1, name: "Meeting", description: "Shareholders meeting: monthly forecast report", startDate: new Date(_year, _month, _start + 2, 9), endDate: new Date(_year, _month, _start + 2, 14)
}, {
eventId: 2, name: "Realtor", description: "Breakfast with realtor to discuss moving plans", startDate: new Date(_year, _month, _start + 3, 8 ), endDate: new Date(_year, _month, _start + 3, 10)
}, {
eventId: 3, name: "Soccer", description: "Little league soccer finals", startDate: new Date(_year, _month, _start + 4, 13), endDate: new Date(_year, _month, _start + 4, 16)
}, {
eventId: 4, name: "Sleep", description: "Catch up on sleep", startDate: new Date(_year, _month, _start + 4, 5), endDate: new Date(_year, _month, _start + 4, 9)
}, {
eventId: 5, name: "Inspection", description: "Home inspector coming", startDate: new Date(_year, _month, _start + 4, 10), endDate: new Date(_year, _month, _start + 4, 12), eventWindowStyle: "testStyle", canEdit: false
}, {
eventId: 6, name: "Airport run", description: "Pick James up from the airport", startDate: new Date(_year, _month, _start + 4, 1), endDate: new Date(_year, _month, _start + 4, 3)
}, {
eventId: 7, name: "Dinner Party", description: "Prepare elaborate meal for friends", startDate: new Date(_year, _month, _start + 4, 17), endDate: new Date(_year, _month, _start + 4, 20)
}, {
eventId: 8, name: "Poker", description: "Poker at Steve"s house", startDate: new Date(_year, _month, _start + 4, 21), endDate: new Date(_year, _month, _start + 4, 23)
}, {
eventId: 9, name: "Meeting", description: "Board of directors meeting: discussion of next months strategy", startDate: new Date(_year, _month, _start + 5, 11), endDate: new Date(_year, _month, _start + 5, 15)
} ];
// using a client-only dataSource so that test data is always relative to the current date isc.DataSource.create({
ID: "eventDS",
fields:[
{name:"eventId", primaryKey: true, type: "sequence"},
{name:"name"},
{name:"description"},
{name:"startDate", type: "datetime"},
{name:"endDate", type: "datetime"}
],
clientOnly: true,
testData: eventData
}); isc.Calendar.create({
ID: "eventCalendar", dataSource: eventDS, autoFetchData: true
});
</SCRIPT> </BODY> </HTML>
</source>
Date picker with default value
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY> <SCRIPT> var abcdArray = ["a", "b", "c", "d"],
abcdList = {a:"option a", b:"option b", c:"option c", d:"option d"},
formItems = [
{name:"item1", type:"header", defaultValue:"header value"},
{name:"item2", type:"blurb", defaultValue:"blurb value"},
{type:"rowSpacer"},
{name:"item3", title:"staticText", type:"staticText", defaultValue:"staticText value"},
//----- data items -----\\
{name:"item4", title:"text", type:"text", defaultValue:"text value"},
{name:"item13", title:"date", type:"date", defaultValue:"10/11/2001"},
];
DynamicForm.create({
ID:"itemsForm", left:20, top:40, width:400, items:formItems, canSubmit:true // Required for the submit button to be operative
}); </SCRIPT> </BODY> </HTML>
</source>
