Oman kalenterisovelluksen rakentaminen on erinomainen tapa syventää ymmärrystäsi JavaScriptistä, selaimesta Document Object Model (DOM) ja asiakas-side-datan pysyvyydestä. Käyttämällä Web Storage API:tä . Erityisesti Paikallista tallennusta ... Voit luoda täysin toimivan, tapahtumalähtöisen kalenterin, joka toimii kokonaan selaimessa tarvitsematta taustapalvelinta tai tietokantaa. Tämä opetusohjelma kävelee sinut läpi jokaisen vaiheen, HTML:n jäsentämisestä edistyneisiin ominaisuuksiin, kuten vedä ja pudota tapahtumahallintaan.

Miksi rakentaa oma kalenteri?

Esivalmistetut kalenterikirjastot (kuten FullCalendar tai DayPilot) tarjoavat nopeita ratkaisuja, mutta yhden rakentaminen tyhjästä antaa sinulle täydellisen hallinnan käyttöliittymään, tietojen käsittelyyn ja suorituskykyyn. Saat myös käytännön kokemusta JavaScript-ydinkäsitteistä, kuten [ objektista, tapahtumalähetystä ja [ API:sta. Tuloksena olevaa sovellusta voidaan laajentaa projektinhallintatyökaluksi, varausjärjestelmäksi tai henkilökohtaiseksi päiväkirjaksi.

HTML-rakenteen asetukset

Aloita puhtaalla HTML-luurangolla. Kalenterissa on kolme pääkomponenttia: navigointipalkki (vaihteleville kuukausille), ruudukkokontti (päiville) ja tapahtumasyöte. Käytä elementtejä, joilla on semanttiset luokkanimet helppoon muotoiluun ja skriptointiin.

<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>

tulee asumaan dynaamisesti JavaScript. Mobiiliystävällisen layoutin osalta harkitse 7-sarakeisen CSS-ruudun käyttöä (yksi jokaista viikonpäivää varten). Varaa ensimmäinen rivi päivänimille (Sun.Sat).

Kalenterin muotoilu CSS: llä

Puhdista, reagoiva CSS muuntaa raaka HTML käyttöliittymä. Käytä CSS-verkko kalenteriruudukko, asetus . Lisää välimuistit päivää ennen ensimmäistä kuukautta. Esteettömyys, varmistaa riittävä väri kontrasti ja sisällyttää [ tyylejä interaktiivisia elementtejä. Pienin tyylisheet on esitetty alla (inline tai linkitetty).

.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;
}

Käytä mediakyselyjä pienentääksesi solukokoa kapeilla näytöillä, ja harkitse tapahtumatekstin piilottamista ja vain määrän esittämistä.

Core JavaScript: Kalenteriruudukon luominen

Kaikki dynaamiset renderointi-elämät JavaScriptissä. Keskustoiminto [ laskee kuukauden ensimmäisen päivän ja päivien kokonaismäärän. Käytä arkipäivän indeksiä (0 = sunnuntai). Sitten luo soluja silmukkaan kuukauden viimeiseen päivään.

Työskentely päivämäärän kohteen kanssa

-objekti on kalenterilogiikan selkäranka. Kuukauden viimeisen päivän saamiseksi käytetään (seuraavan kuukauden päivä 0 antaa kuluvan kuukauden viimeisen päivän). Säilytetään nykyinen kuukausi ja vuosi globaaleissa muuttujissa, jotta navigointi voi päivittää ne.

Ruuduston rakentaminen

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);
 }
}

Päivitä kuukausi/vuosi-näyttö otsikossa:

Liitä klikkaa tapahtuma kuuntelijat Edellinen ja Seuraava painikkeet. Increment tai decrement , säätämällä vuotta tarvittaessa (esim. joulukuun jälkeen tulee tammikuu ensi vuonna). Päivitettyäsi muuttujat, soita uudelleen .

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();
});

Lisäkäytettävyyden vuoksi lisää []Tänään[]-painike, joka nollaa näkymän kuluvaan kuukauteen ja korostaa nykyistä päivää.

Tapahtuman varastointi ja noutaminen paikallistallenteella

]Paikallinen tallennus tarjoaa yksinkertaisen avainarvokaupan, joka selviää selaimen uudelleenkäynnistyksestä. Käytä johdonmukaista avainkuviota, esim. , jossa säilytetään tapahtumakohteiden JSON-rakenteita. Sisällytä ominaisuuksia kuten , [], [[] ja .

Uuden tapahtuman tallentaminen

Kun käyttäjä napsauttaa ...Tallenna painiketta, napsauta syöttöarvo ja valittu päivä. (Voit lisätä päivämäärän poimija tai havaita, mikä päiväsolu on napsautettu.) Nouda kaikki olemassa olevat tapahtumat kyseisen päivämäärän paikallisesta varastointi, paina uutta tapahtumaa, sitten tallenna takaisin.

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
}

Ladataan tapahtumia päiväsoluihin

sisällä, jokaisen ei-tyhjän päiväsolun osalta, soita funktioon, joka kyselee kyseisen päivämäärän avainta paikalliselta tallennustilalta. Jos tapahtumia on olemassa, silmukka niiden kautta ja liitä soluun elementtejä.

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);
 });
}

Tapahtumien poistaminen ja muokkaaminen

Voit poistaa klikkaamalla tapahtumaa kuhunkin tapahtumaelementtiin (tai käyttämällä tapahtumalähetystä). Hae matriisi kyseisenä päivänä, suodata tapahtuma ja tallenna päivitetty matriisi takaisin Paikalliseen Tallennukseen. Muokkaus voidaan tehdä kaksoisnapsauttamalla tapahtumaa, pyytämällä uutta tekstiä ja päivittämällä matriisi.

Edistyneet ominaisuudet parantaa toiminnallisuutta

Kun peruskalenteri toimii, voit lisätä ominaisuuksia, jotka parantavat merkittävästi käyttäjäkokemusta.

Värikoodaustapahtumat tyypeittäin

Salli käyttäjien määrittää luokat (esim. työ, henkilökohtaiset, terveys). Säilytä kenttä paikallisvarastossa. CSS:ssä määrittele luokat kuten , ja käytä niitä dynaamisesti.

Vedä ja pudota Uudelleensuunnittelu

Käytä HTML5 Drag ja Drop API siirtää tapahtumia välillä päivä solujen. Kun tapahtuma pudotetaan eri päivänä, Päivitä päivämäärän avain Paikallista varastointia: Poista tapahtuma alkuperäisestä päivämäärän array ja työnnä se uuteen päivämäärän.

Toistuvat tapahtumat (viikoittain / kuukausittain)

Lisää ...Repeat...-vaihtoehto, kun tallennat tapahtuman. Lataustoiminnossa laske, jos nykyinen päivämäärä vastaa toistosääntöä (esim. joka maanantai) ja näytä tapahtuma sen mukaisesti. Tallenna toistosäännöt erillisessä Paikallista varastointiavainta varten päällekkäisyyden välttämiseksi.

Viikonkatselu ja Mini-kalenteri

Jos haluat valita kuukauden ja viikon välin. Viikonnäkymä näyttää vain nykyisen viikon. Päivät, joissa on enemmän vaaka-avaruutta. Pieni kuukausinäyttöinen minikalenteri auttaa käyttäjiä hyppäämään mihin tahansa päivämäärään nopeasti.

Kalenterin tekeminen reagoivaksi ja helposti saatavaksi

Testaa kalenteri eri kokojen avulla. Käytä kyselyjä pinota päiväsoluja pystysuunnassa hyvin pienille näytöille tai vähentää pehmusteita. Varmista, että kaikki interaktiiviset elementit ovat näppäimistön ulottuvilla: liitä tapahtumia Enter and Escape. Käytä määritteitä painikkeilla ja live alueilla näytön lukijoille ilmoittaa kuukauden muutoksia ja tapahtumalisäyksiä.

Suorituskyky ja tiedonhallinta Vinkkejä

  • Perustetut tallennuskirjat[: Ei lueta / kirjoita Paikallinen tallennus jokaisen tapahtuman operaatio, välimuisti koko kuukauden tapahtumia JavaScript-objekti ja huuhdella muutoksia määräajoin.
  • Limit Tapahtuman koko[: Pidä tapahtuma objektit pieninä. Vältä suurten merkkijonojen tai binääritietojen tallentamista.
  • Varastointirajat : Paikallisvarasto on tyypillisesti rajattu 5.
  • Käytä IndexedDB suuria datasetteja[]: Jos kalenterissasi on tuhansia tapahtumia, harkitse Indeksoitu DB[ parantaa suorituskykyä ja kyselyn ominaisuuksia.

Päätelmät

Luomalla mukautetun kalenterisovelluksen JavaScript- ja Paikallista varastointia varten on palkitseva projekti, joka terävöittää etupään taitojasi. Opet manipuloimaan DOM-järjestelmää, toimimaan päivämääriä, hallitsemaan tilaa ilman palvelinta ja käsittelemään käyttäjien vuorovaikutusta. Koodikantaa voidaan laajentaa palvelimen synkronoinnin, pilvivarmistuksen tai integroinnin avulla []Google Kalenteri API[]. Aloita perusruudusta, lisää pysyvyyttä ja sitten kerrosta ominaisuuksista kuten vedä-ja-drop ja toistuvat tapahtumat. Tuloksena on räätälöity kalenteri, joka käyttäytyy täsmälleen niin kuin tarvitset.

Lisätietoja saat Storage API-dokumentaatiosta ja Drag and Drop API[] MDN:stä. Happy coding!