Front-end world around me: April 2016

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

У читателя может возникнуть вопрос: “Зачем создавать собственное приложение, если можно использовать уже имеющийся?” Вот несколько примеров:

Если вы работаете над Интранет приложением, которое не обязательно будет иметь выход во внешнюю Сеть. В этом случае вам, наверняка, понадобится автономный компонент, которому не требуются сторонние сервисы и который может хранить данные там, где вы захотите. Или вам просто хочется иметь полный контроль над над вашим приложением и вы не хотите полагаться на сторонние сервисы
Когда вам нужно создать планировщик, который будет работать с уже имеющимися у вас данными, которые не состоят из “традиционных” событий вида Дата/Заголовок/Описание. Эти данные могут содержать, например, больше количество бизнес-правил
В случае, если вам необходима продвинутая функциональность, не поддерживаемая, например, Google Calendar. Или вам необходимо изменить внешний вид или логику приложения, например, добавить отображение рабочих/нерабочих часов

Мы рассмотрим три разных типа JS-планировщиков:

Kendo UI Scheduler, который является частью фреймворка Kendo UI
FullCalendar, сторонний плагин для jQuery
dhtmlxScheduler, инструмент для создания JavaScript-календарей

Создание планировщика

Прежде, чем мы начнем, стоит определиться с тем, на что мы будет обращать внимание во время сравнения. Поскольку нас интересует опыт первого использования, мы создадим базовый календарь, используя минимум необходимого кода. Важными факторами для нас будут являться:

Условия использования
Внешний вид
Доступный функционал
Сложность использования

Ну что же, давайте приступим.

dhtmlxScheduler

Если вы заглянете на страницу загрузки, то увидите, что нам доступна для свободного скачивания Стандартная Версия. Если вы хотите получить дополнительные возможности, вам доступна платная версия PRO Edition.

Для начала нужно включить в файл проекта необходимые файлы из папки codebase:

<script src="codebase/dhtmlxscheduler.js"></script>
<link rel="stylesheet" href="codebase/dhtmlxscheduler.css" />

Теперь нужно определить контейнер для будущего планировщика:

<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
    <div class="dhx_cal_navline">
        <div class="dhx_cal_prev_button">&nbsp;</div>
        <div class="dhx_cal_next_button">&nbsp;</div>
        <div class="dhx_cal_today_button"></div>
        <div class="dhx_cal_date"></div>
        <div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
        <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
        <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
    </div>
    <div class="dhx_cal_header"></div>
    <div class="dhx_cal_data"></div>       
</div>

И, наконец, можно создать календарь:

<body onload="init();">
<!--поместите div-ы сюда-->
</body>

function init() {
    scheduler.init('scheduler_here',new Date(),"week");
}

Конструктор scheduler.init() создаст планировщик внутри контейнера scheduler_here. new Date() выберет текущую дату в качестве даты по умолчанию. Параметр"week" выберет неделю в качестве масштаба календаря по умолчанию. Доступные варианты: "day", "week" и "month".

Все готово и мы можем посмотреть на результат:

Итак, базовые возможности. Мы можем выбирать текущий масштаб. Доступные значения: день, неделя и месяц. Текущая дата подсвечена желтым цветом, но если вы потеряетесь в днях, вам поможет кнопка “Today”.

Для того, чтобы создать новое событие, нужно использовать двойной клик. Меняя размер события, можно изменить его длительность. Также можно перетаскивать события внутри календаря для изменения даты:

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

В результате будет создано событие, занимающее несколько ячеек календаря. Вам нужно переключиться на масштаб “Month”, чтобы изменить дату начала такого события перетаскиванием.

Kendo UI Scheduler

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

<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>

Важно! Помните, что файл jquery.min.js должен быть подключен перед файлом

kendo.all.min.js.

Далее следует определить стили. Если вы хотите использовать календарь в полноэкранном режиме, стоит также добавить следующий CSS-код:

html, body{
  margin:0;
  padding:0;
  height: 100%;
}
#scheduler {
  border-width: 0;
  height: 100%;
}

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

<div id="scheduler"></div>

$("#scheduler").kendoScheduler({
  // Текущая дата
  date: new Date(),
  views: [
    "day",
    { type: "week", selected: true },
    "month"
  ]
});

В качестве даты по-умолчанию используется текущая дата. Свойство views позволяет добавить возможность выбора масштаба календаря. В данном случае будет добавлена возможность выбора между днем, неделей и месяцем. С помощью selected: true значением по-умолчанию выбирается неделя.

Этого кода достаточно, чтобы создать календарь:

Новое событие создается по двойному клику в необходимой области:

Созданные события можно перетаскивать для изменения даты и растягивать для изменения длительности. Еще одна полезная функция – мини-календарь:

Копка “Show business hours”/”Show full day” в самом низу календаря позволит отделить рабочие события от всех прочих.

Планировщик выглядит интуитивно понятным и обладает всеми базовыми функциями, которые могут вам понадобиться. Вы можете создать новое событие и перемещать его по сетке календаря. Дополнительные функции, такие как мини-календарь и кнопка Show business hours также окажутся полезными.

На этом список возможностей базового календаря заканчивается.

FullCalendar

Этот планировщик распространяется по лицензии MIT License, таким образом, вы можете его использовать практически без ограничений. Установить его можно несколькими способами: с помощью Bower, добавив необходимые для работы файлы через CDNJS или загрузив архив с необходимыми JavaSctipt и CSS файлами. Больше информации вы можете найти на странице загрузки.

Поскольку FullCalendar является плагином для jQuery, не забудьте также подключить файлы, необходимые для его работы. Еще одной зависимостью является Moment.js, JavaScript библиотека, предназначенная для работы с датами. Вот как можно включить все необходимые файлы с помощью CDN:

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.0/fullcalendar.css' />

<script src='http://code.jquery.com/jquery-1.11.3.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.0/fullcalendar.min.js'></script>

После этого вы можете добавить на страницу <div> контейнер, который будет содержать календарь и, если необходимо, добавить стили и инициализировать календарь. Например, у нас есть контейнер:

<div id='calendar'></div>

Вот как можно инициализировать планировщик внутри него:

$(document).ready(function() {
  // страница загружена
  $('#calendar').fullCalendar({
      // свойства календаря
  })
});

Как видите, вам понадобится не так уж и много кода. Но и функционал, который вы получите по умолчанию, не так разнообразен.

Ниже вы можете увидеть, как выглядит наше приложение:

В качестве масштаба календаря по умолчанию выбран Месяц, текущая дата подсвечена, есть возможность изменить отображаемый месяц, а также кнопка Today. На этом всё. Дело в том, что FullCalendar больше всего похож на набор “Сделай Сам”. В нем реализовано большое количество полезных функций, но базовый планировщик выглядит ну очень базовым. Это хороший выбор в том случае, если вы хотите создать компактное приложение с тем минимумом доступных функций, который вам нужен.

Давайте добавим код, необходимый для того, чтобы планировщик выглядел и работал немного лучше:

// поддержка тем
theme: true,
// рабочие/нерабочие часы
businessHours: true,
// изменение и перемещение событий 
editable: true,
// заголовок
header: {
  left: 'prev,next today',
  center: 'title',
  right: 'month,agendaWeek,agendaDay'
},

Поскольку мы включили поддержку тем, нужно подключить дополнительный CSS-файл.

<link rel='stylesheet' href='./lib/cupertino/jquery-ui.min.css' />

Почти готово! Осталось только добавить несколько событий, которые будут отображены на нашем планировщике. Это можно сделать разными способами: как массив, источник JSON данных или даже в виде функции.

Вот пример того, как этом может выглядеть:

events: [
  // all day event
  {
    title  : 'Meeting',
    start  : '2015-11-12'
  },
  // long-term event 
  {
    title  : 'Conference',
    start  : '2015-11-13',
    end    : '2015-11-15'
  },
  // short term event 
  {
    title  : 'Dentist',
    start  : '2015-11-09T11:30:00',
    end  : '2015-11-09T012:30:00'
    allDay : false // will make the time show
  }
]

Давайте проверим результат:

Теперь намного лучше. Можно изменить масштаб календаря, перемещать события, рабочие часы выделены, а переключаясь между масштабами Неделя и День, можно отделить круглосуточные события от всех остальных:

Общее впечатление от FullCalendar такое. Он был спроектирован, как легковесный инструмент, который дает вам полный контроль над приложением. В можете создать базовое приложение с минимумом возможностей, а затем добавлять необходимый функционал шаг за шагом. И вам будет из чего выбрать: настройки цвета и событий, настройка видов и т.д. Посетите страницу документации, чтобы увидеть полный список доступных функций.

Результаты

dhtmlxScheduler. Хорошо подойдет, если собственно планировщик – это то, что вам нужно. Пример интеграции с Google maps дает понять, что базовый функционал можно расширить в случае надобности. Страница документации содержит набор пошаговых руководств, что может пригодиться, если вы только начинаете работу с ним. На первых порах смутить может разве что обилие <div> контейнеров, нужных для его инициализации.

Kendo UI Scheduler. Kendo UI это довольно большой фреймворк с множеством полезных виджетов. Использовать только Kendo UI Scheduler, возможно, не самая лучшая идея, если вы не заинтересованы в других компонентах. Документация поможет разобраться с работой виджета даже новичкам, а набор демок, снабженных примерами кода поможет на первых порах. Создать базовый календарь, руководствуясь документацией не так сложно. Внешний вид по-умолчанию не так примечателен, однако все это легко поправимо.

FullCalendar. Хороший выбор для тех, кто знает, что именно он хочет получить. Здесь нет детального пошагового руководства, которое объясняло бы, что нужно делать, чтобы добиться той или иной цели. Только короткое руководство и страница документации.

Оригинал здесь: http://www.sitepoint.com/comparison-javascript-calendars-schedulers/

Front-end world around me

Thursday, April 21, 2016

Сравнение JavaScript планировщиков

Создание планировщика

dhtmlxScheduler

Kendo UI Scheduler

FullCalendar

Результаты