PDA

View Full Version : [CLOSED] Problem with events window with custom colors in calendar view



mohan.bizbites
Sep 08, 2013, 11:38 AM
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
========



<%@ 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:#{CalendarPanelExamp le},ForeColorProp:'ForeColor',BackColorProp:'BackC olor', 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(ev ents);
// 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 information
Thank you
Mohan

Daniil
Sep 09, 2013, 12:03 PM
Hi Mohan,

A "+ ... more" Window renders new HTML elements which you do not apply your custom styles on.

Do you not want to stylize events as demonstrated here?
http://examples2.ext.net/#/Calendar/Overview/Basic/

Please see the <style> block.