Today I would like to talk with you my first internet calendar in 2017. It is a general calendar with Ontario’s landscape theme.
In my work, the local landscape images are throughout each month of this year’s calendar. Because I like to travel that’s why I choose this theme for my calendar.
First at all, in my first page, I don’t want to start my calendar in a certain month, because I want to give it a little bit mysterious, and the person who open my calendar feels like, “Oh, I have an opportunity to choose one month that I like, and click it to see what information behind this main page.” Maybe I can use this method to make them staying on my page for a while. In this case, I create this page for my calendar to display the entire months of the year. And I also add a simple pattern for hovering each item to be active.
Now, I’ll show you to the layouts of each month in my calendar. In each month, it has a similar style, so I use the first month to introduce my design.
Overall, I use an unordered list in the header tag to show left and right bracket buttons, and the name of the month. Each bracket button has a hyperlink to switch the month. In each month’s page, you can click the year text which is in the top right corner to go back to the main page.
And then, I use another list tag to type each date of the month. In the beginning, I try to use table tag to show the dates of each month, but it is not easy to responsive multiple devices’ screens. So I change it to list tag that should be more easier to create a responsive layout.
Moreover, the background picture of each month also shows the season of that month in Ontario. And the dates in yellow are Ontario’s public holidays, and in blue are international holidays.
When you hover above general dates, it shows a bigger font size number, so that you can clearly see it. If my calendar can work automatically, the date in the bigger font size shows today.
When your mouse hover above the dates of Ontario’s holidays, it shows a dotted border around the number, and change its color and font size. In this way, you can pretty sure this day is special, maybe you can take a break.
If you hover above the week which has a holiday inside it, the date of the holiday also change its color and has the dotted border around it, but it doesn’t increase its font size unless the mouse moving to the holiday.
In this week, I will continue to improve its other features, as such add more information about the holiday’s name and story. And I also want to try to add some more the date style, something like remain a black and white color for a date when you have clicked it or the day is pass away, that means “time is something we should value”.
Here is the link of my online calendar: http://calendar.pamela-gao.com/