zoukankan      html  css  js  c++  java
  • EXT.NET CalendarPanel(日历面板) 每个日期任务提示功能实现

    直接先上图

    <%@ 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 id="Head1" runat="server">
        <title>Ext.Net Example</title>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Viewport ID="Viewport1" runat="server" Layout="Border">
            <Items>
                <ext:Panel ID="Panel1" runat="server" Title=" " Layout="Border" Region="Center" Border="false"
                    Cls="app-center">
                    <Items>
                        <ext:CalendarPanel ID="CalendarPanel1" runat="server" Region="Center" ActiveIndex="2"
                            Border="false">
                            <EventStore ID="EventStore1" runat="server">
                                <Events>
                                    <ext:Event EventId="0" Title="My event 1" StartDate="2013/5/15" EndDate="2013/5/16"
                                        CalendarId="1" />
                                    <ext:Event EventId="1" Title="My event 2" StartDate="2013/5/21" EndDate="2013/5/22"
                                        CalendarId="2" />
                                </Events>
                            </EventStore>
                              <GroupStore ID="GroupStore1" runat="server">
                                <Groups>
                                    <ext:Group CalendarId="1" Title="Home" />
                                    <ext:Group CalendarId="2" Title="Work" />
                                    <ext:Group CalendarId="3" Title="School" />
                                    <ext:Group CalendarId="4" Title="Other" />
                                </Groups>
                            </GroupStore>
                              <MonthView ID="MonthView1" runat="server" ShowHeader="true" ShowWeekLinks="true"
                                ShowWeekNumbers="true" />
                        </ext:CalendarPanel>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>
        <ext:ToolTip ID="ToolTip1" runat="server" Target="={#{CalendarPanel1}.body}" Delegate=".ext-cal-evt"
            Calendar="={CalendarPanel1}">
            <Listeners>
                <Show Handler="var cls = Ext.fly(this.triggerElement).getAttribute('class'),
                                   clsWithId = cls.split(' ')[0];
                                   eventId = clsWithId.substr(clsWithId.indexOf('-evt-') + 5);
                                   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>
    

      

  • 相关阅读:
    程序员的希波克拉底誓言[精华]
    怎样成为优秀的软件模型设计者
    C#中Delegate浅析与思考
    程序员是一个美好的职业[精华]
    hdu 1421(搬寝室)
    hdu 4022(map一对多)
    hdu 1114(完全背包)
    hdu 1159(最长公共子序列)
    hdu 2844(多重背包)
    hdu 1257(最长递增子序列)
  • 原文地址:https://www.cnblogs.com/xchit/p/3105330.html
Copyright © 2011-2022 走看看