Мобильный терминал «Компонент календаря H5» был заброшен и больше не поддерживается.

внешний интерфейс JavaScript CSS

Ведущие документации:孙尊路Пожалуйста, укажите источник.

Если хочешь, помниstarили关注Ну давай же!

Применимая сцена

  • В настоящее время этот компонент подходит только для отображения страницы H5 на мобильных устройствах. Позже в расширенном использовании будет описано, как реализовать ввод пользовательского шаблона на основе базового класса календаря. (То есть разработчикам нужно только передать свои собственные шаблоны, чтобы реализовать свои собственные красивые календари.)本篇主要是带大家入门日历组件的使用，该文档后面会持续优化更新。若有不足，请大家多多指教，小编会及时更正！

Пример дисплея

Типовой случай применения проекта

  • 【Mobile OA class】 Мое расписание
  • 【Категория торгов】 График открытия торгов

зависимые ресурсы

  • libs/calendar_base.jsБиблиотека js базового класса компонента календаря
  • libs/calendar_base.cssБиблиотека css базового класса компонентов календаря, которую можно персонализировать в соответствии с потребностями бизнеса для достижения визуальных эффектов дизайна.

Как настроить и использовать

DOM-структура

ОдинdivТолько что

<div id="calendar"></div>

инициализация

Следующий код является самым простым использованием, пожалуйста, обратитесь к более сложному использованиюcalendar_showcaseЗагрузка исходного кода

var calendar = new Calendar({
    // 日历容器
    container: "#calendar",
    // 点击日期事件
    onItemClick: function(item) {
        var defaultDate = item.date;
    }
});

Параметр Описание

параметр Тип параметра иллюстрировать
container строка или элемент HTML 必选Селектор css для контейнера календаря, например "#calendar". По умолчанию#calendar
pre строка или элемент HTML 可选Селектор CSS или HTML-элемент кнопки предыдущего месяца. По умолчанию.pre
next строка или элемент HTML 可选Селектор css или элемент HTML для кнопки следующего месяца. По умолчанию.next
backToToday строка или элемент HTML 可选Возвращает селектор css или элемент HTML для кнопки «Сегодня». По умолчанию.backToToday
dataRequest Function 可选Функция обратного вызова для привязки бизнес-данных. Например, если есть расписание на определенный день, то соответствующая дата будет отмечена маленькой красной точкой или другим знаком.Формат входящих данных по умолчанию: data=[{"date":"2018-04-18"},{"date":"2018-04-17"},{"date":"2018-04-16"}]
onItemClick Function 必选Функция обратного вызова, выполняемая через 300 мс при нажатии или касании даты. Дата обратного звонка:2018-04-07
swipeCallback Function 可选Функция обратного вызова, выполняемая, если ползунок срабатывает для переключения назад (влево, вверх) при отпускании ползунка
template Функция или строка 可选, шаблон, отображаемый элементом, который может быть строкой шаблона или функцией. Если это функция, не забудьте вернуть строку шаблона. Компонент по умолчанию имеет встроенный шаблон
isDebug Boolean 可选Включить ли режим отладки, по умолчаниюfalse

API

СгенерированоcalendarОбъекты могут вызывать следующие API

var calendar = new Calendar(...);

refresh()

Данные в пустом контейнере календаря будут уничтожены и перерисованы. По умолчанию входящий параметр пуст, а данные календаря текущего месяца обновляются.

calendar.refresh();

В то же время вы также можете вручную пройти на дату для визуализации данных календаря, например:2020-08-08Календарь выглядит следующим образом:

calendar.refresh({
    year: "2020",
    month: "08",
    day: "08"
});

Параметр Описание

параметр Тип параметра иллюстрировать
{} object 必选Объект даты должен быть передан в следующем формате: {год:"2018",месяц:"04",день:"08"}

slidePrev()

切换为上一个月, с параметрами, переданными внутри компонентаpreТочно так же этот API поддерживает обработку собственной бизнес-логики в асинхронном обратном вызове успеха Promise.

calendar.slidePrev().then(...).then(...);

slideNext()

切换为下一个月, с параметрами, переданными внутри компонентаnextТочно так же этот API поддерживает обработку собственной бизнес-логики в асинхронном обратном вызове успеха Promise.

calendar.slideNext().then(...).then(...);

addActiveStyleFordate()

给特定日期新增选中激活样式, например: поставить дату2018-08-21Бит флага выбран.

calendar.addActiveStyleFordate("2018-08-21");

Параметр Описание

параметр Тип параметра иллюстрировать
"2018-08-21" String 必选Формат даты должен соответствовать следующему формату: 2018-08-21.

refreshData()

получит данные календаря за весь месяц (6 * 7 = 42Дата квадрата) можно разработать собственные компоненты календаря по API, например:

calendar.refreshData({
    year: "2018",
    month: "04",
    day: "08"
},
function(output, data) {
    console.log("==某个月的日历渲染数据：==" + JSON.stringify(data));
    console.log("==组件自带模板==" + output);
});

输出日历数据格式：

[{"day":25,"lunar":"初九","date":"2018-03-25","isforbid":"0"}]

输出内置组件模板格式：

<div class="em-calendar-item  isforbid0"date="2018-03-25"><span class="day">25</span><p class="lunar">初九</p></div>

Преимущества и преимущества

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

Наличие недостатков

В настоящее время существует несколько зависимых js-библиотек (mustache.min.js, mui.min.js), в основном некоторые часто используемые мобильные js-библиотеки (что понятно), включая основную библиотеку компонентов. это влияет на скорость загрузки и тд.На самом деле в приложении уже много проектов влияющих,конечно,редактор тоже усердно работает剥离第三方js库, Идея уже есть, но на рефакторинг кода уходит немного времени.Если это доставляет вам какие-либо неудобства до этого, пожалуйста, потерпите меня, все-таки优化组件Это занимает много времени.

Категории