✅ JavaScript ile gönderi takvimi oluşturun

İçindekiler

Herhangi bir web sayfasındaki takvimlerin işlevselliği her zaman ilginç bir ektir, ünlü veri toplayıcılardan web sitemizde kullanıcı etkinliğini gösteren takvimlere kadar sahip olabiliriz.
İkincisi için internette bulunan birçok API'yi kullanabilir ve bu şekilde web sitemizdeki kullanıcıların etkinliğini gösteren bir yayın takvimi uygulayabiliriz ve bunu aşağıdakilerle yapabiliriz. Google Takvim ve güçlü API'si.
API dahil
API'sini dahil etmek için Google Takvim sayfamızda sadece uygulamamızın başlığında aynısını çağırmamız gerekiyor ve bunu load yöntemi ile aşağıdaki gibi yüklememiz gerekiyor:

 google.load ("görselleştirme", "1.1", {paketler: ["takvim"]});

Bu yapıldıktan sonra, yöntemi kullanarak takvimimizin sütunlarına sahip olacak ana işlevi başlatıyoruz. addColumn Y addRows İhtiyacımız olan yıllara göre segmentlere ayıracağız, bunu yöntemle yapıyoruz Tarih, bu belirli tarihte gerçekleşen etkinliği ek olarak geçireceğimiz yılı, ayı ve günü alacak:

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

Örnek olarak statik değerler kullandığımızı belirtmekte fayda var, ancak herkes bunu kendi ihtiyaçlarına göre uyarlayabilir ve bunları veritabanı sorguları veya bazı çerçeveler aracılığıyla üretebilir. JavaScript oluşturmak JSON ve daha dinamik bir şekilde yapmak için aynı enjeksiyonu yapın.
Takvim seçenekleri
Takvimi başlattığımızda, sadece istediğimiz seçenekleri eklememiz gerekiyor, bu seçenekler formatta boşaltılıyor. JSON API ile kullanım ve okuma kolaylığı için. Takvimin başlığını, yüksekliğini, hücrelerin rengini ve hatta haftanın günlerini nasıl görüntülemek istediğimizi tanımlayabiliriz:

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

Son olarak draw yöntemiyle takvimi görüntülüyoruz ve HTML'mizin gövdesine oluşturulan takvimi içerecek div'i yerleştiriyoruz:

 chart.draw (dataTable, seçenekler);

Bu bittiğinde, takvimimizin neye benzediğini görelim.

BÜYÜT

Bir yayın takvimini web sitemizde nasıl uyguladığımızı görmek son derece basittir, şimdi işlevselliğini genişletmek ve onu dahil olduğu web sitesinin ihtiyaçlarına göre daha dinamik hale getirmek yalnızca kişiye kalmıştır.

Calendar_publicaciones.html 1,79K 134 İndirilenler