Skip to contentSkip to author details

Creating an Aurelia Bootstrap Calendar Of Events - Part 1 Getting Started and Overriding Bootstrap

Written by Jeff Tyler

I needed a calendar as a centerpiece for an application that I am working on. After looking through the internet for something that I liked and not finding it. I decided to do what all sane programmers do. Build my own. So let's get started. YeeHaw!!
Here are the requirements that I have set for myself, and how I plan to fix it.

  • Must be responsive: for this I am going to use bootstrap. 7 days on a week for a full screen and 2 for small.
  • Two Headers: header 1: Monday 31. Header 2: Useful Information
  • Must be able to display multiple events on a given day.

Few events truly span multiple days. There is usually a beginning and end of the first day and a beginning and end of the second day. So this is how i intend to treat it.

Getting Started.

I like being explicit so I am going to list my assumptions and what I have done to meet them. If you have the same set up as me, then you can follow exactly, if yours is different then do your own thing where we deviate.

Assumptions
  1. You have an Aurelia Application set up and running.
  2. you have bootstrap 3 less files
  3. You have a LESS compiler set up
  4. You have moment.js
  5. You are using TypeScript

My set up
1. .netcore C# aurelia app by running dotnet new aurelia
2. dotnet automatically includes bootstrap through npm when you create a new aurelia app.
3. less-loader through webpack
4. npm install moment -save

Steps involved
  1. Change bootstrap from a grid of 12 to a grid of 14.
  2. Create an custom element for aurelia.
  3. Create grids and rows to hold the dates
  4. Populate the grids with dates
  5. Remove padding for rows inside of the calendar.
1. Change bootstrap from a grid of 12 to a grid of 14.

There are seven days in a week. So it would make since for seven columns to exist in a row. A seven column bootstrap doesn't give much flexibility for the rest of the application to use for layouts. If we treat the rows and columns inside of the calendar differently then you have a lot of repeated CSS to handle the special case. Twelve columns don't work well when you need seven columns. However with fourteen columns the rest of the application is a little more flexible and you have one grid system throughout everything so there isn't a special case. So we are going to increase the number of columns for bootstrap using LESS.

So first we are going to create a file called myLess.less

open the file and add these three lines of code.

@import '~bootstrap/less/variables.less';  
@grid-columns: 14;
@import '~bootstrap/less/bootstrap.less';

Your path may be different depending on what you use to compile the less files. The tilda in this case tells webpack to look in node_modules.

@import is a less command that allows us to reference other less files.

First we bring in the variables file for bootstrap. This file holds all of the settings bootstrap uses to set it's self up. It's worth looking at the file and seeing what all is there that you could change.

For our purposes we only need to change the @grid-columns variable from the default of 12 to 14

next we import the main bootstrap.less file. This file is a wrapper file around all of the bootstrap components and will give you everything that you would have gotten if you just used the bootstrap.css file directly except now it uses a 14 column grid instead.

Continue on with Aurelia Calendar Part 2