Hi,
Here you are.
Example
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
class MyEvent : Event
{
public string Link { get; set; }
}
protected void Page_Load(object sender, EventArgs e)
{
this.CalendarPanel1.EventStore.AddStandardFields();
this.CalendarPanel1.EventStore.Reader[0].Fields.Add(new RecordField("Link"));
if (!X.IsAjaxRequest)
{
Store store = this.CalendarPanel1.EventStore;
store.DataSource = new List<object>
{
new MyEvent()
{
Title = "My event",
CalendarId = 1,
StartDate = DateTime.Now,
EndDate = DateTime.Now.AddDays(1),
EventId = 1,
Link = "Some link",
}
};
store.DataBind();
}
}
</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 runat="server">
<title>Ext.Net Example</title>
<script type="text/javascript">
var CompanyX = {
getCalendar : function () {
return CompanyX.CalendarPanel1;
},
getStore : function () {
return CompanyX.EventStore1;
},
getWindow : function () {
return CompanyX.EventEditWindow1;
},
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();
},
edit : function (win, rec) {
win.hide();
CompanyX.getCalendar().showEditForm(rec);
},
show : function (cal, rec, el) {
CompanyX.getWindow().show(rec, el);
},
saveAll : function () {
CompanyX.getStore().submitData();
}
}
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" Namespace="CompanyX" />
<ext:Viewport runat="server" Layout="FitLayout">
<Items>
<ext:CalendarPanel ID="CalendarPanel1" runat="server">
<EventStore ID="EventStore1" runat="server" />
<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" />
<BeforeRender Handler="var form = this.get(this.id + '-edit');
form.get('left-col').add({id: 'TextFieldLink1', fieldLabel: 'Link', xtype:'textfield', dataIndex: 'Link'});" />
</Listeners>
</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" />
<EditDetails Fn="CompanyX.record.edit" Scope="CompanyX" />
<EventDelete Fn="CompanyX.record.remove" Scope="CompanyX" />
<BeforeRender Handler="this.items.get(0).add({id: 'TextFieldLink2', fieldLabel: 'Link', xtype:'textfield', dataIndex: 'Link'});" />
</Listeners>
</ext:EventEditWindow>
</form>
</body>
</html>