Text Input Demo

Описание

UICalendar - это виджет календаря с возможностью выбора как конкретной даты, так и года\месяца. Навигация осуществляется как по годам, месяцам, так и дням.

Для удобства есть возможность как включить переключение между режимами, так и отключить.

При использовании календаря можно подключить дефолтные стили - UICalendar.css, так и переопределить их

Быстрый старт

Конструктор имеет следующие параметры:


    new UICalendar([selector || jQuery], multipleSelect, calendarType, autoSwitch, startYear, startMonth)

Например, простейшее использование предполагает только один обязательный параметр:


    new UICalendar('.test-calendar');

Параметры


    [selector || jQuery] selector - элемент, который развернется в календарь (контейнер по селектору, или jQuery объект)
    [Boolean] multipleSelect - возможность выбора нескольких значений. По умолчанию = false - запрещена
    [String] calendarType - Типа каледаря по умолчанию. Возможные значения:
        "date" - отображение выбора даты (по умолчанию)
        "month" - отображение выбора месяца
        "year" - отображение выбора года
    [Boolean] autoSwitch - переключать по нажати на заголовок с выбора даты на выбор месяца и далее
        (соответсвенно нижний уровень задается в calendarType, а верхний - 'year') По умолчанию - отключена
    [Number] startYear - начальный год (По умолчанию - настоящий год)
    [Number] startMonth - начальный месяц (По умолчанию - настоящий месяц). Игнорируется если задан calendarType !== "date"

Методы


    setMonth(month) -  задает месяц для отображения

    setYear(year) - задает год для отображения

    addEvents(eventDescription, concreteDates) - добавляет событие на календарь.
        [Object] eventDescription - объект - описание события
        [Date] concreteDates - Дата события (если не указана - в качестве выбранных дат выбирается выбранные даты на календаре)

    deleteEvent(date,event) - удаление события
        [Date] date - дата, на которую необходимо удалить событие
        [Object] event - ссылка на удаляемое событие. Если не задано - очищение всех событий по выбранной дате

    getEvents(date) - получение события или списка событий по выбранной дате

    getSelectedDates() - получение выбранной даты или списка выбранных дат

    toDate(date) - переход к выбранной дате

    syncWithLocalStorage() - синхронизирует события с localStorage

    loadEventsFromLocalStorage() - загружает события из localStorage

Примеры

Выбор изначально года, затем месяца и даты: (возврат к предыдущему выбору осуществляется кликом на заголовок)


    var calendar = new UICalendar("#myCalendar", false, "year", true);

Получить информацию о выбранной дате в календаре выше - по нажатию на кнопку:


    $('.js-button').on('click', function() {
        console.log(calendar.getSelectedDates());
    })

Выбор года, с заданием стартового года


    new UICalendar("#myCalendar2", false, "year", false, 1000);

Календарь + добавление события на предыдущий перед ссегодняшним днем день


    var eventCal = new UICalendar('#CalendarWithEvent');
    var date = new Date();
    date.setDate(date.getDate() - 1);
    eventCal.addEvents('событие', date);

Описание

Быстрый старт

Параметры

Методы

Примеры

Использование