kunal-c-s-shinde/calendar-using-javascript

Calendar

This is the solution to the Calendar using vanilla javascript.

A simple and easy plugin to create a calendar and add events to it.

Usage

Including files

You need to include : - The javascript file <script src="./script.js" ></script> - The stylesheet

Simple Usage

let nav=0; let clicked = null; let events = localStorage.getItem('events') ? JSON.parse(localStorage.getItem('events')) : [];

const calendar = document.getElementById('calendar'); const newEventModal = document.getElementById('newEventModal'); const deleteEventModal = document.getElementById('deleteEventModal'); const backDrop = document.getElementById('modalBackDrop'); const eventTitleInput = document.getElementById('eventTitleInput'); const weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

Calendar event

function openModal(date){ clicked = date;

 const eventForDay = events.find(e => e.date === clicked);

 if(eventForDay){
      document.getElementById('eventText').innerText = eventForDay.title;
      deleteEventModal.style.display = 'block';
 }else{
      newEventModal.style.display = 'block';
 }

 backDrop.style.display = 'block';

}

function load(){ const dt = new Date();

if(nav !==0 ){
      dt.setMonth(new Date().getMonth() + nav);
}

const day = dt.getDate();
const month = dt.getMonth();
const year = dt.getFullYear();

const firstdayOfMonth = new Date(year, month, 1); const daysInMonth = new Date(year, month+1, 0).getDate();

const dateString = firstdayOfMonth.toLocaleDateString('en-us',{ weekday: 'long', year: 'numeric', month: 'numeric', day: 'numeric', }); const paddingDays = weekdays.indexOf(dateString.split(', ')[0]);

document.getElementById('monthDisplay').innerText = ${dt.toLocaleDateString('en-us', {month: 'long'} )} ${year};

 calendar.innerHTML = '';

for(let i=1; i<= paddingDays + daysInMonth; i++){ const daySquare = document.createElement('div'); daySquare.classList.add('day');

    const dayString = `${ month + 1 }/${ i - paddingDays }/${ year }`;

    if (i > paddingDays){
      daySquare.innerText = i - paddingDays;
      const eventForDay = events.find(e => e.date === dayString);

      if(i - paddingDays === day && nav === 0){
           daySquare.id = 'currentDay' ;
      }

      if(eventForDay){
           const eventDiv = document.createElement('div');
           eventDiv.classList.add('event');
           eventDiv.innerText = eventForDay.title;
           daySquare.appendChild(eventDiv);
      }

      daySquare.addEventListener('click', () => openModal(dayString));
    }else{
      daySquare.classList.add('padding');
    }

    calendar.appendChild(daySquare);

} }

function closeModal(){ eventTitleInput.classList.remove('error'); newEventModal.style.display = 'none'; deleteEventModal.style.display = 'none'; backDrop.style.display = 'none'; eventTitleInput.value = ''; clicked = null; load(); }

Save event

function saveEvent(){ if(eventTitleInput.value){ eventTitleInput.classList.remove('error');

      events.push({
           date : clicked,
           title : eventTitleInput.value,
      });

      localStorage.setItem('events', JSON.stringify(events));
      closeModal();
}else{
      eventTitleInput.classList.add('error');
}

}

Delete event

function deleteEvent(){ events = events.filter(e => e.date !== clicked); localStorage.setItem('events', JSON.stringify(events)); closeModal(); }

initButtons

function initButtons(){ document.getElementById('nextButton').addEventListener('click', () => { nav++; load(); });

 document.getElementById('backButton').addEventListener('click', () => {
      nav--;
      load();
 });

 document.getElementById('saveButton').addEventListener('click', saveEvent);
 document.getElementById('cancelButton').addEventListener('click', closeModal);
 document.getElementById('deleteButton').addEventListener('click', deleteEvent);
 document.getElementById('closeButton').addEventListener('click', closeModal);

}

Built with

• HTML
• CSS
• Javascript

Author

Kunal C. Shinde