Beitragskalender mit JavaScript erstellen

Die Funktionalität der Kalender auf jeder Webseite ist immer eine interessante Ergänzung, von den berühmten Datepickern bis hin zu Kalendern, die die Benutzeraktivität auf unserer Website anzeigen.
Für letzteres können wir viele der im Internet existierenden APIs verwenden und auf diese Weise einen Veröffentlichungskalender implementieren, der die Aktivitäten der Benutzer innerhalb unserer Website anzeigt und dies mit uns tun können Google Kalender und seine leistungsstarke API.
Einschließlich der API
Um die API von . einzuschließen Google Kalender auf unserer Seite müssen wir nur im Header unserer Anwendung dasselbe aufrufen und es mit der Methode load wie folgt laden:

 google.load ("Visualisierung", "1.1", {Pakete: ["Kalender"]});

Sobald dies erledigt ist, initialisieren wir die Hauptfunktion, die die Spalten unseres Kalenders enthält, mit der Methode Spalte hinzufügen Ja addRows wir werden nach den Jahren, die wir brauchen, segmentieren, wir tun dies mit der Methode Datum, die das Jahr, den Monat und den Tag erhält, an denen wir zusätzlich die Aktivität übergeben, die an diesem bestimmten Datum stattgefunden hat:

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

Es ist wichtig zu erwähnen, dass wir als Beispiel statische Werte verwenden, aber jeder kann sie an seine Bedürfnisse anpassen und diese durch Datenbankabfragen oder mit einem Framework von . generieren JavaScript generieren a JSON und tun Sie die Injektion des gleichen, um es dynamischer zu machen.
Kalenderoptionen
Nachdem wir den Kalender initialisiert haben, müssen wir nur noch die gewünschten Optionen hinzufügen, diese Optionen werden im Format geleert JSON für die einfache Handhabung und das Lesen mit der API. Wir können den Titel des Kalenders, die Höhe, die Farbe der Zellen und sogar die Darstellung der Wochentage festlegen:

 var options = {title: "Post Calendar", height: 350, calendar: {cellColor: {stroke: '# 76a7fa', StrokeOpacity: 0.5, StrokeWidth: 1,}, dayOfWeekLabel: {fontName: 'Times-Roman', fontSize : 12, Farbe: '# 1a8763', fett: true, kursiv: true,}, dayOfWeekRightSpace: 10, daysOfWeek: 'DLMMJVS',}};

Schließlich zeigen wir mit der draw-Methode den Kalender an und platzieren im Body unseres HTML das div, das den erstellten Kalender enthält:

 chart.draw (dataTable, Optionen);

Wenn dies abgeschlossen ist, sehen wir uns an, wie unser Kalender aussieht.

VERGRÖSSERN

Wie wir sehen, einen Publikationskalender auf unserer Website zu implementieren, ist extrem einfach, jetzt ist es nur noch jedem selbst überlassen, seine Funktionalität zu erweitern und dynamischer zu gestalten, um ihn an die Bedürfnisse der Website, in die er eingebunden ist, anzupassen.

calendar_publicaciones.html 1,79K 134 Downloads