Календарь событий с кликабельными днями с использованием jQuery в ASP.NET MVC3

Question

Я собираюсь создать решение, которое будет перечислять события, которые будут происходить в определенные дни, и искал элемент управления Calendar, с которым я мог бы справиться, чтобы сделать только дни с событиями кликабельными, и, конечно, получить это событие click и сам справлюсь с остальным в моем контроллере. (что-то вроде старого asp: серверный элемент управления Calendar в Webforms).

Есть ли кто-нибудь, что соответствует этому сценарию?

Обновление: Мне нужен именно мини-календарь, а не полный календарь, как в Outlook.

это именно то, что я ищу:

Answer 1

Пользовательский интерфейс jQuery может выполнять точную стилизацию, которую вы хотите .. ( и функциональность )

Вам необходимо загрузить Пользовательский интерфейс jQuery сценарий и Гладкость тема ^{( посещение http://jqueryui.com/download/ и выберите core и DatePicker изпереключатели и плавность из выпадающего меню вправо )}

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/

Приведенный выше код и пример отображаются как

Answer 2

Вы можете использовать указатель даты jquery UI вместе с событием beforeShowDay, чтобы указать, какие дни можно выбирать, а какие - нет.Вот минимальный код, который запрещает выбор даты 5, и вы можете расширить логику.

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

Вот быстрое демо

Answer 3

Я сделал нечто подобное пару лет назад, сильно изменив календарь javascript под названием Календарь событий MooTools

Есть несколько других календарей javascript, которые также выглядят довольно неплохо.Эти 2 используют JQuery:

• Полный календарь
• Календарь и планировщик событий Web-Delicious

Answer 4

Если вы все еще можете использовать Javascript в своем коде, возьмите этот элемент управления и настройте его пользовательский интерфейс. Он имеет исходный код, доступный для ваших собственных требований к настройке.

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

Answer 5

Многие люди используют jQuery UI datepicker . Я не уверен во встроенном элементе управления asp.net mvc для календаря.

Answer 6

Я понимаю, что это слишком поздно в качестве ответа, но ваш вопрос довольно высок в результатах Google, поэтому, надеюсь, он поможет другим людям. Я написал статью на эту тему здесь: Календарь событий MVC3 на основе Datepicker

Answer 7

Чтобы дополнить ответ @ 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] + '.');
    }
});

Answer 8

Вы можете интегрировать MVC с Silverlight и использовать календарь Silverlight http://developerstyle.posterous.com/silverlight-calendar-with-mvc-3

Answer 9

Как ограничить количество дней, доступных в окне выбора даты jquery ui

или

http://test.thecodecentral.com/cms/jqueryui/datepicker/