顺★

导航

Mvc3 自制日历,与周历

public ActionResult Cnlender()
        {
            var date = DateTime.Now;
            StringBuilder result = DayTime(date.Year, date.Month);
            return View(result);
        }

        public ActionResult WeekCnlender()
        {
            var date = DateTime.Now;
            StringBuilder result = WeekTime(date.Year, date.Month);
            return View(result);
        }

        public JsonResult Cnlenders(int Year, int Month, int TypeID)
        {
            StringBuilder result = new StringBuilder();
            if(TypeID == 1)
                result = DayTime(Year, Month);

            if(TypeID == 2)
                result = WeekTime(Year, Month);
            return Json(result.ToString());
        }

 

#region //日历 //周历
        protected StringBuilder DayTime(int? Year, int? Month)
        {
            var result = new StringBuilder();
            result.AppendFormat("<div id=\"Calendar\">"
                             + "<div style=\"width:730px;\" id=\"ctl00_ContentBody_pnCalendar\">"
                             + "<table border=\"0\" style=\"width:730px; text-align:center\" class=\"boketable\"><tbody>");
            result.AppendFormat("<tr align=\"center\">"
                                + "<td><span class=\"red\">星期日</span></td>"
                                + "<td>星期一</td><td>星期二</td><td>星期三</td><td>星期四</td><td>星期五</td>"
                                + "<td><span class=\"red\">星期六</span></td></tr>");

            int year = Year == null ? DateTime.Now.Year : (int)Year;
            int month = Month == null ? DateTime.Now.Month : (int)Month;

            var date = DateTime.Parse(string.Format("{0}-{1}", year, month));
            int Days = DateTime.DaysInMonth(date.Year, date.Month);//获取该月天数
            int day = (int)date.AddDays(1 - date.Day).DayOfWeek;//获取该月第一天的星期

            int x = 1;
            for (int n = 1; n <= 6; n++)
            {
                result.AppendFormat("<tr style=\"height:60px;\">");
                for (int m = 1; m <= 7; m++)
                {
                    if (x - day <= Days)
                    {
                        if (x <= day)
                            result.AppendFormat("<td></td>");
                        else
                            result.AppendFormat("<td id=\"daytime_" + (x - day) + "\" title=\"" + (x - day) + "\">" + (x - day) + "<br><div class=\"rili\"></div></td>");
                    }
                    x++;
                }
                result.AppendFormat("</tr>");
            }

            result.AppendFormat("</tbody></table></div></div>");

            return result;
        }

        protected StringBuilder WeekTime(int? Year, int? Month)
        {
            var result = new StringBuilder();

            int year = Year == null ? DateTime.Now.Year : (int)Year;
            int month = Month == null ? DateTime.Now.Month : (int)Month;

            var date = DateTime.Parse(string.Format("{0}-{1}", year, month));
            int Days = DateTime.DaysInMonth(date.Year, date.Month);//获取该月天数
            int day = (int)date.AddDays(1 - date.Day).DayOfWeek;//获取该月第一天的星期

            double wek = (double)Days / 7;
            int weeks = (int)Math.Ceiling(wek);
            if (!DateTime.IsLeapYear(date.Year))
            {
                if (date.Month == 2)//如果是闰年2月
                    weeks += 1;
            }

            result.AppendFormat("<div id=\"Calendar\">");

            for (int i = 1; i <= weeks; i++)
            {
                result.AppendFormat("<span>"
                                    + date.AddDays(1 - date.Day - day + i + (i - 1) * 6).ToString("MM-dd")
                                    + " 至 "
                                    + date.AddDays(1 - date.Day - day + i + i * 6).ToString("MM-dd")
                                    + "</span><br />");
            }

             result.AppendFormat("</div>");

            return result;
        }
        #endregion

 

js

function ShowDate() {
    var isdate = new Date();
    var year = isdate.getFullYear(); //获取当前年
    var month = isdate.getMonth() + 1; //获取当前月

    //年份下拉框
    jQuery("#time").append("<select name=\"year\" id=\"year\" onchange=\"ChangeDate();\"></select>年");
    var years = 2012
    for (var i = 0; i < 20; i++) {
        if (years == year)
            jQuery("#year").append("<option value='" + years + "' selected=\"selected\">" + years + "</option>");
        else
            jQuery("#year").append("<option value='" + years + "'>" + years + "</option>");

        years++;
    }
    //月份下拉框
    jQuery("#time").append("<select name=\"month\" id=\"month\" onchange=\"ChangeDate();\"></select>月");
    for (var i = 1; i < 13; i++) {
        if (i == month)
            jQuery("#month").append("<option value='" + i + "' selected=\"selected\">" + i + "</option>");
        else
            jQuery("#month").append("<option value='" + i + "'>" + i + "</option>");
    }
}

function ChangeDate() {
    var year = jQuery("#year").val();
    var month = jQuery("#month").val();
    var typeid = jQuery("#typeid").val();
    jQuery.ajax({
        url: "/Reading/Cnlenders",
        type: "POST",
        data: { Year: year, Month: month, TypeID:typeid },
        success: function (msg) {
            jQuery(msg).replaceAll("#Calendar");
        }

    });
}

 日历图:

中间可以加入用户的互动等等

 

周历 只是计算出了时间没搞样式

posted on 2012-03-05 16:12  顺★  阅读(1178)  评论(3编辑  收藏  举报