« JavaScript Foo or Flop? | Main | YouTube the plain-text password fairy »
Calendar v0.1 – A Dynamic Javascript Date Picker…Tutorial
By Jeremy | June 7, 2008
This is the first of a few installments of how to create your own dynamic JavaScript calendar/date picker. First of all, I want to define what I mean be dynamic: simply put, the calendar creates itself from scratch so that it doesn’t matter what date the user wants to pick; they can find it.
The first thing that I always do when creating a JavaScript application is to mock up the html. I find it much easier to debug if I can actually see what is coming out of the JavaScript. This is exactly what I will show you now.
My main concern at this point is that my JavaScript calendar will be robust enough to handle any user’s need. This means considering how many weeks I needed to display to show all of the days. At first thought, 5 seems like a good idea, and why not? Most months consist of four weeks with a few days on either end. But, alas, there are many cases where five weeks would just not do. This means that my design includes six weeks with the first day of the month you are looking at, starting at the top week and the other days following.
The next thing I considered was how to display and manipulate this data. My first idea, and I think best idea, is to just use a simple table. I know, I know, I made reference to the dreaded html tag and even said that I used it, but the plain and simple task is that I do use it and so should you…when it makes sense.
With those two things in mind, I set off to compose some really ugly looking html. Let’s begin by creating a table that has a border so we can see exactly where our columns and rows are divided. That will look something like this:
<table border="1">
Pretty simple! The first thing I want the user to see is the name of the month with an arrow on either side so they can move from month to month. That would look something like this:
<tr> <td><<</td> <td colspan="5">May</td> <td>>></td> </tr>
The colspan=”5″ is included because we know that there are 7 days in a week and the arrows only need to be one column wide. This means that we want the name of the month to take up the rest of the columns which would be 5 columns. The next row will show each day of the week in the corresponding column assigned to it:
<tr> <td>S</td> <td>M</td> <td>T</td> <td>W</td> <td>T</td> <td>F</td> <td>S</td> </tr>
The final thing to do is simply list the days the correspond to the month. The first few will of course be for the month before and the last few days for the month after.
<tr> <td>27</td> <td>28</td> <td>29</td> <td>30</td> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> </tr> <tr> <td>11</td> <td>12</td> <td>13</td> <td>14</td> <td>15</td> <td>16</td> <td>17</td> </tr> <tr> <td>18</td> <td>19</td> <td>20</td> <td>21</td> <td>22</td> <td>23</td> <td>24</td> </tr> <tr> <td>25</td> <td>26</td> <td>27</td> <td>28</td> <td>29</td> <td>30</td> <td>31</td> </tr> <tr> <td>1</td> <td></td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> </tr>
And after all of that nice html code just finish it off with </table> and the mock of up our date picker/calendar is complete. Here is what the finished product should look like:
| << | May | >> | ||||
| S | M | T | W | T | F | S |
| 27 | 28 | 29 | 30 | 1 | 2 | 3 |
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | 30 | 31 |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
Not very pretty yet? Doesn’t actually accomplish anything yet? Um, yeah, that is correct. This is only so that we have a base off of which we can go. Now we easily know how we want to generate our html inside out javascript object. Figuring out the basic html before hand is the best way I have found to build web applications.
In the next installment of this tutorial I will show how to create a JavaScript object, public and private methods and variables in that object as well as one way to generate html on the fly with JavaScript. Thanks for joining me for this tutorial and I encourage you to check out the rest of the tutorials as they come.
Topics: WebDev, tutorials | No Comments »
Comments
You must be logged in to post a comment.