✅ Създайте календар за публикации с JavaScript

Съдържание

Функционалността на календарите на която и да е уеб страница винаги е интересно допълнение, което можем да имаме от известните избирачи на дати до календари, които показват активността на потребителите на нашия уебсайт.
За последните можем да използваме много от приложните програмни интерфейси (API), които съществуват в Интернет и по този начин да внедрим календар за публикации, който показва активността на потребителите в нашия уебсайт и можем да направим това с Google Календар и неговия мощен API.
Включително API
За да включите API на Google Календар в нашата страница трябва само да извикаме същото в заглавката на нашето приложение и трябва да го заредим с метода на зареждане, както следва:

 google.load ("визуализация", "1.1", {пакети: ["календар"]});

След като това е направено, ние инициализираме основната функция, която ще има колоните в нашия календар, като използваме метода addColumn Y addRows ще сегментираме според нужните години, правим това с метода Дата, който ще получи годината, месеца и деня, където допълнително ще преминем дейността, извършена на тази конкретна дата:

 var dataTable = нова google.visualization.DataTable (); dataTable.addColumn ({type: 'date', id: 'date'}); 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: "Post Calendar", височина: 350, календар: {cellColor: {stroke: '# 76a7fa', strokeOpacity: 0.5, strokeWidth: 1,}, dayOfWeekLabel: {fontName: 'Times-Roman', fontSize : 12, цвят: '# 1a8763', удебелен: вярно, курсив: вярно,}, dayOfWeekRightSpace: 10, daysOfWeek: 'DLMMJVS',}};

Накрая с метода за теглене показваме календара и в тялото на нашия HTML поставяме div, който ще съдържа създадения календар:

 chart.draw (dataTable, опции);

След като приключим, нека видим как изглежда нашият календар.

Увеличете

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

calendar_publicaciones.html 1,79K 134 Изтегляния