Also after playing around with my example for a while, it randomly throws an internal javascript error in "s=k.getBoundingClientRect();".
Follows code for my example based on Daniil's, please see if i'm doing aanything wrong:
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
class MyEvent : Event
{
public string PAT { get; set; }
public string Local { get; set; }
}
protected void Page_Load(object sender, EventArgs e)
{
this.CalendarPanel1.EventStore.AddStandardFields();
this.CalendarPanel1.EventStore.Reader[0].Fields.Add(new RecordField("PAT"));
this.CalendarPanel1.EventStore.Reader[0].Fields.Add(new RecordField("Local"));
if (!X.IsAjaxRequest)
{
Store store = this.CalendarPanel1.EventStore;
store.DataSource = new System.Collections.Generic.List<object>
{
new MyEvent()
{
Title = "Meu evento",
CalendarId = 1,
StartDate = DateTime.Now,
EndDate = DateTime.Now.AddDays(1),
EventId = 1,
PAT = "1112266",
Local = "Rua do Carmo"
}
};
store.DataBind();
}
}
protected void EventStore_SubmitData(object sender, StoreSubmitDataEventArgs e)
{
MyEvent[] events = JSON.Deserialize<MyEvent[]>(e.Json);
this.WindowSubmit.Html = JSON.Serialize(events);
WindowSubmit.Show();
}
</script>
<!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 id="Head1" runat="server">
<title>Ext.Net Example</title>
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" />
<script type="text/javascript" src="MyEventRecord.js"></script>
<script type="text/javascript">
var CompanyX = {
ShowMsg: function(aaa)
{
//alert(aaa);
},
getCalendar: function() {
return CompanyX.CalendarPanel1;
},
getStore: function() {
return CompanyX.EventStore1;
},
getWindow: function() {
return CompanyX.EventEditWindow1;
},
updateTitle: function(startDt, endDt) {
var msg = '';
if (startDt.clearTime().getTime() == endDt.clearTime().getTime()) {
msg = startDt.format('F j, Y');
} else if (startDt.getFullYear() == endDt.getFullYear()) {
if (startDt.getMonth() == endDt.getMonth()) {
msg = startDt.format('F j') + ' - ' + endDt.format('j, Y');
} else {
msg = startDt.format('F j') + ' - ' + endDt.format('F j, Y');
}
} else {
msg = startDt.format('F j, Y') + ' - ' + endDt.format('F j, Y');
}
this.Panel1.setTitle(msg);
},
setStartDate: function(picker, date) {
this.getCalendar().setStartDate(date);
},
rangeSelect: function(cal, dates, callback) {
this.record.show(cal, dates);
this.getWindow().on('hide', callback, cal, { single: true });
},
dayClick: function(cal, dt, allDay, el) {
this.record.show.call(this, cal, {
StartDate: dt,
IsAllDay: allDay
}, el);
},
record: {
add: function(win, rec) {
win.hide();
rec.data.IsNew = false;
CompanyX.getStore().add(rec);
},
update: function(win, rec) {
win.hide();
rec.commit();
},
remove: function(win, rec) {
this.getStore().remove(rec);
win.hide();
CompanyX.ShowMsg('Event ' + rec.data.Title + ' was deleted');
},
edit: function(win, rec) {
win.hide();
CompanyX.getCalendar().showEditForm(rec);
},
resize: function(cal, rec) {
rec.commit();
CompanyX.ShowMsg('Event ' + rec.data.Title + ' was updated');
},
move: function(cal, rec) {
rec.commit();
CompanyX.ShowMsg('Event ' + rec.data.Title + ' was moved to ' + rec.data.StartDate.format('F jS' + (rec.data.IsAllDay ? '' : ' \\a\\t g:i a')));
},
show: function(cal, rec, el) {
CompanyX.getWindow().show(rec, el);
},
saveAll: function() {
CompanyX.getStore().submitData();
}
}
};
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" Namespace="CompanyX" />
<ext:Viewport ID="Viewport1" runat="server" Layout="fit">
<Items>
<ext:CalendarPanel ID="CalendarPanel1" runat="server" Height="500">
<EventStore ID="EventStore1" runat="server" OnSubmitData="EventStore_SubmitData" />
<GroupStore ID="GroupStore1" runat="server">
<Groups>
<ext:Group CalendarId="1" Title="Home" />
<ext:Group CalendarId="2" Title="Work" />
<ext:Group CalendarId="3" Title="School" />
<ext:Group CalendarId="4" Title="Other" />
</Groups>
</GroupStore>
<Listeners>
<EventClick Fn="CompanyX.record.show" Scope="CompanyX" />
<DayClick Fn="CompanyX.dayClick" Scope="CompanyX" />
<RangeSelect Fn="CompanyX.rangeSelect" Scope="CompanyX" />
<EventMove Fn="CompanyX.record.move" Scope="CompanyX" />
<EventResize Fn="CompanyX.record.resize" Scope="CompanyX" />
</Listeners>
<Buttons>
<ext:Button ID="Button1" runat="server" Text="Submit">
<Listeners>
<Click Handler="CompanyX.CalendarPanel1.eventStore.submitData();" />
</Listeners>
</ext:Button>
</Buttons>
</ext:CalendarPanel>
</Items>
</ext:Viewport>
<ext:EventEditWindow ID="EventEditWindow1" runat="server" Hidden="true" GroupStoreID="GroupStore1">
<Listeners>
<EventAdd Fn="CompanyX.record.add" Scope="CompanyX" />
<EventUpdate Fn="CompanyX.record.update" Scope="CompanyX" />
<EventDelete Fn="CompanyX.record.remove" Scope="CompanyX" />
<Render Handler="this.fbar.get(0).hidden = true;" />
<BeforeRender Handler="
this.get(0).add({id: 'TextField1', fieldLabel: 'PAT', xtype:'textfield', dataIndex: 'PAT'});
this.get(0).add({id: 'TextField2', fieldLabel: 'Local', xtype:'textfield', dataIndex: 'Local'});" />
</Listeners>
</ext:EventEditWindow>
<ext:Window ID="WindowSubmit" runat="server" Hidden="true" Width="500" Height="500" />
</form>
</body>
</html>
Myeventrecord.js:
Ext.calendar.EventMappings = {
EventId: {
name: 'EventId',
mapping: 'id',
type: 'int'
},
CalendarId: {
name: 'CalendarId',
mapping: 'cid',
type: 'int'
},
Title: {
name: 'Title',
mapping: 'title',
type: 'string'
},
StartDate: {
name: 'StartDate',
mapping: 'start',
type: 'date',
dateFormat: 'c'
},
EndDate: {
name: 'EndDate',
mapping: 'end',
type: 'date',
dateFormat: 'c'
},
Location: {
name: 'Location',
mapping: 'loc',
type: 'string'
},
Notes: {
name: 'Notes',
mapping: 'notes',
type: 'string'
},
Url: {
name: 'Url',
mapping: 'url',
type: 'string'
},
IsAllDay: {
name: 'IsAllDay',
mapping: 'ad',
type: 'boolean'
},
Reminder: {
name: 'Reminder',
mapping: 'rem',
type: 'string'
},
IsNew: {
name: 'IsNew',
mapping: 'n',
type: 'boolean'
},
PAT: {
name: 'PAT',
mapping: 'PAT',
type: 'string'
},
Local: {
name: 'Local',
mapping: 'Local',
type: 'string'
}
};
(function() {
var M = Ext.calendar.EventMappings;
Ext.calendar.EventRecord = Ext.data.Record.create([
M.EventId,
M.CalendarId,
M.Title,
M.StartDate,
M.EndDate,
M.Location,
M.Notes,
M.Url,
M.IsAllDay,
M.Reminder,
M.IsNew,
M.PAT,
M.Local
]);
Ext.calendar.EventRecord.reconfigure = function() {
Ext.calendar.EventRecord = Ext.data.Record.create([
M.EventId,
M.CalendarId,
M.Title,
M.StartDate,
M.EndDate,
M.Location,
M.Notes,
M.Url,
M.IsAllDay,
M.Reminder,
M.IsNew,
M.PAT,
M.Local
]);
};
})();