Using CSS Grid & jQuery: Making a Daily Scheduler Pt. II
In this part of making our daily scheduler we’ll add the Javascript and jQuery along with a little bit more CSS/HTML so that we can add reservations to our grid.
I’ve never really used jQuery before (it seems a bit outdated since vanilla Javascript can now do a lot of the things jQuery does) so this was all a learning experience. The first thing we need to do is include the jQuery library into our HTML, and include the js file in which we’ll be writing this.
The first thing we need to do in our index.js file is to make it launch on page load. We can do this by putting our code inside of this function $(function() {}). This is shorthand for $( document ).ready(function() {}).
Now, the first thing we want to do in this function is to show the user today’s date so that they know the schedule is for today. We can do this with vanilla Javascript.
First we use the Javascript Date function then we parse that into year, month, day, and finally we arrange it into how we want to show it. I’ve also made a variable that will hold the total days of the current month. I didn’t implement it in this part but eventually we’ll probably want a button that will take us to the next day and we want it to increment until we hit the last possible day of the month. Now we have our date, but we need to show it on the page somehow. If you remember we have an <h2> with a class of date. We want to change the text of this h2.
In jQuery we can do it like this:
Now when we load our page we have the date:
Next we want to create a modal that will pop up and allow us to reserve a time for the plane.
This modal will pop up, and the user will be allowed to select a start time and and an end time for their reservation and then will submit. The submit will put the reservation onto our grid. You can see the options for the select since I minimized them in my code editor but you can see what they look like here (the emmet plugin was really handy for this, it was just opt[value='$@5 AM']{$@5 AM}*7 then a few more times to get the other hours of the day):
Now we just need to add some CSS for our modal so that it starts out not being displayed, and is shown when the user clicks on the plane they want to reserve.
Now let’s make it so that when we click on the plane, it’ll open the modal. If you remember our planes column had a class of ‘planes’, so we’ll use that. We can use this: $( “.planes” ).click(function(e) {}), inside of the function we’ll write the code to handle what we want to happen when we click there.
We put this inside of our function and this will handle the displaying of our modal container. To close it we can add this:
That way when we click it’ll change the display back to none. If I just used toggle in this function, it’d only work once. Now when we click on a plane we get this pop up:
We’ll need to keep track of row, column, and length of the reservation in order to correctly display our reservation on the grid. So let’s add those variables to the top of our click function.
Now whenever we click we want to get the column number, if you remember how we wrote our HTML, we included a number:
To get that number we can use a regex expression (or we could add an id or change the class name to make it simpler but regex expressions are cool so let’s use that).
Now to get the row number we need to translate the values we get from our dropdown into the proper row number. We can do this by using an object.
Now let’s put this all together inside of another function, this function will handle the submit of our modal form. We’ll put this function inside of our click function.
We use the preventDefault() function to prevent the page from reloading after we hit submit. Then we set row by using our timeObj. The $(“#start-select”).val() gives us the start time the user selected from the dropdown, and we translate that start time into the row number using the timeObj. For example, the value of timeObj[‘5 AM’] is 1, and that’s the row where 5 AM is. Then we figure out the length of the reservation by subtracting the start time from the end time. Finally we append this reservation div to our content div using the jQuery .append() function. We use inline CSS along with string literals to place the reservation div where we want. I also had to add inline CSS for the background color of the div because of the content > div rule we had to make every other row line grey, since that would overrule that rule. After we place it we want to reset the inputs for the form, take off the submit event listener, and finally toggle the display of the modal back to none. This is the CSS for the reservation div:
We make the position absolute then add position: relative; to the content div in order for our reservation div to rest over our content grid instead of moving the grid squares around. You can do it either way, the problem with making the position absolute and taking this div out of the grid is that it won’t neatly fit into the grid square if they get too small, but we can fix that by playing around with grid sizes. Here’s how our reservation looks when we add it to our grid:
And that’s it for our simple scheduler! You can check out the codepen here:
The only problem with this is that the logic doesn’t handle if you make a reservation from 4 AM to anything that loops around back to the start of the column. I didn’t decide on whether I should fix this, or whether I should just not allow users to make reservations outside of normal business hours. Regardless, this was a nifty little exercise to learn a bit of jQuery and to play around with CSS Grid some more. Hope this was helpful and thanks for reading!
