[CLOSED] Calendar Event Custom back ground and fore ground without using Calendar Id

  1. #1

    [CLOSED] Calendar Event Custom back ground and fore ground without using Calendar Id

    Hi Team,

    I just wonder if you could provide me the help on applying my own custom css, especially "back ground" and "fore" colors to event displayed on the calendar without using CalendarId and CSS with the specific calendar id as in your example below.

    These colors would come from data base which would be set by user in other screens.

    <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>
    Thanks in advance

    Regards
    Last edited by Daniil; Apr 15, 2011 at 12:07 PM. Reason: Marked as [CLOSED]. Review in future.
  2. #2
    Hi,

    Please use .registerCssClass() of Ext.net.ResourceMgr to add these css classes dynamically.
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi,

    Please use .registerCssClass() of Ext.net.ResourceMgr to add these css classes dynamically.
    Hi,

    Yes this solves only half of my problem.

    Let me try to explain our scenario.

    We are maintaining Events Table as well as Event Header Table (which resembles Calendar Groups in this case). Till here we have no problem.

    1. We have in our system Leave Type data associated with Back Color and Fore Color and leave types can be created by user and he can associate them with different color coding of his / her choice.
    a) We are showing all the leaves (leave Requests) applied against to this leave type as events in one of third party calendar. While displaying them on the calendar we are applying Back Color and fore Color properties which are given for each of the events it supports.
    b) So, While using our calendar, the "Back Color" and "Fore Color" are not specific to Calendar Group (Header), rather than a sub class like Leave Type in our case.
    2. Similarly we have project tracking module, where each project is associated with again "back Color" and "Fore Color", all the tasks / time sheet entries posted against to each project would be displayed in the specified project color. So, as many no. of project the user created, those many no. of color combination exists.

    As a summary we have a sub class (Leave Type, Project and so on) for "Calendar Groups" where this Css to be applied, which not based on Calendar Id.

    So, while showing each event on calendar we need a granular control to set Fore Color and Back Color Properties irrespective of Group CSS.

    I think this scenario make sense now.

    Any kind of help is appreciated.

    Regards.
  4. #4
    As far as we can understand you need to customize event's view in according to some event's field and this field is not CalendarID, right?

    Unfortunately, the Calendar doesn't provide us with a something like GridPanel's renderer for columns.

    We could suggest you to define some CalendarID basing on the some field that you want to use to customize event's view.

    Please note that you can define as many CalendarID as you wish.
  5. #5
    Hi Team,

    I trying to solve the problem as follows.

    
    applyCustomStyles : function(view)
            {
                debugger;
                var curView = view || KolmeRoster.cpRoster.getActiveView();
                //Get elements by their css
                var evtElements = Ext.select('.ext-cal-evt', true);
                if (evtElements)
                {
                    //Loop through all elements
                    Ext.each(evtElements.elements, function(eachEl) {
                        //Get EventId from from elment
                        var evtId = curView.getEventIdFromEl(eachEl);
                        if (!Ext.isEmpty(evtId))
                        {
                            //Get Record by evntId
                            var evtRec = KolmeRoster.esRoster.getById(evtId);
                            if (evtRec)
                            {
                                var data = evtRec.data;
                                if (data)
                                {
                                    alert(data.ForeColor);
                                    alert(data.BackColor);
                                    eachEl.applyStyles('background:' + data.BackColor + ";color:' + data.ForeColor;
                                    //TODO: Apply back ground and fore ground color to element using applyStyles method.
                                }
                            }
                        }
                    }, this);
                }
            }
    Calling this function in Calendar Panel's listeners such as "Render", "AfterRender", "AfterLayout" and "ViewChange" not returning the events, with Ext.select
    And even from Ext.onReady.

    But once complete page rendering is done, during showing a custom event window (in dayClick or eventClick), calling this function able to retrieve the elements from dom.

    Any help is appreciated.

    Regards,
  6. #6
    Hi Team,

    It is working now.

    if (evtRec){
       //Error Code : var data = evtRec.items[0].data;
    
       var data = evtRec.data;  //Corrected even in the previous post.
    
          if (data)
    ......
    But I request you and your team to implement a Event - "eventElementRendered" with "DOM element" created and "data of the event" as parameters.
    I think the Java Script files to be changed are :
    1. WeekEventRenderer.js - render(o).
    2. DayBodyView.js - renderItems()

    You can do a better job than me.

    Regards,
  7. #7
    Quote Originally Posted by vedagopal2004 View Post
    But I request you and your team to implement a Event - "eventElementRendered" with "DOM element" created and "data of the event" as parameters.
    We are considering your request.
  8. #8
    Hi Team,

    Any update on this please?

    Regards,
  9. #9
    Quote Originally Posted by vedagopal2004 View Post
    Hi Team,

    Any update on this please?

    Regards,
    At the moment this functionality is not included with the <ext:Calendar> and unfortunately we currently do not have the resources available to devote to its implementation.

    We can make a note of the feature request and possibly implement in a future release.

    Another option you could explore is overriding the currently functionality of the client-side classes by writing a Plugin, UX extension, or just a simple .override might work. You would just have to experiment with the best route.
    Geoffrey McGill
    Founder
  10. #10
    Quote Originally Posted by geoffrey.mcgill View Post
    We can make a note of the feature request and possibly implement in a future release.
    The note has been made:
    https://extnet.lighthouseapp.com/pro...res/tickets/82

Similar Threads

  1. [CLOSED] Edit Event to Calendar
    By Pablo_Azevedo in forum 1.x Legacy Premium Help
    Replies: 10
    Last Post: Apr 19, 2013, 5:35 AM
  2. [CLOSED] Calendar Add Event is not working in IE 9.0 browser
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: May 24, 2012, 8:04 AM
  3. Custom button in calendar panel
    By Rupesh in forum 1.x Help
    Replies: 0
    Last Post: Mar 23, 2012, 9:03 AM
  4. Replies: 0
    Last Post: Jan 13, 2012, 2:33 PM
  5. Calendar - Change edit event template
    By craig2005 in forum 1.x Help
    Replies: 12
    Last Post: Jan 30, 2011, 6:56 PM

Posting Permissions