Sep 08, 2013, 11:38 AM
[CLOSED] Problem with events window with custom colors in calendar view
Hi team,
I am working on calender view with custom colors, while developing the calender View I have more events in a day.
In that some of the events are displaying and some of the events are showing like +4 more in that day.
When click the +4more it will display the window without colors. When i give the calnderId's it is displaying events with default colors but not custom colors.
I have to display the data with respective colors.
How can we show custom colors in that window?
Please look in to this why its happening.
see below code:
source code
========
===========
Thank you
Mohan
I am working on calender view with custom colors, while developing the calender View I have more events in a day.
In that some of the events are displaying and some of the events are showing like +4 more in that day.
When click the +4more it will display the window without colors. When i give the calnderId's it is displaying events with default colors but not custom colors.
I have to display the data with respective colors.
How can we show custom colors in that window?
Please look in to this why its happening.
see below code:
source code
========
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Calander.aspx.cs" Inherits="Cresent.WorkSafeExt.ConflictManager.Calander" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
var ChangeEventsStyle = function (config) {
var curViewBody = config.View;
var curViewHeader;
var viewtype = curViewBody.xtype;
var evtElements = curViewBody.el.select('.ext-cal-evt', true);
if (evtElements) {
Ext.each(evtElements.elements, function (eachEl) {
var evtId = curViewBody.getEventIdFromEl(eachEl);
if (!Ext.isEmpty(evtId)) {
var evtRec = config.calendarEl.eventStore.data.getByKey(evtId)
if (evtRec) {
var data = evtRec.raw;
if (data) {
debugger;
eachEl.style.backgroundColor = data.BackColor;
eachEl.style.color = data.ForeColor;
// eachEl.applyStyles('background:' + data[config.loc] + ';');
//eachEl.applyStyles('background:' + data[config.BackColorProp] + ';color:' + data[config.ForeColorProp] + ';');
//eachEl.runtimeStyle.backgroundColor = data.BackColor;
// eachEl.runtimeStyle.color = data.ForeColor;
//eachEl.runtimeStyle('background:' + data.BackColor + ';color:' + data.ForeColor + ';');
eachEl.innerHTML = "<div>" + data.title + "</div>";
if (data.Status == 'ADHOC') {
// eachEl.style.backgroundColor = data.BackColor;
// eachEl.style.color = data.ForeColor;
// eachEl.applyStyles('background:' + data.BackColor + ';color:' + data.ForeColor + ';');
// eachEl.applyStyles('background:' + data[config.BackColorProp] + ';color:' + data[config.ForeColorProp] + ';');
}
}
}
var tooltip_evtid = new Ext.ToolTip({ target: eachEl, autoHide: true, showDelay: 50, hideDelay: 50, dismissDelay: 5000, width: 350, trackMouse: true, title: data.title });
if (Ext.getBody()) {
Ext.DomHelper.append(Ext.getBody(), tooltip_evtid);
}
}
}
);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server"></ext:ResourceManager>
<ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
<Items>
<ext:Panel
ID="Panel2"
runat="server"
Title="..."
Layout="Border" Height="800" Width="900" Border="false"
Region="Center"
Cls="app-center">
<Items>
<ext:CalendarPanel
ID="CalendarPanelExample"
runat="server"
Region="Center" Height="600"
ActiveIndex="2"
Border="false">
<EventStore ID="EventSore" runat="server" GroupField="StartDate">
<Fields>
<ext:ModelField Name="EventId" Type="Int">
</ext:ModelField>
<ext:ModelField Name="CalenderId" Type="Int">
</ext:ModelField>
<ext:ModelField Name="StartDate" Type="Date" DateFormat="M$">
</ext:ModelField>
<ext:ModelField Name="EndDate" Type="Date" DateFormat="M$">
</ext:ModelField>
<ext:ModelField Name="IsAllDay" Type="Boolean">
</ext:ModelField>
<ext:ModelField Name="Location" Type="String">
</ext:ModelField>
<ext:ModelField Name="Status" Type="String">
</ext:ModelField>
<ext:ModelField Name="StatusTypeId" Type="Int">
</ext:ModelField>
<ext:ModelField Name="Title" Type="String">
</ext:ModelField>
<ext:ModelField Name="BackColor" Type="String">
</ext:ModelField>
<ext:ModelField Name="ForeColor" Type="String">
</ext:ModelField>
</Fields>
</EventStore>
<MonthView ID="MonthView1"
runat="server"
ShowHeader="true"
ShowWeekLinks="true"
ShowWeekNumbers="true" />
<Listeners>
<EventsRendered Delay="5" Handler="
ChangeEventsStyle({calendarEl:#{CalendarPanelExample},ForeColorProp:'ForeColor',BackColorProp:'BackColor', View:item});
App.Viewport1.el.unmask;
" />
<%--<EventClick Handler="debugger;#{DirectMethods}.calEventClick(record.raw.EventID);"></EventClick>--%>
</Listeners>
</ext:CalendarPanel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
CodeBehind Code===========
using System;
using System.Collections.Generic;
using System.Drawing;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ext.Net;
namespace Cresent.WorkSafeExt.ConflictManager
{
public partial class Calander : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
DisplayPermits();
}
public void DisplayPermits()
{
List<EventModel> events = new List<EventModel>();
//CustomResourceList resources = new CustomResourceList();
for (int i = 0; i < 10;i++ )
{
CustomEvent customEvent = new CustomEvent();
customEvent.EventId = i;
customEvent.StartDate = DateTime.Now ;
customEvent.EndDate = DateTime.Now.AddDays(i);
customEvent.IsAllDay = false;
customEvent.Title = "TitleNO:" + i;
//customEvent.CalendarId = 1;
// This is a hack and needs to be revisited as
// the statusType is set incorrectly when moving from the submitted -> approved stage
// because of an incorrect button click event in ButtonBarForPTW.ascx.
switch (i)
{
case 1:
customEvent.BackColor = Color.Black;
break;
case 2:
customEvent.BackColor = Color.AliceBlue;
break;
case 3:
customEvent.BackColor = Color.BlanchedAlmond;
break;
case 4:
customEvent.BackColor = Color.Yellow;
break;
case 5:
customEvent.BackColor = Color.DarkSeaGreen;
break;
case 6:
customEvent.BackColor = Color.ForestGreen;
break;
case 8:
customEvent.BackColor = Color.SlateGray;
break;
case 9:
customEvent.BackColor = Color.Gray;
break;
case 10:
customEvent.BackColor = Color.Goldenrod;
break;
case 7:
customEvent.BackColor = Color.Yellow;
break;
}
customEvent.ForeColor = Color.Red;
Ext.Net.EventModel myEvnt = (Ext.Net.EventModel)customEvent;
events.Add(myEvnt);
}
CalendarPanelExample.EventStore.Events.AddRange(events);
// CalendarPanel1.EventStore.DataBind();
CalendarPanelExample.Render();
}
}
public class CustomEvent:EventModel
{
public Color BackColor
{
get;
set;
}
public Color ForeColor
{
get;
set;
}
}
}
Please contact if you need more informationThank you
Mohan
Last edited by Daniil; Sep 17, 2013 at 5:25 AM.
Reason: [CLOSED]