Рендеринг интерактивного расписания с помощью JavaScript / JQuery

Question

Я создаю сайт с использованием JavaScript / ASP.NET / C # / CSS / HTML / Compact SQL server.

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

Для этого я хотел бы создать интерфейс JavaScript / JQuery.Базовая функциональность, которую я хотел бы иметь, такая же, как у Календаря Google (для начала хотя бы).

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

Затем пользователь нажимает кнопку «Отправить», и данные сохраняются в базе данных - с идентификатором пользователя, временем и продолжительностью начала события.и название события.

Мой вопрос довольно расплывчатый, но как лучше всего это сделать?Я точно знаю, что я хотел бы сделать, но мои проблемы:

• Создание интерактивного расписания с использованием JQuery / JavaScript - есть ли какие-либо существующие визуализации этого, из которых я мог бы работать, с аналогичной интеграцией базы данных/ idea?
• Как сохранить все эти данные в базе данных?Если бы это была форма, я мог бы просто передать данные, но я не уверен, как это можно сделать?

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

Answer 1

Уже есть несколько плагинов jQuery, которые могут делать то, что вы просите:

FullCalendar (обязательно проверьте все демо в нижней части страницы и, более конкретно, перетащите один )
Граничный календарь
DhtmlxSchedule (не jquery, но, вероятно, самый продвинутый)

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

Как я могу сохранить все эти данные в базе данных? Если бы это была форма, я может просто передать данные, но, как это не так, я не уверен, как это могло быть сделано?

Вам просто нужно сделать ajax-запрос с вашими данными. Не нужно использовать форму, просто отправьте сообщение или получите запрос на страницу обработки.

Answer 2

Я не уверен насчет структуры календаря, но вы можете использовать плагин jQuery Grid , хотя я рекомендую вам сгенерировать структуру календаря и исходную сторону сервера данных и, возможно, загрузить ее с помощью AJAX..

Все остальные взаимодействия могут выполняться с jQuery UI , включая функцию перетаскивания с AJAX для хранения обновлений данных.