FullCalendar + Asp.Net MVC 3.0

22 Мар
2011

В текущем проекте, есть необходимость отображения календаря пользователя. Был найден замечательный плагин для jquery — FullCalendar, который отображает календарь как Google Calendar. Немного о том его использовать.

Пишем простой метод в контролере, который будет выдавать список событий за интервал времени с start по end. Эти параметры передаются от плагина в запросе к Json источнику.

[HttpPost]
public JsonResult List(double start, double end)
{
    var events = (new MyMvcApp.Models.NotesDataContext()).tEvents.Where(e => e.user_id == 1 && (e.start >= UnixTimeToDateTime(start)) && (e.end <= UnixTimeToDateTime(end)));
    return Json(events);
}

Функция UnixTimeToDateTime:

private DateTime UnixTimeToDateTime(double unixTimeStamp)
{
    var d = new DateTime(1970, 1, 1, 0, 0, 0, 0);
    return d.AddSeconds(unixTimeStamp);
}

В представление создаем элемент где будет отображаться наш календарь:

<div id="agenda"></div>

Описываем объект календаря:

$("document").ready(function () {
    $("#agenda").fullCalendar({
        header: {
            left: '',
            center: 'title',
            right: 'today agendaDay agendaWeek  month prev,next'
        },
        timeFormat: {
            agenda: 'H:mm{ - H:mm}',
            '': 'H(:mm)'
        },
        titleFormat: {
            month: 'MMMM yyyy',
            week: "MMMM d[ yyyy]{ '—' d, [ MMM] yyyy}",
            day: 'dddd, MMMM d, yyyy'
        },
        columnFormat: {
            week: 'dddd, d MMMM',
            month: 'dddd'
        },
        events: function (start, end, callback) {
            contentType: "application/json; charset=utf-8",
            $.post('/Calendar/List/', {
                    'start': start.getTime() / 1000,
                    'end': end.getTime() /1000
                },
                function (result) {
                    if (result != null) {
                        for (i in result) {
                            var calEvent = result[i];
                            calEvent.start = new Date(parseInt(calEvent.start.replace("/Date(", "").replace(")/", ""), 10));
                            calEvent.end = new Date(parseInt(calEvent.end.replace("/Date(", "").replace(")/", ""), 10));
                        }
                    }
                    var calevents = result;
                    callback(calevents);
                }, "json");
        },
        allDayDefault: false,
        buttonText: {
            today: 'Сегодня',
            month: 'Месяц',
            week: 'Неделя',
            day: 'День'
        },
        allDayText: 'Дела на весь день',
        defaultView: 'agendaWeek',
        monthNames: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
        monthAbbrevs: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июнь', 'Июль', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'],
        dayNames: ['Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота', 'Воскресенье'],
        dayAbbrevs: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс']
    });
});

Все параметры можно найти в документации к плагину.
Самое интересное это источник событий.
В нашем случае это функция, которая приводит пришедшие данные от контроллера в нужный формат.

Оставить комментарий или два

Наверх
Rambler's Top100