asp.net中为Calendar日历控件添加双击日期事件

白志勇

2023-12-01

最近一直在做日历控件，希望能直接在上面双击具体某一天就能弹窗添加事件，刚开始是想在网上找找人家做好的日历控件来用的，后面发现由于公司加密软件的原因，那些插件基本上都用不了，最后没法子了，只好自己来慢慢研究，花了一定时间，还是做出来了，当然肯定是很粗糙的，还有待改进。

1.CalendarDoubleClickTest.aspx

代码如下：

<head id="Head1" runat="server">
    <title></title>
<script type="text/javascript" src="Scripts/jQuery 2.0.3.js"></script>
<script type="text/javascript">

    var Test = {
        times: 0,
        timer: null,
        logs: [],

        first: null,
        last: null,



        do_dblclick: function () {
            var self = Test;

            clearTimeout(self.timer);
            self.logs.push('dblclick');
            self.echo();
        },

        start: function () {
            if (this.first == null) {
                this.first = new Date().getTime();
            }
        },

        end: function () {
            if (this.last == null) {
                this.last = new Date().getTime();
            }
        },

        get_time: function () {
            return (this.last - this.first) || 0;
        },

        echo: function () {
            var self = Test;
            self.end();
            var iWidth = 550; //模态窗口宽度   
            var iHeight = 450; //模态窗口高度   
            var iTop = (window.screen.height - iHeight) / 2;
            var iLeft = (window.screen.width - iWidth) / 2;
            
            window.open('CalendarSon.aspx', "Detail", "Scrollbars=yes,Toolbar=no,Location=no,Direction=no,Resizeable=no,   Width=" + iWidth + " ,Height=" + iHeight + ",top=" + iTop + ",left=" + iLeft)
            self.first = null;
            self.last = null;
            self.logs = [];
        },

        init: function () {
            $(document).ready(function () {
                $('#Calendar1').click(Test.do_click).dblclick(Test.do_dblclick);
            });
        }
    };

    Test.init();

</script>
</head>
<body>
<form runat="server">
    <div>
        <asp:Calendar ID="Calendar1" runat="server"
            onselectionchanged="Calendar1_SelectionChanged"></asp:Calendar>
    </div>
    </form>
</body>
</html>

CalendarDoubleClickTest.aspx.cs后台：

public partial class CalendarDoubleClickTest : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Calendar1_SelectionChanged(object sender, EventArgs e)
    {
        Session["SelectDateTime"] = Calendar1.SelectedDate.ToShortDateString();
    }
}

2.CalendarSon.aspx代码如下：

<head runat="server">
    <title>填写备忘录信息</title>
    <script type="text/javascript">
        function watermark(id, value) {
            var obj = document.getElementById(id);
            obj.value = value;
            obj.style.cssText = "color:Gray";
            //获取焦点事件
            obj.onfocus = function () {
                this.style.cssText = "color:Blue";
                if (this.value == value) {
                    this.value = '';
                }
            };
            //失去焦点事件
            obj.onblur = function () {
                if (this.value == "") {
                    this.value = value;
                    this.style.cssText = "color:Gray";
                }
                else {
                    this.style.cssText = "color:Blue";
                }
            };
        }
        window.onload = function () {
            var arr = [{ 'id': 'tb_title', 'desc': '请输入您的备忘录标题...' }, { 'id': 'tb_content', 'desc': '请输入备忘录内容...'}];
            for (var i = 0; i < arr.length; i++) {
                watermark(arr[i].id, arr[i].desc);
            }
        };
    </script>
    <style type="text/css">
        .css1{
            width:500px;
            height:26px;
        }
        .css2{
            width:500px;
            height:270px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table style="width:500px;height:400px" align="center">
            <tr>
                <td style="width:500px;height:35px; font-weight: bold;" align="center">
                    填写备忘录信息
                </td>
            </tr>
            <tr>
                <td style="width:500px;height:30px;">
                    <asp:TextBox ID="tb_title" runat="server" CssClass="css1"></asp:TextBox>

                </td>
            </tr>
            <tr>
                <td style="width:500px;height:270px">
                    <asp:TextBox ID="tb_content" runat="server" CssClass="css2" TextMode="MultiLine"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td style="width:500px;height:30px" align="left">
                    <asp:CheckBox ID="CheckBox_Remind" runat="server" Text="邮件提醒" />
                    <asp:Label ID="Label1" runat="server" Text="Label" Visible="False"></asp:Label>
                </td>
            </tr>
            <tr>
                <td style="width:500px;height:35px" align="center">
                    <asp:Button ID="Button1" runat="server" Height="22px" Text="保存" Width="50px" 
                        οnclick="Button1_Click" />
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

CalendarSon.aspx.cs代码：

public partial class CalendarSon : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            if (Session["SelectDateTime"] != null)
            {
                Label1.Text = Session["SelectDateTime"].ToString();
                Session.Remove("SelectDateTime");
            }
            else
            {
                Response.Write("<script>alert('你没有选中日期');window.close();</script>");
            }
            
        }
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        SqlHelp sql = new SqlHelp();
        string remind=string.Empty;
        if(CheckBox_Remind.Checked)
        {
            remind="true";
        }
        else
        {
            remind="false";
        }
        string strfac = "insert into Rex_Test2(MemorandumTitle,MemorandumContent,Owner,DueTime,Remind,CreateTime) values('"+tb_title.Text.ToString()+"','"+tb_content.Text.ToString()+"','"+Session["LoginID"]+"','"+Label1.Text.ToString()+"','"+remind+"','"+DateTime.Now.ToString()+"')";
        bool flag = sql.ExecuteNonQuery(strfac);
        sql.SqlClose();
        if (flag)
        {
            Response.Write("<script>alert('该备忘录新建成功！');window.close();</script>");
        }
        else
        {
            Response.Write("<script>alert('该备忘录新建失败！');window.close();</script>");
        }
    }
}

功能很粗糙，也很简陋，有待大家改进，其中的SQL操作是调用的SqlHelper类，网上很多这种的，可以自己下来改改就能用。希望这个能帮到你们，谢谢。

asp.net中为Calendar日历控件添加双击日期事件

相关阅读

相关文章

相关问答

相关文档