JavaScript DHTML/SmartClient/Calendar
Compact calendar and event
<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.DataSource.create({
ID: "eventDS",
fields:[
{name:"eventId", primaryKey: true, type: "sequence"},
{name:"name"},
{name:"description"},
{name:"startDate"},
{name:"endDate"}
],
clientOnly: true,
testData: eventData
}); isc.DataSource.create({
ID: "eventDS",
fields:[
{name:"eventId", primaryKey: true, type: "sequence"},
{name:"name"},
{name:"description"},
{name:"startDate"},
{name:"endDate"}
],
clientOnly: true,
testData: eventData
}); isc.Calendar.create({
ID: "eventCalendar",
width: 500,
height: 220,
showDayView: false,
showWeekView: false,
showOtherDays: false,
showDayHeaders: false,
showDateChooser: false,
showDatePickerButton: false,
showAddEventButton: false,
disableWeekends: false,
dataSource: eventDS,
autoFetchData: true,
showDateChooser: true,
canCreateEvents : false,
getDayBodyHTML : function (date, events, calendar, rowNum, colNum) {
returnStr = date.getDate() + " ";
if (events && events.length > 0) {
returnStr += this.imgHTML("icons/16/approved.png", 16, 16, "image", "style="margin-top:6px"");
}
return returnStr;
},
dayBodyClick : function (date, events, calendar, rowNum, colNum) {
var nameStr="";
if (events.length == 0) nameStr = "No events";
for (var i=0; i<events.length; i++) {
nameStr += events[i].name + "
";
}
isc.say(nameStr, {title:date.toUSShortDate()});
}
});
</SCRIPT>
</BODY>
</HTML>
</source>
Day, week and month 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)
} ]; isc.Calendar.create({
ID: "eventCalendar", data: eventData
});
</SCRIPT> </BODY> </HTML>
</source>
Workday 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)
} ]; isc.DataSource.create({
ID: "eventDS",
fields:[
{name:"eventId", primaryKey: true, type: "sequence"},
{name:"name"},
{name:"description"},
{name:"startDate"},
{name:"endDate"}
],
clientOnly: true,
testData: eventData
}); isc.Calendar.create({
ID: "eventCalendar", dataSource: eventDS, autoFetchData: true, showWeekends: false, showWorkday: true, scrollToWorkday: true
});
</SCRIPT> </BODY> </HTML>
</source>
