在 ASP.NET MVC3 中使用 jQuery 的具有可点击日期的事件日历

发布于 2024-10-31 03:05:18 字数 309 浏览 1 评论 0原文

我即将创建一个解决方案，该解决方案将列出将在特定日期发生的事件，并且正在寻找一个日历控件，我可以处理该控件以仅使有事件的日期可单击，当然还可以接收此单击事件并处理在我的控制器中休息。（类似于 Webforms 中旧的 asp:Calendar 服务器端控件）。

有符合这个场景的吗？

更新：我正在寻找的是一个迷你日历，而不是像 Outlook 中的完整日历。

这就是我正在寻找的：

在此处输入图像描述

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

帅冕 2024-11-07 03:05:18

jQuery UI 可以实现您想要的确切样式。（和功能）

您将需要下载 jQuery UI 脚本和 平滑度主题^{（访问http://jqueryui.com /download/ 并从单选按钮中选择核心和日期选择器，并从右侧的下拉列表中选择平滑度）}

html

<div id="datepicker"></div>

javascript

var activeDays=[1,4,10,21,22,23,27,28,30];

$('#datepicker').datepicker(
    {
        beforeShowDay: function(date) {
            var hilight = [false,''];

            if ( activeDays.indexOf( date.getDate() ) > -1)
            {
                hilight = [true,'isActive'];
            }

            return hilight;
        }
    }
);

activeDays 变量可以直接保存日期（而不仅仅是日期数字），您需要更改函数内的条件以检查匹配。

isActive 是一个用于控制活动日期样式的类。

.isActive a.ui-state-default{
    background:none;
    background-color:pink;
}

实时示例位于 http://jsfiddle.net/gaby/C95nx/2/

上面的代码和示例呈现为

在此处输入图像描述

jQuery UI can do the exact styling you want.. (and functionality)

You will need to download the jQuery UI script and the Smoothness theme ^{(visit http://jqueryui.com/download/ and select core and datepicker from the radio buttons, and smoothness from the drop-down to the right)}

html

<div id="datepicker"></div>

javascript

var activeDays=[1,4,10,21,22,23,27,28,30];

$('#datepicker').datepicker(
    {
        beforeShowDay: function(date) {
            var hilight = [false,''];

            if ( activeDays.indexOf( date.getDate() ) > -1)
            {
                hilight = [true,'isActive'];
            }

            return hilight;
        }
    }
);

The activeDays variable could hold dates directly (instead of just the day number) and you would need to alter the conditional inside the function to check for a match.

The isActive is a class used to control the styling of the active dates..

.isActive a.ui-state-default{
    background:none;
    background-color:pink;
}

Live example at http://jsfiddle.net/gaby/C95nx/2/

the above code and example renders as

enter image description here

回复收藏 0 原文

薔薇婲 2024-11-07 03:05:18

几年前，我通过大量修改名为的 javascript 日历，做了类似的事情MooTools 事件日历

还有其他几个看起来也不错的 JavaScript 日历。
这两个使用 JQuery：

回复收藏 0 原文

来世叙缘 2024-11-07 03:05:18

您可以将 jquery UI datepicker 与 beforeShowDay 事件一起使用来自定义哪些日期可以选择，哪些日期不可以。这是禁止选择日期 5 的最小代码，您可以扩展逻辑。

$(function() {
    $( "#datepicker" ).datepicker({
       beforeShowDay: function(date) {
           if(date.getDate() == 5){
                return[false, ''];           
           }
           else{
               return[true, ''];
           }
       }
    });
});

这是一个快速演示

You can use jquery UI datepicker along with the beforeShowDay event to customize which days are selectable and which days are not. Here is the minimal code which disables selecting the date 5 and you can extend the logic.

$(function() {
    $( "#datepicker" ).datepicker({
       beforeShowDay: function(date) {
           if(date.getDate() == 5){
                return[false, ''];           
           }
           else{
               return[true, ''];
           }
       }
    });
});

Here's a quick demo

回复收藏 0 原文

胡渣熟男 2024-11-07 03:05:18

许多人使用 jQuery UI 日期选择器。我不确定日历的内置 asp.net mvc 控件。

回复收藏 0 原文

·深蓝 2024-11-07 03:05:18

如果您仍然可以在代码中使用 Javascript，请使用此控件并自定义其 UI。它具有可满足您自己的定制要求的源代码。

http://www.javascriptkit.com/script/script2/eventscalendar.shtml#< /a>

在此处输入图像描述

回复收藏 0 原文

面如桃花 2024-11-07 03:05:18

我意识到这个答案已经太晚了，但你的问题在谷歌结果中排名很高，所以希望它能帮助其他人。我在这里写了一篇关于这个主题的文章：
基于日期选择器的 MVC3 事件日历

回复收藏 0 原文

救星 2024-11-07 03:05:18

如何限制 jquery ui 日期选择器中的可用天数< /a>

或

http://test.thecodecentral.com/cms/jqueryui/datepicker/< /a>

回复收藏 0 原文

倾城花音 2024-11-07 03:05:18

您可以将 MVC 与 silverlight 集成并使用 silverlight 日历
http://developerstyle.posterous.com/silverlight-calendar-with-mvc-3

回复收藏 0 原文

孤檠 2024-11-07 03:05:18

为了补充 @gaby-aka-g-petrioli 的答案，我添加了允许获取点击操作的 onChangeMonthYear 和 onSelect 方法。

$("#my_datepicker_calendar").datepicker({
    dateFormat : 'm/d/yy',  // month/day/year
    changeMonth : true,
    changeYear : true,
    beforeShowDay : function(date)
    {
        var mm = date.getMonth() + 1, dd = date.getDate(), yy = date.getFullYear();
        var dt = mm + "/" + dd + "/" + yy;
        if ( typeof selectedDates[dt] != 'undefined' ) {
            return [true, "", selectedDates[dt].content];
        }
        return [false, ""];
    },
    onChangeMonthYear : function(year, month)
    {
        alert('Month selected is ' + month + ' and year is ' + year);
    },
    onSelect : function(date)
    {
        var date = date.split("/");
        alert('Date selected is ' + date[0] + '/' + date[1] + '/' + date[2] + '.');
    }
});

In order to complement @gaby-aka-g-petrioli's answer I included onChangeMonthYear and onSelect methods that allows get click actions.

$("#my_datepicker_calendar").datepicker({
    dateFormat : 'm/d/yy',  // month/day/year
    changeMonth : true,
    changeYear : true,
    beforeShowDay : function(date)
    {
        var mm = date.getMonth() + 1, dd = date.getDate(), yy = date.getFullYear();
        var dt = mm + "/" + dd + "/" + yy;
        if ( typeof selectedDates[dt] != 'undefined' ) {
            return [true, "", selectedDates[dt].content];
        }
        return [false, ""];
    },
    onChangeMonthYear : function(year, month)
    {
        alert('Month selected is ' + month + ' and year is ' + year);
    },
    onSelect : function(date)
    {
        var date = date.split("/");
        alert('Date selected is ' + date[0] + '/' + date[1] + '/' + date[2] + '.');
    }
});

回复收藏 0 原文

~没有更多了~