✅ Utwórz kalendarz postów za pomocą JavaScript

Spisie treści

Funkcjonalność kalendarzy na dowolnej stronie internetowej jest zawsze ciekawym dodatkiem, od słynnych datowników po kalendarze pokazujące aktywność użytkowników na naszej stronie.
Do tego ostatniego możemy wykorzystać wiele API, które istnieją w Internecie i w ten sposób zaimplementować kalendarz publikacji, który pokazuje aktywność użytkowników w naszej witrynie i możemy to zrobić za pomocą kalendarz Google i jego potężne API.
W tym API
Aby uwzględnić API z kalendarz Google na naszej stronie wystarczy wywołać to samo w nagłówku naszej aplikacji i musimy ją załadować za pomocą metody load w następujący sposób:

 google.load ("wizualizacja", "1.1", {pakiety: ["kalendarz"]});

Po wykonaniu tej czynności inicjujemy główną funkcję, która będzie miała kolumny naszego kalendarza, używając metody dodaj kolumnę Tak Dodaj wiersze segmentujemy według potrzebnych lat, robimy to metodą Data, który otrzyma rok, miesiąc i dzień, w którym dodatkowo zaliczymy czynność, która miała miejsce w tym konkretnym dniu:

 var dataTable = new google.visualization.DataTable (); dataTable.addColumn ({typ: 'data', id: 'data'}); dataTable.addColumn ({typ: 'number', id: 'publi'}); dataTable.addRows ([[nowa Data (2014, 4, 13), 500], [nowa Data (2014, 4, 14), 800], [nowa Data (2014, 3, 15), 400], [nowa Data (2014, 3, 16), 900], [nowa Data (2014, 3, 17), 600], [nowa Data (2015, 9, 4), 400], [nowa Data (2015, 9, 5), 400], [nowa Data (2015, 9, 12), 250], [nowa Data (2015, 9, 13), 900], [nowa Data (2015, 9, 19), 800], [nowa Data (2015 , 9, 23), 900], [nowa Data (2015, 9, 24), 500], [nowa Data (2015, 9, 30), 900]]);

Warto wspomnieć, że jako przykład używamy wartości statycznych, ale każdy może je dostosować do swoich potrzeb i wygenerować je za pomocą zapytań do bazy danych lub za pomocą jakiegoś frameworka JavaScript wygeneruj JSON i zrobić wstrzyknięcie tego samego, aby zrobić to w bardziej dynamiczny sposób.
Opcje kalendarza
Po zainicjowaniu kalendarza musimy tylko dodać żądane opcje, opcje te są opróżniane w formacie JSON dla łatwości obsługi i czytania za pomocą API. Możemy zdefiniować tytuł kalendarza, wysokość, kolor komórek, a nawet sposób wyświetlania dni tygodnia:

 var options = {title: "Kalendarz postów", wysokość: 350, calendar: {cellColor: {stroke: '# 76a7fa', strokeOpacity: 0.5, strokeWidth: 1,}, dayOfWeekLabel: {fontName: 'Times-Roman', fontSize : 12, kolor: '# 1a8763', pogrubienie: prawda, kursywa: prawda,}, dayOfWeekRightSpace: 10, daysOfWeek: 'DLMMJVS',}};

Na koniec metodą draw wyświetlamy kalendarz i w treści naszego kodu HTML umieszczamy div, który będzie zawierał utworzony kalendarz:

 chart.draw (dataTable, opcje);

Po zakończeniu zobaczmy, jak wygląda nasz kalendarz.

POWIĘKSZAĆ

Jak widzimy wdrożenie kalendarza publikacji na naszej stronie jest niezwykle proste, teraz tylko od każdej osoby zależy rozszerzenie jego funkcjonalności i uczynienie go bardziej dynamicznym, aby dostosować go do potrzeb serwisu, w którym się znajduje.

calendar_publicaciones.html 1,79 tys 134 pliki do pobrania