Featured Post

Ext-JS Scheduler

-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Scheduler Demo</title>
<!-- Ext includes -->
<link rel="stylesheet" type="text/css" href="ext3/css/ext-all.css" />
<script type="text/javascript" src="ext3/ext-base-debug.js"></script>
<script type="text/javascript" src="ext3/ext-all-debug.js"></script>

<!-- Scheduler includes -->
<link href="ext-sch/css/sch.schedulerpanel.css" rel="stylesheet"
type="text/css" />
<link href="ext-sch/css/sch.plugins.resize.css" rel="stylesheet"
type="text/css" />
<link href="ext-sch/css/sch.plugins.common.css" rel="stylesheet"
type="text/css" />
<link href="ext-sch/css/sch.event.css" rel="stylesheet" type="text/css"
/>
<script src="ext-sch/js/Scheduler/sch-all-eval.js"
type="text/javascript" ></script>

<style type="text/css">
.sch-event
{
background:url(ext3/images/default/grid/grid-blue-hd.gif)
repeat-x;
border-color:#6699cc;
border-style:solid;
color:#1C417C;
cursor:pointer;
text-align: center;
top:0px;
}
.sch-event-inner
{
padding:1px;
}
.sch-event-selected
{
border-color:#3366cc !important;
border-width:1px !important;
}
div.sch-event:hover
{
border-color:#3366cc;
}
</style>

<script type="text/javascript">

Ext.ns('ConfRooms');

Ext.onReady(function() {

Ext.BLANK_IMAGE_URL = 'ext3/images/default/s.gif';

ConfRooms.nextId = function() {
var t = String(new Date().getTime()).substr(4);
var s = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
for (var i = 0; i < 4; i++) {
t += s.charAt(Math.floor(Math.random() * 26));
}
return t;
}


// Resource store
ConfRooms.confRoomStore = new Ext.data.JsonStore({
fields: ['Id', 'name'],
data: [
{ Id: '1', name: 'Conference Room A' },
{ Id: '2', name: 'Conference Room B' },
{ Id: '3', name: 'Conference Room C' },
{ Id: '4', name: 'Conference Room D' },
{ Id: '5', name: 'Conference Room E' }
]
});

// Event store
ConfRooms.reservationsStore = new Ext.data.JsonStore({
url: 'reservations.aspx',
autoLoad: true,
root: 'records',
idProperty: 'Id',
fields: [
// Mandatory
{name: 'Id' },
{ name: 'StartDate', type: 'date', dateFormat: 'Y-m-d
G:i:s' },
{ name: 'EndDate', type: 'date', dateFormat: 'Y-m-d
G:i:s' },
{ name: 'ResourceId', type: 'string', mapping: 'RoomId'
},

// Application-specific
{name: 'ReservedTo', type: 'string', mapping:
'ReservedTo' },
{ name: 'Description', type: 'string', mapping:
'Description' }
],
writer: new Ext.data.JsonWriter({
autoSave: false,
encode: true
})
});


Sch.ColumnFactory.headerRenderers.hour = function(a) { return
a.format("g:i A") };

// Ext.apply(Sch.ViewBehaviour.HourView.prototype, {
// getFormattedDate: function(a) { return a.format("g:i A");
},
// getFormattedDateSpan: function(a, b) { return { start:
a.format("g:i A"), end: b.format("g:i A") }; }
// });

ConfRooms.start = new Date(2009, 11, 16, 8, 00, 00);
ConfRooms.end = new Date(2009, 11, 16, 18, 00, 00);

ConfRooms.sch = new Sch.SchedulerPanel({
height: 300,
width: 800,
renderTo: 'conf-rooms-1',
title: 'Conference Room Reservations',
trackMouseOver: false,
stripeRows: true,
store: ConfRooms.confRoomStore,
eventStore: ConfRooms.reservationsStore,
startParamName: 'StartDate',
endParamName: 'EndDate',
viewConfig: {
forceFit: true
},
columns: [
{ header: 'Room Name', sortable: true, width: 150,
dataIndex: 'name' }
],
eventTemplate: new Ext.Template(
'<div id="{id}"
style="width:{width}px;left:{leftOffset}px" class="sch-event {cls}">',
'<div class="sch-event-inner">{text}</div>',
'</div>'
).compile(),
tooltipTpl: new Ext.Template(
'<div class="eventTip">',
'<div><b>{Description}</b></div>',
'<div>Reserved by: {ReservedTo}</div>',
'</div>'
).compile()

});

// This is the public method to manually set/change "view"
ConfRooms.sch.setView(ConfRooms.start, ConfRooms.end, 'hour',
Sch.ViewBehaviour.HourView, function(item, m, r, row, col, ds, index) {
return {
text: item.get('Description')
};
});


});

</script>
</head>
<body>
<div id="conf-rooms-1" style="padding:20px"></div>
</body>
</html>

This e-Mail may contain proprietary and confidential information and is sent for the intended recipient(s) only. If by an addressing or transmission error this mail has been misdirected to you, you are requested to delete this mail immediately. You are also hereby notified that any use, any form of reproduction, dissemination, copying, disclosure, modification, distribution and/or publication of this e-mail message, contents or its attachment other than by its intended recipient/s is strictly prohibited.

Visit us at http://www.polaris.co.in

Comments

Post a Comment