[CLOSED] displaying multiple events vertically in Ext.CalendarPanel

[Fahd]

Hello,
Currently if there are multiple events for the same date and time, all the events are display horizontally.
Can you please show me how to display all the events vertically? Please see my screenshots below:



currently, all the events look like this:


Below is my code:
ASPX:

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="Ext" %>
<%@ Import Namespace="Ext.Net.Calendar.Demo" %>

<script type="text/javascript">

    var CompanyX = {
        getCalendar: function () {
            return CompanyX.CalendarPanel1;
        },

        getStore: function () {
            return CompanyX.EventStore1;
        },

        getWindow: function () {
            return CompanyX.EventWindow1;
        },

        viewChange: function (p, vw, dateInfo) {
            var win = this.getWindow();

            if (win) {
                win.hide();
            }

            if (dateInfo) {
                // will be null when switching to the event edit form, so ignore
                this.DatePicker1.setValue(dateInfo.activeDate);
                this.updateTitle(dateInfo.viewStart, dateInfo.viewEnd);
            }
        },

        updateTitle: function (startDt, endDt) {
            var msg = '',
            fmt = Ext.Date.format;

            if (Ext.Date.clearTime(startDt).getTime() == Ext.Date.clearTime(endDt).getTime()) {
                msg = fmt(startDt, 'F j, Y');
            } else if (startDt.getFullYear() == endDt.getFullYear()) {
                if (startDt.getMonth() == endDt.getMonth()) {
                    msg = fmt(startDt, 'F j') + ' - ' + fmt(endDt, 'j, Y');
                } else {
                    msg = fmt(startDt, 'F j') + ' - ' + fmt(endDt, 'F j, Y');
                }
            } else {
                msg = fmt(startDt, 'F j, Y') + ' - ' + fmt(endDt, '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: {
            addFromEventDetailsForm: function (win, rec) {
                CompanyX.ShowMsg('Event ' + rec.data.Title + ' was added');
            },

            add: function (win, rec) {
                win.hide();
                CompanyX.getStore().add(rec);
                CompanyX.getStore().sync();
                CompanyX.ShowMsg('Event ' + rec.data.Title + ' was added');
                CompanyX.AddCalEvent('added new entry in calender');
            },

            updateFromEventDetailsForm: function (win, rec) {
                CompanyX.ShowMsg('Event ' + rec.data.Title + ' was updated');
            },

            update: function (win, rec) {
                win.hide();
                rec.commit();
                CompanyX.getStore().sync();
                CompanyX.ShowMsg('Event ' + rec.data.Title + ' was updated');
                CompanyX.UpdateCalEvent('updated an event in calendar');
            },

            removeFromEventDetailsForm: function (win, rec) {
                CompanyX.ShowMsg('Event ' + rec.data.Title + ' was deleted');
            },

            remove: function (win, rec) {
                CompanyX.getStore().remove(rec);
                CompanyX.getStore().sync();
                win.hide();
                CompanyX.ShowMsg('Event ' + rec.data.Title + ' was deleted');
                CompanyX.DeleteCalEvent('deleted an event in Calendar');
            },

            edit: function (win, rec) {
                win.hide();
                rec.commit();
                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 ' + Ext.Date.format(rec.data.StartDate, '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({
                    mappings: false
                });
            }
        }
    };
  
</script>
<script runat="server">
    protected void Page_Init(object sender, EventArgs e)
    {
        this.CalendarPanel1.EventStore = new EventStore { ID = "EventStore1" };
        this.CalendarPanel1.EventStore.SubmitData += EventStore_SubmitData;
        this.CalendarPanel1.EventStore.Listeners.BeforeSync.Handler = 
            @"Ext.Msg.alert('Sync', 'The EventStore initiates a sync request after that action. The EventStore synchronization is not implemented in that example.');
              this.commitChanges();
              return false;";
    }

    void EventStore_SubmitData(object sender, StoreSubmitDataEventArgs e)
    {
        List<EventModel> events = e.Object<EventModel>();
        ((EventsViewer)this.Page.LoadControl("../UserControls/EventsViewer.ascx")).Render(events);
    }
    
    protected void Page_Load(object sender, EventArgs e)
    {            
        if (!X.IsAjaxRequest)
        {
            this.CalendarPanel1.EventStore.Events.AddRange(Data.CalEvents);      //Add you own data from database      
        }
    }

    [DirectMethod(Namespace = "CompanyX")]
    public void ShowMsg(string msg)
    {
        X.Msg.Notify("Message", msg).Show();
    }

   
    
</script>
    
<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
    <title>Calendar - Ext.NET Examples</title>    
    <link rel="stylesheet" href="../resources/css/main.css" />        

    
    <style type="text/css">
        .ext-color-4,
        .ext-ie .ext-color-4-ad,
        .ext-opera .ext-color-4-ad {
            color: #7F0000;
        }
        .ext-cal-day-col .ext-color-4,
        .ext-dd-drag-proxy .ext-color-4,
        .ext-color-4-ad,
        .ext-color-4-ad .ext-cal-evm,
        .ext-color-4 .ext-cal-picker-icon,
        .ext-color-4-x dl,
        .ext-color-4-x .ext-cal-evb {
            background: #7F0000;
        }
        .ext-color-4-x .ext-cal-evb,
        .ext-color-4-x dl {
            border-color: #7C3939;
        }
    </style>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" Namespace="CompanyX" />
        
        <ext:Viewport ID="Viewport1" runat="server" Layout="Border">
            <Items>
                <ext:Panel ID="Panel1" 
                    runat="server" 
                    Height="35" 
                    Border="false" 
                    Region="North" 
                    Cls="app-header" 
                    BodyCls="app-header-content">
                    <Content>
                        <div id="app-logo">
                            <div class="logo-top">&nbsp;</div>
                            <div id="logo-body">&nbsp;</div>
                            <div class="logo-bottom">&nbsp;</div>
                        </div>
                        <h1>My Calendar</h1>
                        <span id="app-msg" class="x-hidden"></span>
                    </Content>
                </ext:Panel>
                
                <ext:Panel 
                    ID="Panel2" 
                    runat="server" 
                    Title="..." 
                    Layout="Border" 
                    Region="Center" 
                    Cls="app-center">
                    <Items>
                        <ext:Panel ID="Panel3" 
                            runat="server" 
                            Width="213"
                            Region="West" 
                            Border="false"
                            Cls="app-west">
                            <Items>
                                <ext:DatePicker 
                                    ID="DatePicker1" 
                                    runat="server" 
                                    Cls="ext-cal-nav-picker">
                                    <Listeners>
                                        <Select Fn="CompanyX.setStartDate" Scope="CompanyX" />
                                    </Listeners>
                                </ext:DatePicker>
                            </Items>
                            <TopBar>
                                <ext:Toolbar ID="Toolbar1" runat="server">
                                    <Items>
                                        <ext:Button ID="Button1" 
                                            runat="server" 
                                            Text="Save All Events" 
                                            Icon="Disk" 
                                            Handler="CompanyX.record.saveAll" 
                                            />
                                    </Items>
                                </ext:Toolbar>
                            </TopBar>
                        </ext:Panel>
                        
                        <ext:CalendarPanel
                            ID="CalendarPanel1" 
                            runat="server"
                            Region="Center"
                            ActiveIndex="1"
                            Border="false" ShowDayView="false" ShowMonthView="false" >
                            <CalendarStore ID="CalendarStore1" runat="server">
                                <Calendars>
                                    <ext:CalendarModel CalendarId="1" Title="Home" />
                                    <ext:CalendarModel CalendarId="2" Title="Work" />
                                    <ext:CalendarModel CalendarId="3" Title="School" />
                                    <ext:CalendarModel CalendarId="4" Title="Other" />
                                </Calendars>
                            </CalendarStore>
                            <WeekView ID="weekviewCloseSchedule" runat="server" ShowTime="true">
                            
                            </WeekView>
                         <%--   <MonthView ID="MonthView1" 
                                runat="server" 
                                ShowHeader="true" 
                                ShowWeekLinks="true" 
                                ShowWeekNumbers="true" 
                                />  --%>
                            <Listeners>
                                <ViewChange  Fn="CompanyX.viewChange" Scope="CompanyX" />
                                <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" />

                                <EventAdd    Fn="CompanyX.record.addFromEventDetailsForm" Scope="CompanyX" />
                                <EventUpdate Fn="CompanyX.record.updateFromEventDetailsForm" Scope="CompanyX" />
                                <EventDelete Fn="CompanyX.record.removeFromEventDetailsForm" Scope="CompanyX" />
                            </Listeners>
                        </ext:CalendarPanel>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>
        
        <ext:EventWindow 
            ID="EventWindow1" 
            runat="server"
            Hidden="true"
            CalendarStoreID="CalendarStore1">
            <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:EventWindow>
    </form>
</body>
</html>

Data.CS

using System;

namespace Ext.Net.Calendar.Demo
{
    public class Data
    {
        public static EventModelCollection CalEvents
        {
            get
            {
                return GetCalendarEvents();
            }
        }

        public static EventModelCollection GetCalendarEvents()
        {
           // DateTime now = DateTime.Now.Date;
            string sDate = "04/07/2015 13:30:00";
            DateTime dt = Convert.ToDateTime(sDate);
           
            EventModelCollection eventModelCollection = new EventModelCollection();
            EventModel eventModel = new EventModel();
            eventModel.EventId = 1001; //tCalendarEvent.EventID
            eventModel.CalendarId = 1; //tCalendar.CalendarID
            eventModel.Title = "Entity1 Report1";
            eventModel.StartDate = dt;
            eventModel.EndDate = dt;
            eventModel.IsAllDay = false;
            eventModel.Notes = "First calendar Event";

            eventModelCollection.Add(eventModel);


            //event 2

            string sDate2 = "04/07/2015 13:30:00";
            DateTime dt2 = Convert.ToDateTime(sDate2);

            string eDate2 = "04/07/2015 13:45:00";
            DateTime edt2 = Convert.ToDateTime(eDate2);
  
            EventModel eventModel2 = new EventModel();
            eventModel2.EventId = 1002; //tCalendarEvent.EventID
            eventModel2.CalendarId = 1; //tCalendar.CalendarID
            eventModel2.Title = "Entity2 Report1";
            eventModel2.StartDate = dt2;
            eventModel2.EndDate = edt2;
            eventModel2.IsAllDay = false;
            eventModel2.Notes = "2nd calendar Event";

            eventModelCollection.Add(eventModel2);


            ////event 3

            string sDate3 = "04/07/2015 13:30:00";
            DateTime dt3 = Convert.ToDateTime(sDate3);

            string eDate3 = "04/07/2015 13:45:00";
            DateTime edt3 = Convert.ToDateTime(eDate3);

            EventModel eventModel3 = new EventModel();
            eventModel3.EventId = 1003;
            eventModel3.CalendarId = 1;
            eventModel3.Title = "Entity3 Report1";
            eventModel3.StartDate = dt3;
            eventModel3.EndDate = edt3;
            eventModel3.IsAllDay = false;
            eventModel3.Notes = "3rd calendar Event";

            eventModelCollection.Add(eventModel3);

            ////event 4

            string sDate4 = "04/07/2015 13:30:00";
            DateTime dt4 = Convert.ToDateTime(sDate4);

            string eDate4 = "04/07/2015 13:45:00";
            DateTime edt4 = Convert.ToDateTime(eDate4);

            EventModel eventModel4 = new EventModel();
            eventModel4.EventId = 1004;
            eventModel4.CalendarId = 1;
            eventModel4.Title = "Entity4 Report1";
            eventModel4.StartDate = dt4;
            eventModel4.EndDate = edt4;
            eventModel4.IsAllDay = false;
            eventModel4.Notes = "4rd calendar Event";

            eventModelCollection.Add(eventModel4);


            return eventModelCollection;

        }
    }
}

Thank you very much in advance for your help!

[Daniil]

Hi Fahd,

Unfortunately, there is no a built-in API setting to achieve that.

Moreover, the requirement sounds quite simple, but after some investigation I see that it might be quite challenging to implement.

Also do you need to extend the row's height? In your test case the events goes to the "1:30" row. If put events each under other, do you want auto-increasing height for the "1:30" row? If yes, then it is really going to be problematic, because those event boxes are absolutely positioned and they won't increase the row height automatically. If attempt to adjust the height manually, it might end to a broken layout of the entire view.

If you are OK if events overlaps with other rows (2pm one and next), then it should be easier to implement (but still challenging).

Anyways, you can start with investigating the renderItems method here:
http://svn.ext.net/premium/trunk/Ext...iew/DayBody.js

As far as I can see the events rendering and positioning logic is there.