Функциональность календарей на любой веб-странице всегда является интересным дополнением, которое мы можем иметь от известных сборщиков дат до календарей, показывающих активность пользователей на нашем веб-сайте.
Для последнего мы можем использовать многие API, существующие в Интернете, и таким образом реализовать календарь публикаций, который показывает активность пользователей на нашем веб-сайте, и это можно сделать с помощью Календаря Google и его мощного API.
Включая API
Чтобы включить API Календаря Google на нашей странице, нам просто нужно вызвать его в заголовке нашего приложения, и мы должны загрузить его с помощью метода load следующим образом:
google.load ("визуализация", "1.1", {пакеты: ["календарь"]}); Как только это будет сделано, мы инициализируем основную функцию, которая будет иметь столбцы нашего календаря, используя метод addColumn и addRows, мы сегментируем на нужные нам годы, это мы делаем с помощью метода Date, который получит год, месяц и день, на которые мы дополнительно потратим активность, которая была в эту конкретную дату: var dataTable = new google.visualization.DataTable (); dataTable.addColumn ({тип: 'дата', id: 'дата'}); dataTable.addColumn ({type: 'number', id: 'publi'}); dataTable.addRows ([[новая дата (2014, 4, 13), 500], [новая дата (2014, 4, 14), 800]), [новая дата (2014, 3, 15), 400], [новая дата (2014, 3, 16), 900], [новая дата (2014, 3, 17), 600], [новая дата (2015, 9, 4), 400], [новая дата (2015, 9, 5), 400], [новая дата (2015, 9, 12), 250], [новая дата (2015, 9, 13), 900], [новая дата (2015, 9, 19), 800], [новая дата (2015), 9, 23), 900], [новая дата (2015, 9, 24), 500], [новая дата (2015, 9, 30), 900]]); Важно упомянуть, что в качестве примера мы используем статические значения, но каждый может адаптировать его к своим потребностям и сгенерировать их с помощью запросов в базе данных или с помощью некоторой инфраструктуры JavaScript, сгенерировать JSON и внедрить их, чтобы сделать это способом более динамичный Параметры календаря
После того, как мы инициализировали календарь, нам просто нужно добавить нужные параметры, эти параметры очищаются в формате JSON для удобства обработки и чтения с помощью API. Мы можем определить заголовок календаря, высоту, цвет ячеек и даже то, как мы хотим отображать дни недели:
var options = {title: "Календарь публикации", высота: 350, календарь: {cellColor: {stroke: '# 76a7fa', strokeOpacity: 0.5, strokeWidth: 1, }, dayOfWeekLabel: {fontName: 'Times-Roman', fontSize: 12, цвет: '# 1a8763', полужирный: true, курсив: true, }, dayOfWeekRightSpace: 10, daysOfWeek: 'DLMMJVS', }}; Наконец, с помощью метода draw мы отображаем календарь и в теле нашего HTML-кода помещаем div, который будет содержать созданный календарь: chart.draw (dataTable, options);После этого давайте посмотрим, как выглядит наш календарь.
То, как мы видим реализацию календаря публикаций на нашем веб-сайте, очень просто, теперь лишь часть каждого из них расширяет его функциональность и делает его более динамичным, чтобы адаптировать его к потребностям веб-сайта, в который он включен.
calendar_publicaciones.html 1, 79K 83 скачиваний
СТАТЬИ