Скрипты

photo-fusion-система-обмена-изображениями Photo Fusion – система обмена изображениями. Это место, где вы можете делиться фотографиями бесплатно и без проблем, пользователи могут делиться своими...
vanguard-v2-1-0-система-авторизации-и-управление-пользователями Vanguard - это приложение PHP, написанное на основе Laravel PHP, которое позволяет владельцам сайтов быстро добавлять и активировать аутентификацию,...
my-loto-скрипт-моментальной-лотереи-рулетки Скрипт моментальной лотереи, где несколько человек вкладывают деньги в общий банк, через минуту этот банк достается одному человеку (победитель...

Для Photoshop

animation-glitch-photoshop-action Action для программы Photoshop, который генерирует видео ряд анимационных эффектов в виде помех на экране, из ваших изображений. Вы можете создать...
radiant-action-photoshop Экшен для программы Photoshop, создаёт эффект света и геометрических фигур, что поможет создать стильный модный вид вашему образу. Создавайте яркие и...
doomsday-action-экшен-для-photoshop Экшен для программы Photoshop, создаёт потрясающий эффект драматизма с глубокими тенями и световым контрактом. Отлично подойдёт при создании рекламных...
  • Главная
  • jQuery
  • Создание онлайн календаря событий с dhtmlxScheduler

Создание онлайн календаря событий с dhtmlxScheduler

dhtmlxScheduler

dhtmlxScheduler – это инструмент, написанный на JavaScript, который позволяет вам создать совой собственный онлайн календарь событий. В этой статье мы попытаемся создать приложение такого рода, а затем добавить к нему некоторые дополнительные функции. dhtmlxScheduler может получать данные средствами, json, XML, и использовать внешнею базу данных, но в этом случае у вас должен быть веб-сервер, например Apache или Nginx с PHP и MySQL.
Мы рассмотрим оба варианта хранения данных, так что вы можете выбрать способ который хотите.

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

Форматы данных.

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

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

ID – это идентификатор события. Число календаря.
start_date – это дата когда событие должно начаться. По умолчанию его формат: “%m/%d/%Y %H:%i”
end_date – дата когда событие заканчивается.
text - свойство содержит описание события.

Теперь вы можете создать последовательность событий.

Спойлер
var events = [
	{id:1, text:"Dentist", start_date:"08/11/2015 14:00",
	 end_date:"08/11/2015 15:00"},
	{id:2, text:"Conference", start_date:"08/12/2015 12:00",
	 end_date:"08/12/2015 19:00"},
	{id:3, text:"Kayaking", start_date:"08/15/2015 09:00",
	 end_date:"08/16/2015 22:00"}
];

База данных.

Прежде всего нам необходимо создать саму базу данных.

Спойлер
CREATE DATABASE schedule;
USE schedule;
CREATE TABLE `events` (
	`id` int(11) NOT NULL AUTO_INCREMENT,
	`start_date` datetime NOT NULL,
	`end_date` datetime NOT NULL,
	`text` varchar(255) NOT NULL,
	PRIMARY KEY (`id`)
);

Если у вас всё прошло успешно, мы можем продолжить.
Теперь нам нужно создать серверный скрипт, который будет инициализировать подключение к нашей базе данных.
Назовём этот файл data.php и поместим его в рабочий каталог.

Спойлер
<?php 
require_once("../codebase/connector/scheduler_connector.php");
 
$res=mysql_connect("localhost","root","");
mysql_select_db("schedule");
 
$conn = new SchedulerConnector($res);
 
$conn->render_table("events","id","start_date,end_date,text");
?>

Обратите внимание что функция mysql_connect () принимает имя пользователя и пароль в качестве второго и третьего параметра, так что не забудьте поменять их на свои.
Этот код используется dhtmlxScheduler для обеспечения доступа к внешним источникам данных.
Далее он подключается к MySQL и выбирает нашу созданную ранее базу данных.
И наконец, он задаёт колонки которые мы создали в качестве данных для визуализации.
Итак, мы закончили конфигурирования базы данных, что означает что можно приступить к инициализации планировщика.

Инициализация планировщика.

Теперь давайте создадим HTML файл который будет содержать необходимый код для инициализации dhtmlxScheduler.
Файл будет называться index.html, в нём нужно подключить, необходимы файлы.

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

Теперь мы можем определить необходимые div контейнеры.
Поместите следующий код между тегами <body>.

Спойлер
<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>

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

<style media="screen">
	html, body{
		margin:0px;
		padding:0px;
		height:100%;
		overflow:hidden;
	}   
</style>

И вот теперь мы можем инициализировать планировщик.

scheduler.init('scheduler_here', new Date(),"month");

В этом коде init() который инициализирует планировщик внутри div контейнера scheduler_ here, далее устанавливает текущую дату в качестве начальной.
Вот и всё что вам потребуется для создания календаря.
Включите JavaScript и CSS файлы, определите DIV и стиль, запустить конструктор и вы получите ваше приложение.

dhtmlxScheduler 1

С помощью встроенного источника данных.

Используя массив который мы создали ранее, можно применить такой код.

scheduler.parse(events, "json");

Этот метод принимает два параметра: имя источника данных (в нашем случае events массив) и формат данных.
Обновите страницу и увидите следующий результат.
dhtmlxScheduler 2
Вы уже можете протестировать ваш планировщик, добавить новые задания и так далее.
Но используя встроенный источник данных нет возможности сохранить ваши данные, все события которые вы добавили, исчезнут после обновления страницы.
Но не переживайте у нас есть база данных, давайте используем её.

База данных.

Чтобы избежать исчезновения данных мы можем использовать базу данных.
Прежде всего вы должны изменить формат даты по умолчанию.
Поместите следующий код перед scheduler.init():

scheduler.config.xml_date="%Y-%m-%d %H:%i";

Теперь взамен scheduler.init() вы должны использовать код который позволит загружать существующие события из базы данных и сохранять их.

Спойлер
/* loading data from the server */
scheduler.load("data.php");
/* saving data */
var dp = new dataProcessor("data.php");
dp.init(scheduler);

Мы исползуем метод load() для загрузки целей.
Он принимает путь к скрипту на стороне сервера в качестве параметра.
После чего мы используем dataProcessor чтобы сохранить данные.

Основные характеристики планировщика. Одно из возможных путей для создания нового события это двойное нажатие на соответствующую область календаря.
После этого вы увидите новое окно для указания события.
dhtmlxScheduler 3
У вас есть возможность добавить описание для вашего мероприятия, установить правильные начальную и конечную даты.
При нажатии на кнопку сохранить ваше событие появиться на экране

dhtmlxScheduler 4

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

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

Изменения внешнего вида планировщика. Давайте начнём с простого. Кроме стандартной, есть в наличии ещё три шкурки: глянцевая, классическая и плоская.
Всё что вам нужно сделать, чтобы установить другой скин, это подключить другой CSS файл.
Например если вы измените это:

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

Или этот:

<link rel="stylesheet" href="/./codebase/dhtmlxscheduler_flat.css">

Вы будите изменять скин по умолчанию.

Экспорт в PDF.

Ещё одна полезная функция экспорт.
Есть возможность экспортировать свой планировщик в различные форматы, такие как PNG, PDF, Excel и так далее.
Давайте сконцентрируемся на PDF, так как этот параметр формата предоставляет вам удобные свойства.
Для того чтобы добавить функцию экспорта, вы должны подключить необходимый JavaScript файл к проекту.

<script src="http://export.dhtmlx.com/scheduler/api.js"></script>  

Следующим шагом будет добавление кнопки экспорт на вашу страницу.

<input value="Export" type="button" onclick="exportTo()">

Вы можете разместить эту кнопку под планировщиком для тестирования.
Но не забудьте изменить значение по умолчанию `height`, который 100% изначально.
Например:

<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:90%; margin-bottom: 10px'>

Вот как это выглядит:
dhtmlxScheduler 6
Когда вы нажимаете на кнопку то вызывается функция exportTo(), и используется метод scheduler.exportToPDF().
В нём вы можете определить свойства выходного файла.

-name – имя выходного файла.
-format – определяет формат выходного файла.
-orientation – определяет ориентацию экрана, есть два возможных значения “portrait” и “landscape”.
-zoom – содержит число, которое задаёт коэффициент масштабирования.
-header и footer – это строки которые будут добавлены в выходной файл, здесь можно использовать HTML код.

С помощью этих свойств вы можете определить экспортную функцию.

Спойлер
function exportToPdf() {
	scheduler.exportToPDF({
		name: "my_schedule.pdf",
		format:"A4",
		orientation:"landscape",
		zoom:1,
		header:"<h1>August, 2015</h1>",
	});
};

Это всё что вам нужно чтобы преобразовать ваши данные в PDF формат.

Вывод

Использование dhtmlxScheduler для создания планировщика событий, это выбор автора, так как он бесплатен (хотя есть и платная версия), прост в использовании и имеет современный внешний вид. Нет намеренья заставить вас использовать именно эту библиотеку, просто хотелось поделиться положительным опытом работы с dhtmlxScheduler, что позволило создать приложение для управления временем в несколько простых шагов.

В интернет магазине 3D оборудования, вы найдёте большой выбор домашних 3d принтеров, а также к ним расходные материалы и запасные части. Есть бесплатная доставка!

 

 
  • Просмотров: 2387
  1. Комментарии (0)

  2. Add Yours

Комментарии (0)

Комментарии отсутствуют

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

Оставить комментарий в качестве гостя. Зарегистрироваться либо авторизоваться.
Вложения (0 / 3)
Поделиться вашим местоположением

Векторная графика

плашки-для-рекламных-текстов Набор ярких плашек для рекламных текстов в векторном формате, которые значительно выделят ваш текст на общем фоне. Формат файлов: AI / EPS /...
start-up-rockets-–-ракеты-в-векторе Набор векторных изображений, разного вида летящих ракет. Можно использовать при создании анимации и рекламных баннеров. Формат файлов:...
pop-art-man-векторные-мужчин-в-стиле-поп-арт Набор изображений в векторном формате, яркие иллюстрации мужчин в модном стиле поп арт, отлично подойдёт при создании рекламных баннеров. Формат...

Растовая графика

атлетика-и-бодибилдинг-–-фото-клипарт Набор из 32 изображений высокого качества на тему атлетики и бодибилдинга. Отлично подойдут для рекламных флаеров, баннеров и слайдеров на сайтах...
интернет-технологии,компьютер,гаджеты-–-фото-клипарт Набор из 25 изображений высокого качества, различные интернет технологии, компьютеры, гаджеты. Отлично подойдет для слайд-шоу. Размер 4800 на 3200 px....
бизнес-леди-–-набор-фото-клипарта Набор из 15 изображений высокого качества с красивой блондинкой, бизнес-леди. Эти изображения отлично подойдут для использования в презентациях,...

VLVIT.RU - Сайт для людей увлекающиеся web дизайном, современными интернет технологиями, графическими программами Adobe Photoshop, Illustrator.

2017г.