[CLOSED] Edit Event to Calendar

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Edit Event to Calendar

    How can i personalize the "Edit Event" window? How to do if i want, for example to add more fields to this window to add more information the the event?
    Last edited by Daniil; Jun 27, 2011 at 12:47 PM. Reason: [CLOSED]
  2. #2
  3. #3
    Could you provide a simple example doing the following:

    - Adding custom fields to the window that is shown when you click an event in the calendar.
    - Adding custom fields to the window that is shown when you click "Edit Details..." in the previous window.
    - Posting it all back and reading on the server (including the custom fields values).

    And another one with the following:

    - Creating a read-only calendar.

    I guess such an example would be helpfull. The one in the SVN is a little fragmented and hard to catch some points... Thanks in advance.
  4. #4
    I guess such an example would be helpfull. The one in the SVN is a little fragmented and hard to catch some points...
    Well, we don't provide such examples, because it's not a standard mode of calendar using.

    But we understand that the behaviors you described can be required in real applications.

    So, the examples which are presented in the threads I referred should suite your needs.

    Did you investigate them?

    Quote Originally Posted by Pablo Azevedo View Post
    - Adding custom fields to the window that is shown when you click an event in the calendar.
    - Adding custom fields to the window that is shown when you click "Edit Details..." in the previous window.
    - Posting it all back and reading on the server (including the custom fields values).
    Well, here is a not bad example which, I think, will help you to start.
    http://forums.ext.net/showthread.php...ll=1#post49893

    Quote Originally Posted by Pablo Azevedo View Post
    - Creating a read-only calendar.
    Here you are.
    http://forums.ext.net/showthread.php...ll=1#post57507
  5. #5
    Yes, i investigated them... and tried to apply the concepts to the examples in the svn. but i'm having a hard time figuring out how to get the values from the customized fields.
  6. #6
    Well, I discovered that overriding EventRecord.js is also required to get it working further (not fully tested).

    Example Page
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <script runat="server">
        class MyEvent : Event
        {
            public string Test1 { get; set; }
            public string Test2 { get; set; }
        }
         
        protected void Page_Load(object sender, EventArgs e)
        {
            this.CalendarPanel1.EventStore.AddStandardFields();
            this.CalendarPanel1.EventStore.Reader[0].Fields.Add(new RecordField("Test1"));
            this.CalendarPanel1.EventStore.Reader[0].Fields.Add(new RecordField("Test2"));
     
     
            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,
                        Test1 = "I'm first",
                        Test2 = "I'm second"
                    }
                };
                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 runat="server">
        <title>Ext.Net Example</title>
        
        <ext:ResourcePlaceHolder runat="server" />
        
        <script type="text/javascript" src="/Resources/js/MyEventRecord.js"></script>
     
        <script type="text/javascript">
            var CompanyX = {
                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);
                        CompanyX.ShowMsg('Event ' + rec.data.Title + ' was added');
                    },
     
                    update: function(win, rec) {
                        win.hide();
                        rec.commit();
                        CompanyX.ShowMsg('Event ' + rec.data.Title + ' was updated');
                    },
     
                    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 runat="server">
        <ext:ResourceManager runat="server" Namespace="CompanyX" />
        <ext:Viewport runat="server" Layout="fit">
            <Items>
                <ext:CalendarPanel ID="CalendarPanel1" runat="server" Height="500">
                    <EventStore 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" />
                        <BeforeRender Handler=" var form = this.get(this.id + '-edit');
                                                form.get('left-col').add({id: 'TextField1', fieldLabel: 'LEFT', xtype:'textfield', dataIndex: 'Test1'});
                                                form.get('right-col').add({id: 'TextField2', fieldLabel: 'RIGHT', xtype:'textfield', dataIndex: 'Test2'});" />
                    </Listeners>
                    <Buttons>
                        <ext:Button 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" />
                <EditDetails Fn="CompanyX.record.edit" Scope="CompanyX" />
                <EventDelete Fn="CompanyX.record.remove" Scope="CompanyX" />
            </Listeners>
        </ext:EventEditWindow>
        <ext:Window ID="WindowSubmit" runat="server" Hidden="true" Width="500" Height="500" />
        </form>
    </body>
    </html>
    MyEventRecord.js (just added two fields)
    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'
        },
        Test1: {
            name: 'Test1',
            mapping: 'Test1',
            type: 'string'
        },
        Test2: {
            name: 'Test2',
            mapping: 'Test2',
            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.Test1,
        M.Test2
        ]);
    
        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.Test1,
            M.Test2
            ]);
        };
    })();
  7. #7
    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
            ]);
        };
    })();
  8. #8
    Randomly? Please provide more details how to reproduce. Browser?

    At the quick look I have no wrong code, and can't reproduce the problem.
  9. #9
    Yes, randomly. After playing a while with the events (creating new ones, moving them, etc), all of a sudden, after you add or update an event for example the error occurs. I'm using IE9.
  10. #10
    I'm applying about 20-30 different actions - move, add, update, delete - but the issue doesn't appear.

    Please debug the code and post the method where the error happens, and the class name.
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] Customizing Edit Event Details Window of Calendar.
    By Suntico in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Apr 19, 2013, 5:34 AM
  2. [CLOSED] Calendar Add/Edit event When control backgroud color customization
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 07, 2012, 10:38 AM
  3. Calendar - Change edit event template
    By craig2005 in forum 1.x Help
    Replies: 12
    Last Post: Jan 30, 2011, 6:56 PM
  4. [CLOSED] Calendar Example for Details Edit
    By tjbishop in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jan 19, 2011, 3:42 AM
  5. [CLOSED] [1.0] Calendar - hide/disable buttons in event edit window
    By ljankowski in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 08, 2010, 12:21 PM

Tags for this Thread

Posting Permissions