Today I built the following features

Added clear dates function
Fixed a bug to do with leap years
Started to control the calendar using an object
Started to add different themes

Tomorrow I’m going to try and build

A totally different theme
Highlight the range as you’re hovering

My goal today was to allow the user to cycle through future months and also set a variable for the amount of months to initially show.

Cycling through future months was pretty easy. I had already created a function which would take a month integer and return a calendar month. All I had to do was choose how many months to render when the user requested more months.

I also built the input where the formatted date would be entered when the user clicked a start and end date. This was easy as i previously added data attributes to the cells so when the user clicks one I could just retrieve the date.

Tomorrow I will build:

• Clear functionality
• Style the inputs better
• Start adding options for when the calendar is instantiated

To view my Codepen visit: https://codepen.io/danboswell/pen/VoWvwe

I’m on to day 2 of building my vanilla Javascript calendar, my code is getting messy but I’m learning a lot about the Javascript and dynamically creating elements.

My plan for day 2 was to try and get multiple months working as well as being able to select a date range.

Some of the new features include:
Selecting a start and end day
Highlighting the selected range
Selecting the initial number of months to show
Stop the user from selecting a range in the past
Added data attributes to each cell containing date information

Some of the next features I’ll be building are:
Allowing the user to cycle through future months
Creating the start/end inputs and populate them
Allow the user to clear dates

You can see my Codepen here -https://codepen.io/danboswell/pen/VoWvwe/

I’ve challenged myself to build a date-picker in vanilla Javascript. It’s part of my 100 days of code challenge, where I hope to code for at least one hour a day on my own projects.

I picked Javascript as my language of choice to start work on, it’s one of my weakest areas in web development.

My inspiration for this calendar is from Airbnb. I want to create something simple to use and looks minimalist. However, styling is only half the battle.

Day 1 — I have managed to get the calendar to render each month with the correct amount of days, and you can use a select input to choose the month you want to see. In it’s current form the calendar just appends new months to the bottom, I have to try and figure out how to remove the existing table rows before appending the new ones.

When the dates get drawn on the calendar, I made sure I added the date object to the cell as a data attribute, which will hopefully make it easier to return the dates to the user when they select it.

// function which takes an integer as the argument and creates a table for the month you're on.

function buildCal(month) {
  let daysInMonth = new Date(2019, parseInt(month)+1, 0).getDate();
  let startDay = new Date(year, month, 1).getDay();
  let weekIndex = cal.getElementsByTagName('tr').length;
  let day = startDay == 0 ? 7 : startDay;
  var row = cal.insertRow(weekIndex);
  
  /* creates the blanks at the start of the month */
  for(let ed = 1; ed < day; ed++) {
    row.insertCell(-1);
  }
  
  /* loops through the days adding cells and creating new rows */
  for(let dim = 1; dim <= daysInMonth; dim++) {
    let cell = row.insertCell(-1);
    cell.setAttribute('data-date',new Date(year, month, dim));
    cell.innerHTML = dim;
    day++;
    if(day == 8) {
      weekIndex++;
      row = cal.insertRow(weekIndex);
      day = 1;
    }
  }
}

What next?

Tomorrow, I will be developing the 3 month view, I want this calendar to scroll vertically to accommodate a mobile-first approach. I will also create the inputs that automatically get filled in when the user selects a date from the picker.