How can I configure the Ext.NET Calendar Control?

Question

I tried to configure the Ext.NET asp.net calendar control to view my own events but I don't have any idea how to do it? Also, Ext.NET Events class have their own fields but I need to put my own fields for to view on calendar control. ex: leaveId, leavetype, leaveReason, from, To, etc.

How can I achieve this? Any expert in ext.net framework please reply.

Answer 1

Configuring Ext.NET calendar is easily done, however it takes time to understand that the calendar only works if you give it the events wrapped in the EventCollection object provided by Ext.

Below is an example of a web service method to return events for the calendar.

[WebMethod]
public EventCollection GetEvents(DateTime start, DateTime end)
    {
        EventCollection results = new EventCollection();
        //....Fill the collection here.....
        return results;
    }

On the page you need something like this:

<ext:ResourceManager ID="ResourceManager1" runat="server" Theme="Gray" />
<ext:Viewport ID="Viewport1" runat="server" Layout="Border">
    <Items>
        <ext:Panel runat="server" Width="176" Region="West" Border="false">
            <Items>
                <ext:DatePicker ID="dtpCurrentDate" runat="server">
                    <Listeners>
                        <Select Fn="setStartDate" />
                        <BeforeRender Handler="this.showPrevMonth = this.showPrevMonth.createSequence(HighlightPostDates);this.showNextMonth = this.showNextMonth.createSequence(HighlightPostDates);this.onMonthClick = this.onMonthClick.createSequence(HighlightPostDates);" />
                    </Listeners>
                </ext:DatePicker>
            </Items>
        </ext:Panel>
        <ext:CalendarPanel runat="server" ID="pnlCalendar" Region="Center" >
        <MonthView runat="server"></MonthView>
        <WeekView runat="server"></WeekView>
        <DayView  runat="server"></DayView>
            <GroupStore runat="server" ID="storeGroups">
                <Groups>
                    <ext:Group CalendarId="1" Title="Event Type 1" />
                    <ext:Group CalendarId="2" Title="Event Type 2" />
                </Groups>
            </GroupStore>
            <EventStore ID="EventStore1" runat="server" DateFormat="M$" ShowWarningOnFailure="false">
                <Proxy>
                    <ext:HttpProxy Json="true" />
                </Proxy>
                <Reader>
                    <ext:JsonReader Root="d" />
                </Reader>
                <BaseParams>
                    <ext:Parameter Name="start" Value="" Mode="Value" />
                    <ext:Parameter Name="end" Value="" Mode="Value" />
                </BaseParams>
                <Listeners>
                    <Load Fn="HighlightPostDates" />
                </Listeners>
            </EventStore>
        </ext:CalendarPanel>
    </Items>
</ext:Viewport>

And at the code behind you connect both by doing:

((HttpProxy)this.pnlCalendar.EventStore.Proxy.Proxy).Url = "Method URL...";
            ((HttpProxy)this.pnlCalendar.EventStore.Proxy.Proxy).Method = HttpMethod.POST;