[CLOSED] Problem with events window with custom colors in calendar view

  1. #1

    [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
    ========


    <%@ 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 information
    Thank you
    Mohan
    Last edited by Daniil; Sep 17, 2013 at 5:25 AM. Reason: [CLOSED]
  2. #2
    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?
    https://examples2.ext.net/#/Calendar/Overview/Basic/

    Please see the <style> block.

Similar Threads

  1. Calendar - custom EventEditForm and new events
    By Dimitris in forum 1.x Help
    Replies: 2
    Last Post: Oct 30, 2012, 6:13 PM
  2. [CLOSED] Custom Colors
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 14
    Last Post: Oct 10, 2012, 4:10 PM
  3. ColorPalette custom colors
    By cwolcott in forum 1.x Help
    Replies: 3
    Last Post: Jan 09, 2012, 10:15 AM
  4. [CLOSED] Is it possible to change default calendar colors?
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Sep 12, 2011, 5:56 PM
  5. Calendar in window - no events displayed
    By reiben in forum 1.x Help
    Replies: 4
    Last Post: May 04, 2011, 3:41 PM

Tags for this Thread

Posting Permissions