修正Telerik MVC Calendar星期顯示問題

發表ASP.NET MVC CRUD之路 (2) - Telerik Extensions for ASP.NET MVC Open Source Project一文後,網友亞米斯提了一個問題,Calendar在中文環境下日期顯示會呈現"星星星星星星星",而非"日一二三四五六"! (不知為什麼,看到這場面,我腦海的電影院就會開始播放逃學威龍的片段 XD)。

經實測果真如此:

研判應為元件處理星期名稱邏輯與中文語系的相容問題(似乎是不少日曆元件的通病),追進原始碼CalendarHtmlBuilder.cs: (TGI Open Source :-) )

        public IHtmlNode HeaderCellTag(string dayOfWeek)
        {
            IHtmlNode cell = new HtmlElement("th")
                             .Attributes(new { scope = "col", title = dayOfWeek})
                             .Text(dayOfWeek.Substring(0, 1));
 
            if (dayOfWeek.Length > 3)
                cell.Attribute("abbr", dayOfWeek.Substring(0, 3));
 
            return cell;
        }

依程式邏輯,元件內部只取DayNames第一個字元顯示出來,在英文時會是SMTWTFS,中文就變成星星星星星星星。不想改動核心程式碼(畢竟這段程式必須兼顧各國語系,而目前我只想得出為中文加入特定邏輯分支的鳥做法,就別弄髒了人家的程式),反正已知原理,要解決就不難。

在HomeControler.cs裡加入一段程式重新設定CultureInfo.DateTimeFormat.DayNames為日、一、二、...、六的字串陣列:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Threading;
using System.Globalization;
 
namespace NuGetTelerikMvc.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Message = "Welcome to ASP.NET MVC!";
            SetTaiwanCultureInfoDayNames();
            return View();
        }
 
        public ActionResult About()
        {
            return View();
        }
 
        public void SetTaiwanCultureInfoDayNames()
        {
            CultureInfo ci = new CultureInfo("zh-TW");
            ci.DateTimeFormat.DayNames =
                "日 一 二 三 四 五 六".Split(' ');
            Thread.CurrentThread.CurrentCulture = ci;
        }
    }
}

搞定收工!

等一下,住在荖濃溪旁的勞超凡先生Call In,他說更動CultureInfo的日期設定,會影響到所有使用CultureInfo星期設定的程式碼,可能會有副作用。

嗯,若有這一層顧慮,我們可由jQuery從前端下手,加上幾行Code,也能得到相同結果。這種單純從UI修正的做法或許更周到,唯一缺點是jQuery在網頁載入後才更換文字,雖然是極短的時間差,使用者還是可能察覺到畫面變動,但理論上不致構成問題。

@using Telerik.Web.Mvc.UI
<div>
    @Html.Telerik().Calendar().Name("cal")
</div>
<script type="text/javascript">
    $(function () {
        $("thead.t-week-header th:contains('星')").each(function () {
            $(this).text(this.title.substr(2, 1));
        });
    });
</script>
@(Html.Telerik().StyleSheetRegistrar()    
    .DefaultGroup(group => 
    group.Add("telerik.common.css").Add("telerik.default.css")
    .Combined(true).Compress(true)))
@(Html.Telerik().ScriptRegistrar()
    .DefaultGroup(
    group => group.Combined(true).Compress(true)))

搞定收工! (這次是真的了)

[2011-06-07更新]

收工回到家還沒脫外套,馬上又接到布袋的布耀袍先生Call In,說那個jQuery解決方案是山寨版,前端切換到選月份再切回來就破功變回周星星了。先前漏想了AJAX動態互動這段,再調一下程式,連$.telerik.cultureInfo.days也一併換新(程式要放在網頁的最後,才能覆寫ScriptRegistrar()產生的內容),應可解決問題囉!

@using Telerik.Web.Mvc.UI
<div>
    @Html.Telerik().Calendar().Name("cal")
</div>
 
@(Html.Telerik().StyleSheetRegistrar()  
    .DefaultGroup(group => 
    group.Add("telerik.common.css").Add("telerik.default.css")
    .Combined(true).Compress(true)))
@(Html.Telerik().ScriptRegistrar()
    .Globalization(true)
    .DefaultGroup(
    group => group.Combined(true).Compress(true)))
 
<script type="text/javascript">
    $(function () {
        var $t = $.telerik;
        if ($t.cultureInfo) {
            $.extend($t.cultureInfo, { days: "日 一 二 三 四 五 六".split(' ') });
        }
        $("thead.t-week-header th:contains('星')").each(function () {
            $(this).text(this.title.substr(2, 1));
        });
    });
</script>

(小聲地說)搞定收工!(希望這次是真的... orz)

歡迎推文分享:
Published 07 June 2011 07:17 AM 由 Jeffrey
Filed under: ,
Views: 11,679



意見

# 亞米斯 said on 06 June, 2011 09:45 PM

多謝 黑暗老大 幫凡人解答

# 亞米斯 said on 06 June, 2011 11:53 PM

jQuery從前端下手 有一個淺在問題 就是當左右換月份

或是 直接按年份 換年時 周星星又會跑出來了

(要在這裡留言 要先通過下方 火星文驗證 好有成就感)

# Jeffrey said on 07 June, 2011 01:02 AM

to 亞米斯,緊急再出一個修正版(更新於文末),請參考。

# 亞米斯 said on 07 June, 2011 02:26 AM

多謝 黑暗兄

說不定有要 加 貢丸滷蛋 或是 加冰 少糖 的 電視機前的朋友(明明就是自己)

覺得畫面上 日一二三 的呈現方式 靠左很不習慣

請$(this).text(this.title.substr(2, 1));

後面加上

$(this).css("text-align", "right");

@*

設定 right 是因為他CSS設定padding 有點怪

再不改code 的情況下 加上text-align - right

是我的作法

*@

# 亞米斯 said on 07 June, 2011 02:30 AM

黑暗大 上面的發文幫我刪除好了

這樣作法ajax一跑過 css 設定還是會亂掉

# Jeffrey said on 07 June, 2011 02:40 AM

to 亞米斯, 排版格式的部分用CSS霸王硬上弓應該就可以囉! <style type="text/css">

   .t-week-header th { text-align: right; }

</style>

# archer said on 02 July, 2011 11:57 PM

謝謝你啊,在這裏看到了很多寶藏,

真是太感謝了,

Archer

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<June 2011>
SunMonTueWedThuFriSat
2930311234
567891011
12131415161718
19202122232425
262728293012
3456789
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication