Özel bir takvim uygulaması JavaScript, tarayıcı Doküman Object Model (DOM) ve müşteri odaklı veriler devam ediyor. Web Storage API'sini kullanarak - özellikle Local Storage - tamamen işlevsel, etkinlik odaklı bir takvim oluşturabilirsiniz.Bu, bir arka uç sunucuya veya veritabanına ihtiyaç duymadan.Bu derste sizi her adımdan uzaklaştırır ve HTML'yi sürükleyerek gelişmiş özellikleri uygulamanız için yapılandırır.

Neden Özel Bir Takvim Oluşturun?

Pre- built calendar kütüphaneleri ( FullCalendar veya DayPilot gibi) hızlı çözümler sunar, ancak bir tane çizer, kullanıcı arayüzü, veri işleme ve performans. Ayrıca, arsa JavaScript konseptleri ile el-on deneyimi kazanırsınız:0 object, event delegasyonu ve sonuç uygulama API'si size bir proje yönetimi aracına genişletilebilir, bir rezervasyon sistemi veya kişisel bir dergi.

HTML Structure Up the HTML Structure

Temiz bir HTML iskeletine başlayın. Takvimin üç ana bileşeni vardır: bir navigasyon bar (günde hücreler için), bir ağ konteyneri (günde hücreler için), ve bir olay girişi formu.UseANGFLT:2). semantic class isimleri kolay stil ve senaryo için.

<div id="calendar">
 <div class="calendar-header">
 <button id="prevBtn">&larr;</button>
 <h2 id="monthYear"></h2>
 <button id="nextBtn">&rarr;</button>
 </div>
 <div class="calendar-grid"></div>
 <div class="event-form">
 <input type="text" id="eventInput" placeholder="Add an event..." />
 <button id="saveEvent">Save</button>
 </div>
</div>

[FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=I)))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))

Takvimi CSS ile Styling

Temiz, duyarlı CSS, ham HTML'yi bir kullanılabilir arayüze dönüştürür. Takvim ızgara için bir CSS çubuğu kullanın, arayFLT:5).Aydan önce günler boyunca uzayçılar ekleyin. erişilebilirlik için, yeterli renk kontrastını sağlayın ve minimum stil tablosu aşağıdaki gibidir (inline veya bağlantılı).

.calendar-grid {
 display: grid;
 grid-template-columns: repeat(7, 1fr);
 gap: 2px;
}
.day-cell {
 min-height: 80px;
 border: 1px solid #ccc;
 padding: 4px;
 position: relative;
}
.day-cell.today {
 background-color: #eef;
}
.event {
 font-size: 0.8em;
 background: #4caf50;
 color: #fff;
 padding: 2px 4px;
 margin: 1px 0;
 border-radius: 3px;
 cursor: pointer;
}

Cep ekranlarında hücre boyutunu azaltmak ve olayı gizlemek ve sadece bir sayı göstermek için medya sorgularını kullanın.

Core JavaScript: Takvim Grid'i Gening

JavaScript'te tüm dinamik form yaşamları merkezi işlevi, 444DÜDÜŞÜN, ayın ilk gününü ve toplam gün sayısını hesaplar.Programın indeksi (0 = Pazar) almak için, o zaman ayın son gününden itibaren hücreler üretir.

Date Object ile çalışmak

[FONT=15] object is the back Bone of calendar logic. to get the last day of a month, use ESFLT:11). (Gelecek aydan 0 gün mevcut ayın son günü verir). Mağazalar mevcut ay ve yıl boyunca küresel değişkenlere göre, bu yüzden navigasyon onları güncelleyebilir.

Izgarayı inşa edin

function renderCalendar() {
 const grid = document.querySelector('.calendar-grid');
 grid.innerHTML = '';

 const firstDay = new Date(currentYear, currentMonth, 1).getDay();
 const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();

 // Add empty cells for days before the 1st
 for (let i = 0; i < firstDay; i++) {
 const empty = document.createElement('div');
 empty.className = 'day-cell empty';
 grid.appendChild(empty);
 }

 // Generate day cells
 for (let day = 1; day <= daysInMonth; day++) {
 const cell = document.createElement('div');
 cell.className = 'day-cell';
 cell.dataset.date = `${currentYear}-${currentMonth + 1}-${day}`;

 const dateSpan = document.createElement('span');
 dateSpan.textContent = day;
 cell.appendChild(dateSpan);

 // Highlight today
 const today = new Date();
 if (currentYear === today.getFullYear() && currentMonth === today.getMonth() && day === today.getDate()) {
 cell.classList.add('today');
 }

 // Load events for this date
 loadEvents(cell);

 grid.appendChild(cell);
 }
}

Başlıktaki ay/yıl görüntüsü Güncelleme: 03.

Aylar arası

Sonraki ve Sonraki düğmelere tıkla etkinlik dinleyiciler.Aptal veya decrementur:FLT:14) gerekirse yıl ayarlayın (örneğin, Aralık ayının Ocak ayında gelecek yıl Ocak ayında).

document.getElementById('prevBtn').addEventListener('click', () => {
 currentMonth--;
 if (currentMonth < 0) {
 currentMonth = 11;
 currentYear--;
 }
 renderCalendar();
});

document.getElementById('nextBtn').addEventListener('click', () => {
 currentMonth++;
 if (currentMonth > 11) {
 currentMonth = 0;
 currentYear++;
 }
 renderCalendar();
});

Ekstra kullanılabilirlik için, aurFLT:0) Bugün) mevcut ayya bakışı sıfırlayan ve mevcut gün vurgulayan bir düğme.

Storing & Yerel Depolama ile Yeniden İlişkili Etkinlikler

[FONT=0)Local Storage[[Dönetici:0)) , hayatta kalan tarayıcıların yeniden başlatıldığı basit bir anahtar değer mağazası sunar. tutarlı bir anahtar kalıbı kullanın, e.g., [[DövDÜŞÜNÜŞÜNCÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜN, JSONT: 9,00|DÜye ait JSONUÇÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜye ait bazı özellikleri içerir.

Yeni Bir Olayı Kurtarmak

Kullanıcı “Kaydet” düğmesine tıkladığında, giriş değerini ve şu anda seçilmiş tarihi yakalayın. (Bugün cep telefonunun tıklandığı bir tarih seçici veya tespit edebilirsiniz.) Yerel depolamadan bu tarih için mevcut herhangi bir olayyı alın, yeni olayı geri çıkarın.

function saveEvent(dateKey, eventText) {
 const existing = JSON.parse(localStorage.getItem(dateKey)) || [];
 existing.push({ id: Date.now(), text: eventText, time: new Date().toLocaleTimeString() });
 localStorage.setItem(dateKey, JSON.stringify(existing));
 renderCalendar(); // refresh to show new event
}

Etkinlikleri Day Hücrelerine Yükle

[FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=

function loadEvents(cell) {
 const dateKey = cell.dataset.date;
 const events = JSON.parse(localStorage.getItem(dateKey));
 if (!events) return;

 events.forEach(evt => {
 const eventDiv = document.createElement('div');
 eventDiv.className = 'event';
 eventDiv.textContent = evt.text;
 eventDiv.dataset.id = evt.id;
 // Optional: add a delete button
 cell.appendChild(eventDiv);
 });
}

Deleting ve Editing Events

Her olay elementine bir tıklama olayı ekleyin (veya bu tarih için diziyi kullanın, olayını 03: 00) filtreleyin ve yerel depolamaya güncellenen diziyi kurtarın. Editing olayı iki katına çıkarmak, yeni metin için hızlı bir şekilde ve diziyi güncelleyebilir.

Fonksiyonelliği geliştirmek için Gelişmiş Özellikler

Temel takvim çalışırken, kullanıcı deneyimini önemli ölçüde geliştiren özellikleri ekleyebilirsiniz.

Renklendirme Etkinlikleri Type-

Kullanıcıların kategori atamalarına izin verin (örneğin, iş, kişisel, sağlık). Yerel Depolama alanında aİLFLT:27) CSS'de sınıfları tanımlayın.

Dragand-Drop Rescheduling

HTML5 Drag ve Drop API'yi gün hücreleri arasındaki olayları hareket ettirin. Bir olay farklı bir günde düştüğü zaman, Yerel Depolama'daki tarihi anahtarı güncelleyin: olayın orijinal tarih serisinden çıkarın ve yeni tarih serisine itin.

Haftalar (özellikle / Aylık)

Bir olayı kurtardığınızda bir “Repeat” seçeneği ekleyin. yükleme işlevinde, mevcut tarih yeniden kabul kuralı (örneğin, her Pazartesi) ve olayı uygun şekilde görüntülemek için ayrı bir yerel depolama anahtarında göster.

Hafta View and Mini Takvim

Ay ve hafta görüşleriyle göz önünde bulundurun. Bir hafta görüşü, sadece mevcut haftanın günlerini daha fazla yatay alanla gösterir. Küçük bir ay görüş mini takvimi kullanıcıların hızlı bir şekilde atmasına yardımcı olur.

Takvim Sorumluluk ve Accessible yapmak

Çeşitli ekran boyutlarında takvim test edin.UseFLT:30), okuyucuları çok küçük ekranlarda dikey olarak indirmeye veya ⁇ 'yi azaltmaya sorgulayın. Tüm interaktif elemanların klavyeye erişilemez: girin ve Escape.UseFLT:32) ekran okuyucuların ay değişiklikleri ve etkinlik eklemelerini duyurması için düğmeler ve canlı bölgeler.

Performans ve Data Management Tips

  • [FONT:0)Batched Storage Yazs[[Dönetici: Her olay operasyonu için yerel depolama okumak / yazmak yerine, tüm ayın olaylarını bir JavaScript nesnesinde önbellek ve periyodik olarak sil.
  • [[Düzg:0)Limit Event Boyutu[[[Döntgen: Etkin olmayan nesnelere küçük tutun. büyük dizeleri veya ikili verileri depolamaktan kaçının.
  • [FONT=0]Fallback for Storage Limits[Dönetici: Yerel Depolama genellikle depolama neredeyse tam olarak 5-10 MB. Warn kullanıcıları tarafından kapılır.
  • [FONT=0) Büyük Veri kümeleri için IndexedDB'yi kullanın[[Dönetici: Eğer takviminiz binlerce olay tutarsa, [[Dönetici:2).IndexedDB) daha iyi performans ve sorgulama yetenekleri için.

Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç

JavaScript ve Local Storage ile özel bir takvim uygulaması oluşturmak, ön uç yeteneklerinizi keskinleştirmek için ödüllendirici bir projedir.You learn to handle the basic servers, and handle user effects.The codebase can be Extended with the server senkronizasyon, or integration with outside calendars via the front-end skills.You learn to handle the basic grid, add maintain and then floor on features like-and-en-en-en-en-dönüşümlü etkinlikler.

Daha fazla okuma için, [[DFLT:0)Storage API belgeleri[DFLT:2) ve Drop API[DFLT:3) MDN'de bulunan.