What's New?

[CLOSED] Adding a tooltip to calendar Events inside a month-details-panel

  1. #1
    Mar 15, 2013, 3:37 PM

    [CLOSED] Adding a tooltip to calendar Events inside a month-details-panel

    Hi,

    I successfully managed to add a tooltip on my calendar events by following the example given in http://forums.ext.net/showthread.php...for-the-Events. Here's the code:

    <%@ Page Language="C#" %>
  
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.Net Example</title>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" Namespace="CompanyX" />
    <ext:Viewport runat="server" Layout="fit">
        <Items>
            <ext:CalendarPanel ID="CalendarPanel1" runat="server">
                <EventStore runat="server">
                    <Events>
                        <ext:Event  
                            EventId="0"  
                            Title="My event 1"  
                            StartDate="2011/5/15"  
                            EndDate="2011/5/18"  
                            CalendarId="1" />
                        <ext:Event  
                            EventId="1"  
                            Title="My event 2"  
                            StartDate="2011/5/15"  
                            EndDate="2011/5/15"  
                            CalendarId="2" />
                        <ext:Event  
                            EventId="2"     
                            Title="A"  
                            StartDate="2011/5/15"  
                            EndDate="2011/5/15"  
                            CalendarId="2" />
                        <ext:Event  
                            EventId="3"     
                            Title="B"  
                            StartDate="2011/5/15"  
                            EndDate="2011/5/15"  
                            CalendarId="2" />
                    </Events>
                </EventStore>
            </ext:CalendarPanel>
        </Items>
    </ext:Viewport>
    <ext:ToolTip
        runat="server"
        Target="={#{CalendarPanel1}.body}"
        Delegate=".ext-cal-evt"
        Calendar="={#{CalendarPanel1}}">
        <Listeners>
            <Show Handler="var reg = /[a-z\ ]?CalendarPanel1\-[a-z\-]+\-evt\-(\d+)/,
                               cls = Ext.fly(this.triggerElement).dom.className,
                               eventId = reg.exec(cls)[1],
                               recordIndex = this.calendar.eventStore.find('EventId', parseInt(eventId)),
                               eventData = this.calendar.eventStore.getAt(recordIndex).data;
                           this.body.dom.innerHTML = Ext.encode(eventData.Title);" />
        </Listeners>
    </ext:ToolTip>
    </form>
</body>
</html>
    Now I would also like to add the same tooltip on each event of the list that shows up whenever I click the "+X more..." label in the MonthView on any day that has more than two events (such as 2011/5/15 in the above example). Is it possible?

    Thank you.
    Last edited by Daniil; Mar 26, 2013 at 4:14 AM. Reason: [CLOSED]
  2. #2
    Mar 16, 2013, 2:46 AM
    Hello!

    Try this one:

    <%@ Page Language="C#" %>
   
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.Net Example</title>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" Namespace="CompanyX" />
    <ext:Viewport runat="server" Layout="fit">
        <Items>
            <ext:CalendarPanel ID="CalendarPanel1" runat="server">
                <EventStore runat="server">
                    <Events>
                        <ext:Event 
                            EventId="0" 
                            Title="My event 1" 
                            StartDate="2013/3/14" 
                            EndDate="2013/3/15" 
                            CalendarId="1" />
                        <ext:Event 
                            EventId="1" 
                            Title="My event 2" 
                            StartDate="2013/3/15" 
                            EndDate="2013/3/16" 
                            CalendarId="2" />
                        <ext:Event 
                            EventId="2"    
                            Title="A" 
                            StartDate="2013/3/15" 
                            EndDate="2013/3/15" 
                            CalendarId="2" />
                        <ext:Event 
                            EventId="3"    
                            Title="B" 
                            StartDate="2013/3/15" 
                            EndDate="2013/3/15" 
                            CalendarId="2" />
                        <ext:Event 
                            EventId="4"    
                            Title="C" 
                            StartDate="2013/3/15" 
                            EndDate="2013/3/15" 
                            CalendarId="2" />
                    </Events>
                </EventStore>
            </ext:CalendarPanel>
        </Items>
    </ext:Viewport>
    <ext:ToolTip
        runat="server"
        Target="={#{CalendarPanel1}.body}"
        Delegate=".ext-cal-evt"
        Calendar="={#{CalendarPanel1}}">
        <Listeners>
            <Show Handler="
                var reg = /[a-z\ ]?CalendarPanel1\-[a-z\-]+\-evt\-(\d+)/,
                    cls = Ext.fly(this.triggerElement).dom.className,
                    eventId = reg.exec(cls)[1],
                    recordIndex = this.calendar.eventStore.find('EventId', parseInt(eventId)),
                    eventData = this.calendar.eventStore.getAt(recordIndex).data;
                this.body.dom.innerHTML = Ext.encode(eventData.Title);" />
        </Listeners>
    </ext:ToolTip>
    <ext:ToolTip
        runat="server"
        Target="={#{CalendarPanel1}.body}"
        Delegate=".ext-cal-ev-more"
        Calendar="={#{CalendarPanel1}}">
        <Listeners>
            <Show Handler="
            var reg = /ext-cal-ev-more-(\d+)/,
                cls = Ext.fly(this.triggerElement).dom.id,
                eventDate = Date.parseDate(reg.exec(cls)[1], 'Ymd'),
                calendar = this.calendar,
                text = [];
            this.calendar.eventStore.filterBy(function(item) { 
                console.log(item.data.StartData); 
                console.log(item.data.EndDate);
                if (eventDate.between(item.data.StartDate, item.data.EndDate)) {
                    text.push(item.data.Title);
                    return true
                } else {
                    return false;
                }
            }, this);
            this.body.dom.innerHTML = text.join('<br />');" />
        </Listeners>
    </ext:ToolTip>
    </form>
</body>
</html>
  3. #3
    Mar 18, 2013, 9:51 AM
    Thank you, but I think there was a misunderstanding.

    I didn't mean to place the tooltip on the "+X more..." label. I'd like to place a tooltip ON EACH EVENT that shows up AFTER I click the "+X more..." label...
  4. #4
    Mar 18, 2013, 11:56 AM
    Hello,

    To start I would try to find a place where those events I rendered. For that I would search for "more" in the Calendar's sources.
    <Ext.NET v1 sources>\Ext.Net\Build\Ext.Net\ux\extensions\calendar\calendar-all-debug.js

Similar Threads

  1. [1.2] Change the color of a Day in calendar panel month view
    By labrego in forum 1.x Help
    Replies: 5
    Last Post: Jul 12, 2016, 2:28 AM
  2. [CLOSED] Cropped Calendar month details panel
    By ppqrnd in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 05, 2012, 5:37 AM
  3. [1.1] How to remove month names in calendar panel
    By labrego in forum 1.x Help
    Replies: 4
    Last Post: Feb 09, 2012, 4:04 PM
  4. [CLOSED] Calendar Panel Month View Problem, My Code and Ext .Net Examples Code
    By rbarr in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 07, 2011, 8:34 PM
  5. [CLOSED] Calendar - Events missing due to 6 startup ajax calls asking for events on separate dates
    By craig2005 in forum 1.x Legacy Premium Help
    Replies: 15
    Last Post: Feb 03, 2011, 1:27 PM

Posting Permissions