Calendario - календарь для вашего сайта

Цель создания плагина была в том, чтобы обеспечить наилучшее расположение календаря как на малых, так и на больших экранах и сохранить при этом "плавающую" структуру календаря, когда это возможно.

Обратите внимание, что демо-примеры будут работать, как задумано, только в браузерах, которые поддерживают новые свойства CSS3, используемые здесь, в первую очередь calc().

Календарь создан на основе этих двух красивых примеров, найденных на Dribbble:

День - самый красивый календарь-приложение для iPhone от Toby Negele

Календарь от Tomas Gajar

Для работы плагина, нам просто нужно создать контейнер с классом "fc-calendar-container":

<div id="calendar" class="fc-calendar-container"></div>

Плагин может быть вызван следующим образом:

$('#calendar').calendario();

После чего плагин создает разметку календаря со следующей структурой:

<div id="calendar" class="fc-calendar-container">
    <div class="fc-calendar fc-five-rows">
        <div class="fc-head">
            <div>Понедельник</div>
            <div>Вторник</div>
            <div>Среда</div>
            <div>Четверг</div>
            <div>Пятница</div>
            <div>Суббота</div>
            <div>Воскресенье</div>
        </div>
        <div class="fc-body">
            <div class="fc-row">
                <div></div>
                <div></div>
                <div></div>
                <div><span class="fc-date">1</span><span class="fc-weekday">Чтв</span></div>
                <div><span class="fc-date">2</span><span class="fc-weekday">Птн</span></div>
                <div><span class="fc-date">3</span><span class="fc-weekday">Сбт</span></div>
                <div><span class="fc-date">4</span><span class="fc-weekday">Вск</span></div>
            </div>
            <div class="fc-row">
                <!-- ... -->
            </div>
            <div class="fc-row">
                <!-- ... -->
            </div>
            <div class="fc-row">
                <!-- ... -->
            </div>
            <!-- ... -->
        </div>
    </div>
</div>

Календарь будет состоять из шапки для списка дней недели и контейнера с рядами дней месяца. Каждая «ячейка» будет содержать дату и день недели, и мы будем контролировать высоту строки, установив нужный класс для контейнера (четыре, пять или шесть строк). Стили для календаря, по умолчанию, определяются в calendar.css.

Обратите внимание, что ячейка, которая содержит контент/событие, будет выглядеть следующим образом:

<div class="fc-content">
    <span class="fc-date">14</span>
    <span class="fc-weekday">Срд</span>
    <div>
        <!-- Описание события -->
    </div>
</div>

Также обратите внимание, что дни недели в каждой ячейке скрыты по умолчанию, потому что у нас есть в календаре шапка с днями недели. Те, что в ячейки показываются, когда мы применяем media queries, чтобы изменить макет календаря на вертикальный. Здесь мы показываем дни недели в каждой ячейке.

Понятно, что календарь может/должен быть представлен как таблица, но из-за некоторый разницы при рендеринге таблиц между браузерами (особенно IE9), мы решили не использовать её. Конечно, Вы можете сами настроить плагин для вывода таблицы.

Важной частью создания "плавающей" сетки календаря являются стили строк и ячеек:

.fc-four-rows .fc-row  {
    height: 25%;
}

.fc-five-rows .fc-row  {
    height: 20%;
}

.fc-six-rows .fc-row {
    height: 16.66%;
    height: -moz-calc(100%/6);
    height: -webkit-calc(100%/6);
    height: calc(100%/6);
}

.fc-calendar .fc-row > div,
.fc-calendar .fc-head > div {
    float: left;
    height: 100%;
    width:  14.28%; /* 100% / 7 */
    width: -moz-calc(100%/7);
    width: -webkit-calc(100%/7);
    width: calc(100%/7);
    position: relative;
}

Таким образом, мы определяем разную высоту календаря в зависимости от количества строк, используя calc(). Для внутренних блоков мы установим ширину равную 100 разделенное на 7 - calc(100%/7).

Параметры

Доступны следующие (по умолчанию) параметры:

// инициализация календаря для месяца (1-12). По умолчанию текущий.
month : null,

// инициализация календаря для года. По умолчанию текущий.
year : null,

// инициализация данных/содержания для календаря
// format:
// {
//      'MM-DD-YYYY' : 'HTML Content',
//      'MM-DD-YYYY' : 'HTML Content',
//      'MM-DD-YYYY' : 'HTML Content'
//      ...
//  }
caldata : null,
weeks : [ 'Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота' ],
weekabbrs : [ 'Вск', 'Пнд', 'Втр', 'Срд', 'Чтв', 'Птн', 'Сбт' ],
months : [ 'Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь' ],
monthabbrs : [ 'Янв', 'Фев', 'Мрт', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек' ],

// выбор между значениями options.weeks и options.weekabbrs
displayWeekAbbr : false,

// выбор между значениями options.months и options.monthabbrs
displayMonthAbbr : false,

// первый день недели
// 0 - Sunday, 1 - Monday, ... , 6 - Saturday
startIn : 1,

// callback-функция, вызывается когда вы кликаете на ячейку
// $el - это ячейка
// $content - это контент в ячейке
// dateProperties - это объект со следующими параметрами:
// day : номер дня,
// month : номер месяца, от 1 - 12,
// monthname : название месяца из options.months,
// year : год,
// weekday : день недели, от 0 - 6,
// weekdayname : название дня недели, из options.weeks
onDayClick : function( $el, $content, dateProperties ) { return false; }

Также доступны следующие паблик-методы:

// возвращает год, который в настоящее время просматривают
getYear()

// возвращает месяц, который в настоящее время просматривают (1-12)
getMonth()

//возвращает название месяца, который в настоящее время просматривают
getMonthName()

// возвращает содержимое ячейки "day"
getCell( day )

// устанавливает данные в календаре. Объединяет содержимое "caldata" с теми, которые уже установлены (если таковые имеются)
setData( caldata )

// Показывает календарь для текущего месяца и года
// Месяц от 1-12
gotoNow( callback )

// Показывает календарь для месяца "month" и года "year"
// Месяц от 1-12
goto( month, year, callback )

// возвращает предыдущий месяц в календаре
gotoPreviousMonth( callback )

//возвращает предыдущий год в календаре
gotoPreviousYear( callback )

// возвращает следующий месяц в календаре
gotoNextMonth( callback )

//возвращает следующий год в календаре
gotoNextYear( callback )

Вы можете использовать функцию SetData, чтобы добавить контент в календарь. Как это будет выглядеть Вы можете увидеть в демо-примерах.

Основные стили, как уже было сказано выше, определяются в файле calendar.css, но в примерах вы можете увидеть как можно изменить стили и добавить к ним в пользовательских файлы CSS.

Источник