Apr 08, 2015, 8:15 PM
[CLOSED] displaying multiple events vertically in Ext.CalendarPanel
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:
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"> </div>
<div id="logo-body"> </div>
<div class="logo-bottom"> </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.CSusing 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!
Last edited by Daniil; Apr 17, 2015 at 4:57 PM.
Reason: [CLOSED]